小程序2-地图定位1

　　微信小程序在开发时可能会需要给用户展示地图定位。这时候就需要使用微信给我们准备的组件map。

　　本例要实现的功能是，页面打开时显示地图，并在地图上显示出用户的当前位置。下面介绍下如何使用map组件，以及注意事项。

　1.在视图层.wxml文件中的合适位置插入map组件的标签。

<map longitude="{{longitude}}" latitude="{{latitude}}" id="map" 
class="map" show-location="true" scale="17"></map>

　longitude和latitude是经纬度，它是用来初始化地图显示时的坐标位置，这2个属性也是map组件必须的属性，其他属性都是可选的。在本例中，页面onshow的时候要展示出用户当前位置，所以，这里使用了插值表达式{{longitude}}和{{latitude}}，用来把地图的中心坐标初始化为当前用户所在地坐标。

　　show-location属性的值是一个boolean类型的值，它用来配置是否已一个“圆形”的光标，来定位当前用户所在的位置。说白了就是要不要在地图上显示出用户的当前位置。这个属性可以不给值，默认为false；

　　scale属性是用来设置地图的缩放比例，其选值范围是 [3 - 20]。

　　当然此组件还有很多其他属性，这里是较为常用的4个属性。

　2.在逻辑层.js文件中获取用户的当前坐标，并设置到map组件上

　　由于在第1步中要使用2个差值表达式，所以要先在data中声明2个字段，分别是longitude和latitude；

获取当前坐标，需要调用微信小程序的api： wx.getLocation(Object obj)，官方给出demo如下：

wx.getLocation({
 type: 'wgs84',
 success (res) {
   const latitude = res.latitude
   const longitude = res.longitude
   const speed = res.speed
   const accuracy = res.accuracy
 }
})

　　我们在这里做了下变形，把获取当前坐标的逻辑封装成了方法。

Page({
  data: {
    longitude: '', //经度
    latitude: ''   //维度 
  },

  onShow: function () {
    this.getLocation();
  },

  getLocation(){
    wx.getLocation({
      type: 'wgs84',
      success: this.handleGetLocationSucc.bind(this), 
    })
  },

  handleGetLocationSucc(res){
      this.setData({
        longitude: res.longitude,
        latitude: res.latitude
      }); 
      console.log(res.longitude + " : " + res.latitude);
  }

})

　3.设置访问权限

　　这个时候，如果运行小程序，你会看到下图：

 

 　　原因是，当我们使用wx.getLocation()的时候，需要在app.json全局配置文件中设置一下permission字段，顾名思义该字段是用来配置权限的，这里的权限就是要允许小程序获取当前的位置信息。

　　那么，我们打开app.json，在里边写如下代码：　　

"permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  }

　　再次编译运行小程序，你会看到下面的界面：

 

 　　点击确定，表示我同意让小程序访问当前手机的位置信息。然后就可以看到地图，并在地图上用浅蓝色圆圈表示出的当前用户所在位置。

　　

 　　需要注意的是，这一步必须做，否则不能正常运行。

　4.让地图初始显示时，以当前位置为中心。

　　这时候，如果启动真机调试，你会发现，地图的中心点并不是你当前所处位置，你还需要左滑才能看到自己的位置，解决的办法很简单，你只需要在wx.getLocation()方法的配置参数中把type的值改成gcj02就可以了。代码如下：　　

getLocation(){
    wx.getLocation({
      type: 'gcj02',
      success: this.handleGetLocationSucc.bind(this), 
    })
  }

 　　这里简单说一下type这个参数的2个值'gcj02'和'wgs84'分别是什么，有什么区别。

　　大家都知道，定位靠的是坐标，目前常见的坐标系有3套：

1.  WGS-84：GPS坐标系
2.  GCJ-02：火星坐标系，国测局02年发布的坐标体系，高德，腾讯等使用。
3.  BD-09：百度坐标系，百度自研，百度地图使用。

　　天朝的坐标系是经过了一个坐标偏移的，经过测试，使用GCJ02（火星坐标）比WGS84（GPS）的坐标在计算距离的时候更为精确。

　　搞定！