map组件顾名思义就是展示我们的地图，通过经纬度在地图上显示位置；这里有几个常用的属性，更多可以在官网找到。

属性

：类型，经度坐标

：类型，纬度坐标

: .类型，标记，可以有多个

show-: 类型，显示当前锚点的方向

因为坐标点不容易得到，所以我们通过官网demo来演示。

官网demo地址：打开小程序地图组件的官网地址，找到

在开发者工具中点击预览效果，会自动加载到小程序开发工具中。

代码分析

导入官网demo后，我们可以看到三个文件：.wxml、.js、.wxss。

这样的一个项目目录，不过这里是代码，相关注释加了。

.js 文件代码

Page({ data: { /** * 默认中心值 */ latitude: 23.099994, longitude: 113.324520, /** * markers标记点数组 */ markers: [{ id: 1, latitude: 23.099994, longitude: 113.324520, name: 'T.I.T 创意园', iconPath: '/image/location.png' }], /** * covers标记点数组 即将被删除，所以不做过多介绍 */ covers: [{ latitude: 23.099994, longitude: 113.344520, iconPath: '/image/location.png' }, { latitude: 23.099994, longitude: 113.304520,

iconPath: '/image/location.png' }] }, onReady: function (e) { /** * 获取上下文对象 */ this.mapCtx = wx.createMapContext('myMap') }, /** * 获取当前中心点位置 * 获取当前中心点经纬度 */ getCenterLocation: function () { this.mapCtx.getCenterLocation({ success: function(res){ console.log(res.longitude) console.log(res.latitude) } }) }, /** * 移动位置 * 将定位点移动到指定位置 */ moveToLocation: function () { this.mapCtx.moveToLocation() }, /** * 移动标注 */ translateMarker: function() { this.mapCtx.translateMarker({ markerId: 1, autoRotate: true, duration: 1000, destination: { latitude:23.10229, longitude:113.3345211, }, animationEnd() { console.log('animation end') } }) }, /** * 缩放视野展示所有经纬度 */ includePoints: function() { this.mapCtx.includePoints({ padding: [10], points: [{ latitude:23.10229, longitude:113.3345211, }, { latitude:23.00229, longitude:113.3345211, }] }) } })

.wxml 文件代码

<view class="page-body"> <view class="page-section page-section-gap"> <map id="myMap" style="width: 100%; height: 300px;" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" covers="{{covers}}" show-location ></map> </view> <view class="btn-area"> <!-- 获取中心点位置事件监听 --> <button bindtap="getCenterLocation" class="page-body-button" type="primary">获取位置</button> <!-- 移动到指定位置事件监听 --> <button bindtap="moveToLocation" class="page-body-button" type="primary">移动位置</button> <!-- 移动标注位置事件监听 --> <button bindtap="translateMarker" class="page-body-button" type="primary">移动标注</button> <!-- 缩放视野展示所有经纬度事件监听 --> <button bindtap="includePoints" class="page-body-button" type="primary">缩放视野展示所有经纬度</button> </view> </view>

主要是这两个文件，wxss文件只有一种风格，没什么特别的，就不贴了。

让我们运行模拟器看看效果图：

看地图中的绿色标记，可以看到数据中基本经纬度定位的位置，接下来我们来操作四个事件监听器。

1.获取位置，点击获取位置可以看到控制台有对应的输出：

2.移动位置，点击移动位置可以看到地图中心直接移动到当前经纬度地址，为了方便查看移动，我们再次点击获取：

3.移动标记，我们定义移动标记在数据中的位置，当我们点击移动标记时微信小程序开发中地图分布，标记会移动到数据中指定的经纬度位置：

/** * 移动标注 */ translateMarker: function() { this.mapCtx.translateMarker({ markerId: 1, autoRotate: true, duration: 1000, destination: { latitude:23.10229, longitude:113.3345211, iconPath: '/image/location.png' }, animationEnd() { console.log('animation end') } }) },

控制台打印完结束后，我们再次点击获取位置，移动后就可以得到的位置：

4.缩放视野以显示所有经纬度。这种方法实际上并没有说什么。它是将点集缩放到可见的视野中。这里就不做太多展示了，自己操作试试就行了。

其实地图组件只要按照官方文档给出的方法操作，就可以很好的展示出来。重要的是属性的操作，属性的取值，取值范围等，这里是一部分，更多可以查看小程序地图组件的官网地址

另外，事件监听的四种方法也包含在小程序的api中。详情也可以参考小程序API文档

地图组件的介绍到此为止~