地图组件

地图组件支持灵活配置可视区域、缩放层级、地理位置与标记点，满足多样化业务需求。

价值

1. 灵活配置：可调整地图显示范围、缩放层级，精准展示业务所需内容。
2. 多点标记：支持添加多个标记点，便于位置管理与分析。

应用场景

• 展示公司地址、门店分布、导航等
• 通过经纬度数据展示地理位置信息
• 用户点击标记点触发交互行为

使用说明

地图服务商注册与 API Key 获取

1. 前往高德地图开放平台（https://lbs.amap.com）注册账号，配置应用后生成  API Key 和安全密钥（小程序端已内置腾讯地图服务，无需配置 API）。

   

2. 在「项目配置-全局设置-地图API密钥」填写对应 API Key 和安全密钥。

   

配置地图组件

创建地址信息数据表

在数据库中创建“地址信息”表，常用字段有：标记点名称（Text）、标记点图标（图片）、经纬度（经纬度类型）。

地图配置

• 缩放层级：显示范围，默认 11，1-19 可选，数值越小范围越大

  

• 显示周边信息：开启后展示周边位置

  

• 显示当前位置：开启后展示用户当前位置

  

• 中心点：配置后地图以中心点为圆心展示，未配置时默认以北京天安门为中心

  

标记点配置

入口

打开标记点开关，进入标记点配置面板

数量

单个标记点和多个标记点的区别在于多标记点需要配置坐标点的数据源以获取多个坐标点经纬度。1. 当数量选择单个时，用户只需要绑定经纬度坐标。

多标记点

当数量选择为多个时，需要在页面上配置数据源为远程数据，在数据源输入框绑定该远程数据，经纬度配置项通过组件内数据绑定。

图标样式

支持用户上传和数据绑定标记点的样式以及修改样式大小。

标记点名称

支持用户手动输入或绑定标记点的名称。

标记点点击时行为

用户可以通过坐标点点击时行为配置出符合业务逻辑的交互，例如点击对应标记点时展示弹窗。

地理位置/经纬度获取步骤

为了国家安全，在国内的任何地图上获取到的坐标都不是准确的坐标，会有一定量的偏移，为了在Zion中添加准确的坐标位置，需要进行下列的转换操作才能实现

• 登录高德地图API ， 通过关键字搜索位置，复制坐标结果

  

• 登录坐标转换地址  ，按照以下四个步骤进行地理位置坐标的转换，步骤4获取的就是准确的坐标

  

• 在Zion中上传“经纬度”类型的数据时，只需要将步骤4中的经纬度粘贴到对应的输入框中即可

  

功能边界

1. 地图组件中心点为空时，默认显示天安门位置
2. 小程序端默认使用腾讯地图服务，网页端默认使用高德地图服务
3. 地图组件只用于显示位置信息，不可点击获取位置