前言:
这是博主自己目前使用的方式,比较方便,直接调用,没有任何花里胡哨的操作,简约简单,基于官方文档的说明可以很清楚的知道如何调用腾讯地图的api
具体操作如下 :
先在腾讯地图开放文档中获取到官方给出的指定key
key名称可以自己定义,描述也是如此,不过建议规范,以免以后自己弄混,毕竟规范命名是很有好处的也是基础的行为
授权在微信小程序中使用/dev/console/key/add
这下面是腾讯地图开放文档中给出的设置key的链接
1.启用产品勾选就可以授权微信小程序的使用
2.带*号的app id 填写自己的小程序id(可以在微信小程序后台中查看)
3.勾选JavascriptAPI以及地图组件
4.因为微信小程序只支持类似于https这种网络安全协议,所以要勾选域名白名单
5.最后点击保存即刻
/dev/console/key/setting?key=VDEBZ-ICKLV-4QKPZ-URIGE-ULEMO-C7B7A
3.之后就可以在微信小程序中使用该地图插件
// 官方文档中给出的是在app.json中配置并引用该插件,但是博主是在使用该插件的页面中引用,更加方便,更改起来也快捷
// 在使用该插件的页面中的页面加载时也就是onLoad函数中调用
页面加载获取用户地理位置
// 腾讯地图api调用,逆地理获取用户所在位置(经纬度转地区)
// 引入SDK核心类 注意 : 在onLoad 函数中调用
var qqSDK = require(’…/…/utils/qqmap-wx-jssdk.min.js’)
// 实例化API核心类 注意 : 在onLoad 函数中调用
var qqMap = new qqSDK({
key: ‘VDEBZ-ICKLV-4QKPZ-URIGE-ULEMO-C7B7A’ //填写自己申请的key
});
var _this = this //重定义this指向 *
wx.getLocation({
success: function(res) {
var latitude = res.latitude
var longitude = res.longitude
qqMap.reverseGeocoder({
success: function(res) {
// 在success函数中内部使用this指向并不能指定data中的数据 除非使用箭头函数 原因: 箭头函数没有自己的this
var address = res.result.address_component.city; // 可不写 这里是开发需要
var undata = address.replace(“市”,’’) //可不写 这里是开发需要
_this.setData({ 热更新于data数据中使用 *
latitude: latitude,
longitude: longitude,
positionData: undata
});
console.log(res) //这里可以查看返回的数据
}
})
}
})
以上代码除了注释的地方需要注意,其他的可以一顿复制粘贴直接使用,完全没问题 需要更改哪些数据可以在res返回的数据中查看,并进行自己的开发需求来更改代码 以上代码写入到onLoad 函数中调用
以上文章就是调用腾讯地图进行定位的方法,如果这个文章对你有帮助,不妨点个赞,收藏一波,打赏一下