地图组件顾名思义就是显示我们的地图的，通过经纬度，将位置在地图上显示出来；这里提几个常用属性，更多的可以到官网进行查阅。
属性
longitude：number类型，经度坐标
latitude：number类型，纬度坐标
markers：Array.<marker值>数组类型，标记点，可以有多个
show-location：boolean类型，显示带有方向的当前定位点
因为坐标点不好弄，所以我们通过官网demo进行演示。
官网demo地址：打开小程序map组件官网地址，找到
点击在开发者工具中预览效果，会自动加载到小程序开发工具中。
代码分析
导入官网demo之后，我们可以看到index.wxml、index.js、index.wxss三个文件。
这个样子的一个工程目录，但是这里还是贴一下代码，并添加了相关注释。
index.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,}]})}})
index.wxml文件代码
<view class="page-body"><view class="page-section page-section-gap"><mapid="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文件就一个样式，并且还没有什么特别的，所以就不贴上来了。
我们运行模拟器看一下效果图：
看地图中的绿色标记就可以看到data中基础经纬度定位的位置，然后我们来操作一下四个事件监听。
1.获取位置，点击获取位置可以看到控制台有了对应输出：
2.移动位置，点击移动位置可以看到地图中心点直接move到了当前的经纬度地址，为了方便观看移动之后我们再次点击获取：
3.移动标记，我们在data中定义了移动标记的位置，当我们点击移动标记时，标记会移动到data中指定经纬度的位置：
/*** 移动标注*/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')}})},
在控制台打印出animation end之后，我们再次点击获取位置，可以获取到移动标记之后标记点的位置：
4.缩放视野展示所有经纬度，这个方法其实没什么说的，就是把点的集合缩放到一个可见的视野之内，这里就不做过多的显示了，自己进行操作和尝试就可以了。
其实地图组件只要按照官方文档给的方法进行操作就可以很好的展示出来，重要的是属性的操作，属性的值，以及取值区间等等，这里就贴一部分，更多的到小程序map组件官网地址进行查看
另外事件监听的四个方法，在小程序的api里面也都包含的有，详情也可以查阅小程序API文档
地图组件的介绍就这么多了~
