1、地图

map是一个比较复杂的组件，他有很多参数，如下表所示。

1.1 map的API

map组件的两个属性longitude和latitude表示当前地图中心的经度和纬度，和当前用户所在位置的经度和纬度是不同概念，无直接关系。例如，某然在广东省东菀市，但是可以打开北京天安门为中心的一幅地图，map的longitude和latitude是用来控制地图中心的参数，并不是用户实时的地理位置。

1.2 简单地图示例

pages/map/map.wxml

 <map id="tu" latitude='23.099' longitude='113.325'  scale='12' class="tu" controls='{{con}}' markers='{{mar}}' bindcontroltap='con' bindmarkertap='mar'>
 </map>

pages/map/map.js

 Page({
 
 data: {
 mar:[{
 inconPath:"location.png",
 id:0,
 latitude:23.088994,
 longitude:113.324520,
 width:50,
 heigth:50
 
     }
     ]
   },
 
 con:[{
 id:1,
     iconPath:'location.png',
 positon:{left:0,
 top:50,
 width:50,
 height:50},
 clickable:true
   }],
 
   mar:function(e)
   {console.log("你点了标记点")},
 
   con: function (e) { console.log("你点了游标") }
 })

map只能简单地生成一幅地图，要对地图进行操作，如进行缩放和移动操作，开发者必须在JS中获取MapContext对象，这时需要通过wx.createMapContext('id')获取MapContext对象。你可以理解为wx.createMapContext('id')就是指向地图的一个指针。

1.3 MapContext对象常用操作

需要说明的是MapContext.getRegion()接口获取图片的范围，即是经度和纬度的取值范围，取值范围是以地图的西南和东北两个顶点的经度和纬度来限定的。MapContext.translateMarker()和MapContext.includePoints()两个接口中需要用到的经度和纬度不能超出MapContext.getRegion()接口的经度和纬度取值范围。

1.4 地图操作示例

MapContext.wxml

 <map 
   id="ditu" 
   style="width: 710rpx; height: 250px;" 
   latitude="{{latitude}}" 
   longitude="{{longitude}}" 
   markers="{{markers}}" 
   show-location>
 </map>
 <button bindtap="getCenterLocation" type="primary">获取地图中心的经纬度</button>
 <button bindtap="moveToLocation"  type="primary">将地图中心移动到当前定位点</button>
 <button bindtap="translateMarker" type="primary">平移marker，带动画</button>
 <button bindtap="includePoints" type="primary">缩放视野展示所有经纬度</button>
 <button bindtap="scaleClick" type="primary">获取当前地图的缩放级别</button>
 <button bindtap="getRegionClick" type="primary">获取当前地图的视野范围</button>

MapContext.js

 Page({
   data: {
     latitude: 22.557416086996245,
     longitude: 113.3832685578842,
     markers: [{
       id: 1,
       latitude: 22.557416086996245,
       longitude: 113.3832685578842,
       name: '中山北站'
     }],
   },
   onReady: function (e) {
     //创建 map 上下文 MapContext 对象。
     this.zhizhen = wx.createMapContext('ditu')
   },
   //获取当前地图中心的经纬度
   getCenterLocation: function () {
     this.zhizhen.getCenterLocation({
       success: function (res) {
         console.log(res.longitude)
         console.log(res.latitude)
       }
     })
   },
   //将地图中心移动到当前定位点
   moveToLocation: function () {
     this.zhizhen.moveToLocation()
   },
   //平移marker，带动画
   translateMarker: function () {
     this.zhizhen.translateMarker({
       markerId: 1,
       autoRotate: true,
       duration: 2000,
       destination: {
         latitude: 22.55229,
         longitude: 113.3845211,
       },
       animationEnd() {
         console.log('animation end')
       }
     })
   },
   //缩放视野展示所有经纬度
   includePoints: function () {
     this.zhizhen.includePoints({
       padding: [10],
       points: [{
         latitude: 22.54229,
         longitude: 113.3745211,
       }, {
           latitude: 22.55229,
           longitude: 113.3845211,
       }]
     })
   },
   //获取当前地图的缩放级别
   scaleClick: function () {
     this.zhizhen.getScale({
       success: function (res) {
         console.log(res.scale)
       }
     })
   },
   //获取当前地图的视野范围
   getRegionClick: function () {
     this.zhizhen.getRegion({
       success: function (res) {
         console.log(res.southwest)//西南角经纬度
         console.log(res.northeast)//东北角经纬度
       }
     })
   }
 })

点击获取地图中心的经纬度

获取当前地图的视野范围：

将地图中心移动到当前定位点：

2、位置

小程序常用下面三个接口对位置进行操作。

2.1 位置API

2.1.1 wx.getLocation(Object object)

该接口获取当前的地理位置

2.1.2 wx.openLocation(Object object)

使用微信内置地图查看位置

示例代码：

 wx.getLocation({
  type: 'gcj02', //返回可以用于wx.openLocation的经纬度
  success (res) {
    const latitude = res.latitude
    const longitude = res.longitude
    wx.openLocation({
      latitude,
      longitude,
      scale: 18
    })
  }
 })

2.1.3 wx.chooseLocation()

打开地图选择位置。

object.success 回调函数

参数

Object res

2.2 wx.openLocation()案例

pages/openLocation/openLocation.js

 
 //获取应用实例
 var app = getApp()
 Page({
   data: {
     motto: 'Hello World',
     userInfo: {}
   },
   //事件处理函数
   bindViewTap: function () {
     wx.navigateTo({
       url: '../logs/logs'
     })
   },
   onLoad: function () {
     console.log('onLoad')
     var that = this
     //调用应用实例的方法获取全局数据
     app.getUserInfo(function (userInfo) {
       //更新数据
       that.setData({
         userInfo: userInfo
       })
     })
     wx.getLocation({
       type: 'gcj02', // 返回可以用于wx.openLocation的经纬度
       success(res) {
         const latitude = res.latitude
         const longitude = res.longitude
         console.log(latitude + "---" + longitude)
         wx.openLocation({
           latitude,
           longitude,
           scale: 18
         })
       }
     })
    
   }
 })

这里先用wx.getLocation()接口获取经度和纬度，再用wx.openLocation()接口使用wx.getLocation()接口获取的经度和纬度打开位置地图。

2.3 wx.chooseLocation()案例

pages/chooseLocation/chooseLocation.js

 
 //获取应用实例
 var app = getApp()
 Page({
   data: {
     motto: 'Hello World',
     userInfo: {}
   },
   //事件处理函数
   bindViewTap: function() {
     wx.navigateTo({
       url: '../openLocation/openLocation'
     })
   },
   onLoad: function () {
     console.log('onLoad')
     var that = this
     //调用应用实例的方法获取全局数据
     app.getUserInfo(function(userInfo){
       //更新数据
       that.setData({
         userInfo:userInfo
       })
     })
 
 
     wx.getLocation({
       type: 'wgs84', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
       success: function(res){
           var latitude = res.latitude
           var longitude = res.longitude
           wx.chooseLocation({
             latitude: latitude,
             longitude: longitude,
             success: function(res){
                 console.log(res)
             },
             fail: function() {
               // fail
             },
             complete: function() {
               // complete
             }
           })
       },
       fail: function() {
         // fail
       },
       complete: function() {
         // complete
       }
     })
 
   }
 })

本例先用wx.getLocation()接口获取经度和纬度，再用wx.chooseLocation()接口使用wx.getLocation()接口获取的经度和纬度选择打开地图位置，运行效果如下所示，注意在其右上角有一个“确定”按钮，该按钮即为wx.chooseLocation()接口选择二字的含义所在。

原文始发于微信公众号（全栈开发那些事）：微信小程序地图与位置相关操作