標題小程序獲取當前位置----逆地址解析----地圖選點

實現(xiàn)功能：小程序首頁定位當前城市類似于
某寶：
某團：

獲取當前位置：

在小程序首頁創(chuàng)建getLocation函數(shù)并在onLoad調(diào)用
首先需要引入騰訊位置服務(wù)的 微信小程序JavaScript SDK

1.申請開發(fā)者密鑰（key）：申請密鑰
2.開通webserviceAPI服務(wù)：控制臺 -> key管理 -> 設(shè)置（使用該功能的key）-> 勾選webserviceAPI -> 保存
(小程序SDK需要用到webserviceAPI的部分服務(wù)，所以使用該功能的KEY需要具備相應(yīng)的權(quán)限)
3.下載微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.2 安全域名設(shè)置，在“設(shè)置” ->
4.“開發(fā)設(shè)置”中設(shè)置request合法域名，添加https://apis.map.qq.com

并在首頁文件頭部引入

var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');

getLocation：

  getLocation() {
    let _this = this
    wx.getLocation({  // 調(diào)用微信小程序的wx.getLocation獲取當前的經(jīng)緯度
      type: 'wgs84',
      success(res) {
        const latitude = res.latitude
        const longitude = res.longitude
        const key = ''; // 使用在騰訊位置服務(wù)申請的key
        // 實例化API核心類
        var qqmapsdk = new QQMapWX({
          key: key
        });
        // 逆地址解析
        qqmapsdk.reverseGeocoder({
          location: {
            latitude,
            longitude
          },
          success(res) {
            // console.log('getLocation: ', res.result)
            _this.setData({
              location: res.result.address_component.city
            })
          }
        })
      }
    })
  },

可以獲取這么一堆數(shù)據(jù)

我們?nèi)∑渲械氖屑塩ity

選擇位置：

我們這里采用的是騰訊位置服務(wù)地圖選點插件實現(xiàn)選擇位置功能。
接入指引官網(wǎng)有詳細講解。
在文件頭部引入：

const chooseLocation = requirePlugin('chooseLocation');

在點擊首頁城市選擇區(qū)域時調(diào)用location()函數(shù)，因為頁面加載時獲取位置已經(jīng)提示用戶授權(quán)小程序的定位功能，這里調(diào)用wx.getSetting驗證用戶是否同意授權(quán)，如果同意則跳轉(zhuǎn)地圖選點頁面，否則提示用戶授權(quán)。
location()函數(shù)：

  // 定位
  location() {
    const key = ''; //使用在騰訊位置服務(wù)申請的key
    const referer = ''; //調(diào)用插件的app的名稱
    // const category = '生活服務(wù),娛樂休閑';
    const scale = 7;
    wx.getSetting({
      success(res) {
        if (!res.authSetting['scope.userLocation']) {
          wx.authorize({
            scope: 'scope.userLocation',
            success() {
              // 用戶已經(jīng)同意小程序使用定位功能
              wx.navigateTo({
                url: `plugin://chooseLocation/index?key=${key}&referer=${referer}&scale=${scale}`
              });
            },
            fail(err) {
              console.log(err)
              if (err.errMsg.indexOf('auth deny')) {
                // 用戶拒絕定位授權(quán)
                Dialog.alert({
                  message: '您已拒絕地理位置授權(quán),\n請在右上角設(shè)置打開',
                })
              }
            }
          })
        } else {
          wx.navigateTo({
            url: `plugin://chooseLocation/index?key=${key}&referer=${referer}&scale=${scale}`
          });
        }
      }
    })
  },

獲取位置信息：

如果用戶選點完成，則在onShow里獲取用戶的選點結(jié)果對象。
大部分選點的返回結(jié)果都可以直接獲取到city，但是某些選點不會直接返回city如：公交車站點等

此時就需再次調(diào)用逆地址解析來獲取位置信息

    const location = chooseLocation.getLocation(); // 如果點擊確認選點按鈕，則返回選點結(jié)果對象，否則返回null
    // console.log('location：', location)
    if (location) {
      if (location.city) {
        this.setData({
          location: location.city
        })
      } else {
        const latitude = location.latitude
        const longitude = location.longitude
        const key = '';//	使用在騰訊位置服務(wù)申請的key
        // 實例化API核心類
        var qqmapsdk = new QQMapWX({
          key: key
        });
        // 逆地址解析
        qqmapsdk.reverseGeocoder({
          location: {
            latitude,
            longitude
          },
          success(res) {
            // console.log('getLocation: ', res.result)
            _this.setData({
              location: res.result.address_component.city
            })
          }
        })
      }
    }

最后記得頁面卸載時設(shè)置插件選點數(shù)據(jù)為null，防止再次進入頁面，geLocation返回的是上次選點結(jié)果

 onHide() {
    chooseLocation.setLocation(null);
  },