一、去腾讯地图官网申请腾讯key

腾讯位置服务 - 立足生态,连接未来

需要在白名单里面配置一下 servicewechat.com 否则微信小程序会 报出一个权限的错误

二、 微信公众平台配置  https://apis.map.qq.com

三、 抄官网代码

微信小程序JavaScript SDK | 腾讯位置服务

 

 

代码使用

 

// app.js
const QQMapWX = require('./utils/qqmap-wx-jssdk.min.js')
var qqmapsdk = new QQMapWX({
  key: '申请的key'
});


  onLaunch() {
  
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
    const loc = wx.getStorageSync('location')
    // this.getOnlineDistrict(loc.latitude,loc.longitude)
   
    if(!loc){
      wx.getLocation({
        type: 'wgs84',
        success (res) {
          console.log(res);
          wx.setStorageSync('location',{'latitude':res.latitude,'longitude': res.longitude})
          this.getCity(res.latitude,res.longitude)
        }
       })
    }else {
      this.getCity(loc.latitude,loc.longitude)
    }
},
// 获取省市区 
   getCity(latitude,longitude){
      qqmapsdk.reverseGeocoder({
        location: {
          latitude,
          longitude
        },
        success: function(res) {
          console.log(res,'打印');
          let obj = {
            province:res.result.address_component.province,
            city:res.result.address_component.city,
            area:res.result.address_component.district
          }
          wx.setStorageSync('address', obj)
        },
        fail(res) {
          console.log(res,'报错了')
        },
      })
   },

 

Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐