记第一次写小程序使用腾讯地图获取当前位置

第一次写小程序就要实现获取当前地址功能。原生小程序获取当前地址还要用到腾讯的位置服务。详情:戳这里。要跟着上面的要求来不然报的错让你崩溃。

记第一次写小程序使用腾讯地图获取当前位置_第1张图片

特别注意:要勾选webserviceAPI 。还有request合法域名。添加https://apis.map.qq.com

先把这个给开通

记第一次写小程序使用腾讯地图获取当前位置_第2张图片

 

再然后appid也要填写

记第一次写小程序使用腾讯地图获取当前位置_第3张图片

 

申请密钥成功后还要验证。你可以戳这里。就是你申请密钥的那个地址。但是刚申请的时候它不会提示让你验证绑定邮箱或手机号。是报错后你才知道。

 

准备完成后就可以写调微信小程序的api了

 

首先,要在入口文件的config中配置一个permission。我这边用react写的就是app.jsx.配置如下

"permission": {

"scope.userLocation": {

"desc": "你的位置信息将用于小程序位置接口的效果展示"

}

},

记第一次写小程序使用腾讯地图获取当前位置_第4张图片

然后就是获取经纬度。获取经纬度不是必须的。看你是否需要展示经纬度坐标。如果要展示。那么

wx.getLocation({

     type: 'gcj02',

     success (res) {

          const latitude = res.latitude

           const longitude = res.longitude

           This.setState({

               latitude: latitude,

               longitude: longitude,

          })

    }

})

最后获取实际地理位置

let qqmapsdk = new QQMapWX({

      key:'xxx-xxxxxx' //这个是你自己申请的秘钥是一大串。比如

})

qqmapsdk.reverseGeocoder({

  success (add) {

      This.setState({

          address:add.result.address

      })

},

fail: function(error) {//这个fail最好写出来,因为你觉得写的没错但是地址没出来的时候它会给你提醒。我就是这个没写,然后不知道哪里错了,搞了大半天。最后写出来发现是webserviceAPI在申请key的时候没勾。https://apis.map.qq.com这个也没配置。

    console.error(error);

},

})

 

以上。地址就出来了。

注意:一定要按照腾讯的位置服务要求的1234来。下载完微信小程序JavaScriptSDK直接放在你项目的根目录下就可以了。

慢慢记录,看着自己长大。偶吼吼。

你可能感兴趣的:(记第一次写小程序使用腾讯地图获取当前位置)