对小程序地图小程序API:my.createMapContext(mapId)的简单使用

my.createMapContext(mapId):创建并返回 map 上下文 mapContext 对象。

mapContext 通过 mapId 跟一个  组件绑定，通过它可以操作对应的  组件。 

方法： getCenterLocation()：获取当前地图中心的经纬度，返回的是 gcj02 坐标系，可以用于 my.openLocation； 

moveToLocation()：将地图中心移动到当前定位点，需要配合map组件的show-location使用； 

位置API abridge.openLocation：使用支付宝内置地图查看位置；  

首先，调试地图API需要真机预览调试 其次，在需要地图的页面.axml文件添加标签并设置id和show-location属性 

.axml文件标签示例:

<map id="myMap" show-location />
<button type="primary" onTap="getCenterLocation">获取位置button>
<button type="primary" onTap="moveToLocation">移动位置button>

然后，可以选择onReady ()(或者选择其他事件)调用 this.mapCtx = my.createMapContext('myMap');创建并返回map 上下文 mapContext 对象。

可以调用getCenterLocation()方法获得当前地图中心的经纬度； 

moveToLocation();移动地图的中心为当前位置，可以实现快速定位当前所在位置在地图上显示；   代码示例: 

Page({
  onReady(e) {
    // 使用 abridge.createMapContext 获取 map 上下文 
    this.mapCtx = my.createMapContext('myMap')
  },
  getCenterLocation() {
    //获取当前地图中心的经纬度 
    this.mapCtx.getCenterLocation({
      success(res) {
        console.log(res.longitude)
        //获取的经度
         console.log(res.latitude)
        //获取的纬度 //使用支付宝内置地图查看位置，可以实现导航和打车等操作 
        my.openLocation({
          longitude: res.longitude, // 经度
          latitude: res.latitude, // 纬度 
        });
      }
    })
  },
  moveToLocation() {
    //移动地图中心的位置为当前位置，实现定位
    this.mapCtx.moveToLocation()
  }
})

 在这提供一下我个人的理解，有什么不对和需要补充之处还请不吝赐教，谢谢各位看官啦！