微信小程序之获取当前位置经纬度以及地图显示

微信小程序开发已经成为了许多款产品开发的必备技能，在这个过程中经常需要获取当前用户的地理位置服务，并以此来实现一些具有定位功能的服务。那么如何在小程序中获取当前位置经纬度以及地图显示呢？下面我们就来详细介绍一下。

一、获取当前位置经纬度

在微信小程序中获取当前定位信息需要用到wx.getLocation()方法，可以通过该方法获取到用户的当前位置坐标，该方法具有多个参数可以使用，通过参数可调整获取的位置精细度以及调整是否使用缓存等参数。其代码格式如下：

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

其中type用于选择地理坐标的类型，需要注意的是type值必须为wgs84才能在腾讯地图上正确定位。success回调函数可以成功获取到用户的位置信息，latitude和longitude则为获取得到的纬度和经度信息。

1.优化获取位置的精度

在调用wx.getLocation方法的时候，可以通过设置accuracy的值来控制返回的位置信息的精度，这时我们需要将type设为gcj02，gcj02是国测局制定的坐标体系，为加密坐标体系，定位误差在10-50m。

wx.getLocation({
  type: 'gcj02',
  success: function(res) {
    console.log(res)
  }
})

2.授权获取位置信息

在小程序开发中，默认不具有获得用户微信授权的权限，因此需要引导用户进行授权操作。在小程序中，可以通过wx.getSetting() API 获取用户的当前设置，返回值中只会出现小程序已经向用户请求过的权限，并且已经允许的权限。针对小程序中获取位置信息的权限，还需要使用 wx.authorize() 方法向用户发起授权请求。

wx.getSetting({
  success(res) {
    if (!res.authSetting["scope.userLocation"]) {
      wx.authorize({
        scope: 'scope.userLocation',
        success() {
          wx.getLocation({
            type: 'wgs84',
            success(res) {
              console.log(res.latitude, res.longitude)
            }
          })
        }
      })
    } else {
      wx.getLocation({
        type: 'wgs84',
        success(res) {
          console.log(res.latitude, res.longitude)
        }
      })
    }
  }
})

二、通过地图显示当前位置

获取当前位置的经纬度之后，我们可以使用腾讯地图的API来展示当前位置以及周边的信息，为了实现这个功能，我们需要使用微信小程序开发工具中提供的 map 标签组件。

1.引入地图组件

在小程序页面的wxml文件中添加必要的标记，用于引入腾讯地图的组件和控件标记。

// wxml
<view id="container">
    <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" style="width: 100%; height: 100%;"></map>
</view>

其中，longitude和latitude为当前定位的经纬度，markers为标记点，可以用来标记信息。

2.调用腾讯地图API

在小程序页面的js文件中调用相关的腾讯地图API来获取信息，并进行相应的处理。下面是获取周边信息的代码示例。其中，location参数为当前定位的经纬度信息。

// js
Page({
  data: {
    markers: []
  },
  onLoad: function () {
    let that = this
    wx.getLocation({
      type: 'gcj02',
      success: function (res) {
        that.setData({
          longitude: res.longitude,
          latitude: res.latitude, 
        })
        wx.request({
          url: 'https://apis.map.qq.com/ws/place/v1/search',
          data: {
            key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
            location: res.latitude + ',' + res.longitude,
            keyword: '酒店',
            page_size: 10
          },
          success: function(res){
            var markers = res.data.data.map((item) => {
              var _marker = {
                id: item.id,
                title: item.title,
                latitude: item.location.lat,
                longitude: item.location.lng,
                iconPath: '../image/map_icon.png'
              }
              return _marker
            })
            that.setData({
              markers: markers
            })
          }
        })
      },
    })
  },
})

其中，url为请求腾讯地图API的接口地址，key为Tencent企业邮箱邮箱申请，location参数为当前定位的经纬度信息，也可以通过getPageParam接口从上一个页面传递过来，keyword为搜索的关键字，page_size为每页展现的信息条数。

3.小结

通过上述方式，我们可以成功获取到用户的当前位置信息以及通过腾讯地图的接口将位置信息展现在地图上，对于开发具有定位功能的小程序应用，这个功能是非常实用的。