【微信小程序】调用腾讯地图获取当前城市定位

前导知识

1. 腾讯地图SDK接入

1. 申请开发者密钥
打开网址 https://lbs.qq.com/console/key.html，申请密钥，填写信息单击“提交”按钮，弹出提示内容 “key创建成功”，单击蓝色按钮设置 key，根据需求选中选项，如下图所示。


2. 下载微信小程序 JavaScriptSDK
官方下载地址：http://3gimg.qq.com/lightmap/xcx/jssdk/qqmap-wx-jssdk1.0.zip

3. 登录小程序管理后台
设置安全域名，在 “设置” - “开发设置” 中设置 “request合法域名”，添加 https://apis.map.qq.com。如下图所示。

核心代码讲解

小程序提供了打开微信内置地图的 API 和定位用户位置的 API，需要用户授权才能使用，也就是会自动提示用户“是否同意获取您的位置”，同意后即可获取。

1. 在 app.json 文件中声明 permission 属性

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

2. 引入 SDK核心类，并且实例化，用于后期调用

// 引入SDK核心类
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
var qqmap
// 实例化API核心类
var qqmapsdk = new QQMapWX({
    key: '开发密钥（key）' // 必填
}); 

3. 当用户授权后，获取当前用户的地理位置（微信返回的是经纬度、速度等参数）

// 获取当前位置（经纬度）
  onReady() {
    let vm = this;
    wx.getLocation({
      type: 'gcj02',
      success: (res) => {
        this.setData({
          latitude: res.latitude,   //纬度
          longitude: res.longitude  //经度
        })
      },
    })
  },

4. 微信没有将经纬度直接转换为地理位置，借用腾讯位置服务中关于微信小程序的地理转换JS SDK 的API（返回信息中包括国家，省，市，区，经纬度等地理位置）

查询API文档获得如下信息：
reverseGeocoder(options:Object) ：逆地址解析 。该接口提供由坐标到坐标所在位置的文字描述的转换。输入坐标返回地理位置信息和附近poi列表。目前应用于物流、出行、O2O、社交等场景。服务响应速度快、稳定，支撑亿级调用。

• 满足传统对省市区、乡镇村、门牌号、道路及交叉口、河流、湖泊、桥、poi列表的需求。
• 业界首创，提供易于人理解的地址描述：海淀区中钢国际广场(欧美汇购物中心北)。
• 提供精准的商圈、知名的大型区域、附近知名的一级地标、代表当前位置的二级地标等。

注：坐标系采用gcj02坐标系

核心代码

getUserLocation() {
    let vm = this
    qqmap.reverseGeocoder({ //逆地址解析（经纬度 ==> 坐标位置）
      //位置坐标，默认获取当前位置，非必须参数
      /**
       * 
       //Object格式
        location: {
          latitude: 39.984060,
          longitude: 116.307520
        },
      */
      /**
       *
       //String格式
        location: '39.984060,116.307520',
      */
      location: {
        latitude: vm.data.latitude,
        longitude: vm.data.longitude
      },
      success(res) {
        vm.setData({
          province:res.result.ad_info.province,
          city:res.result.ad_info.city,
          district:res.result.ad_info.district
        })
      }
    })
  }

完整代码

index.wxml页面代码

<view>经度：{{longitude}}---纬度：{{latitude}}</view>
<view>{{province}}---{{city}}---{{district}}</view>

index.js脚本文件

// 引入SDK核心类
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
var qqmap
Page({
  data: {
    longitude: '', //经度
    latitude: '', //纬度
    province: '', //省
    city: '', //市
    district: '' //区/县
  },
  onLoad() {
    // 实例化API核心类
    qqmap = new QQMapWX({
      key: '开发密钥（key）' // 必填
    })
  },
  // 获取当前位置（经纬度）
  onReady() {
    let vm = this;
    wx.getLocation({
      type: 'gcj02',
      success: (res) => {
        this.setData({
          latitude: res.latitude,
          longitude: res.longitude
        })
        vm.getUserLocation()
      },
    })
  },
  // 获取用户当前位置
  getUserLocation() {
    let vm = this
    qqmap.reverseGeocoder({ //逆地址解析（经纬度 ==> 坐标位置）
      location: {
        latitude: vm.data.latitude,
        longitude: vm.data.longitude
      },
      success(res) {
        console.log(res)
        vm.setData({
          province:res.result.ad_info.province,
          city:res.result.ad_info.city,
          district:res.result.ad_info.district
        })
      }
    })
  }
})

app.json文件

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

运行结果