4.7.4 地图组件
地图组件用于显示地图，并且可以在地图上显示出标记点、路线、圆和控件，如图4-7-4所示。在浏览器中不能体验地图组件功能，需使用手机扫描微信开发者工具的预览二维码，在手机中运行时才能体验。
图4-7-4 地图组件
1、基础属性
地图组件提供若干个基础属性：
l 中心经度：设置地图中心经度
l 中心纬度：设置地图中心纬度
l 动态中心经度：指定数据列，将数据列中的值作为中心经度
l 动态中心纬度：指定数据列，将数据列中的值作为中心纬度
l 显示当前位置：设置在地图上是否显示带有方向的当前定位点
l 缩放比例：设置缩放级别，取值范围为5-18
l 标记点配置：指定标记点的数据来源，数据集包括如下的列：标记点id、纬度、经度、名称、图标、旋转角度、透明度、图标高度、图标宽度、气泡窗口文本和标签文本。可以统一设置气泡窗口和标签的文字颜色、字体大小、边框圆角、背景色、边缘留白和文本对齐方式等
l 路线配置：指定路线的数据来源，数据集包括如下的列：起点的经纬度和更换箭头图标。可以统一设置线的颜色、宽度、是否虚线、是否带箭头、线的宽度以及边框颜色
l 圆的配置：指定圆的数据来源，数据集包括如下的列：圆心经纬度、半径、填充颜色、描边颜色以及宽度
l 控件配置：设置控件id、显示位置、显示的图标以及是否可点击
2、操作
地图组件提供2个操作：
l 显示标记点：在地图上显示标记点
l 隐藏标记点：隐藏地图上的标记点
3、事件
地图组件提供3个事件：
l 单击标记点：单击地图上的标记点时触发
l 视野变化：滑动地图、缩放地图等使视野发生变化时触发
l 单击：单击地图时触发
4、示例
在地图上显示出3个门店标记点。添加门店数据集，增加经度、纬度和名称列，并在数据集中输入3个门店的名称及经纬度，如图4-7-5所示。在页面上添加地图组件，在“地图配置”中设置标记点。设置“标记点数据集”属性为门店数据集，设置“经度”属性为门店数据集的经度列，设置“纬度”属性为门店数据集的纬度列，设置“标记点名”属性为门店数据集的名称列。为了更好的在地图上显示标记点，需要合理设置地图的中心经纬度（本例设置为116.46和39.86）和缩放比例。
图4-7-5 标记点数据集
目前地图组件不支持在浏览器中预览，需要在微信开发者工具中预览。因此，在“发布”页面下载小程序，导入到微信开发者工具中运行即可看到地图上显示出了3个标记点。