目前在做的小程序需要使用到map组件以及小程序个性地图,涉及到的功能如下:
1# 获取用户当前位置,返回对应的省市区
2# 根据目的地的具体地址,显示在地图中的位置
3# 根据用户当前位置,计算出 与 接口返回的目的地数组中每条地址的相距距离
以下是具体实现过程:
1:申请开通个性化地图能力
个性化地图能力可在小程序后台“设置-开发者工具-腾讯位置服务”申请开通
对应的小程序后台的截图(已申请成功):
2:申请开发者key及所需腾讯位置服务相关产品
微信小程序LBS解决方案地址:https://lbs.qq.com/product/miniapp/home/index.html
2.1 申请申请开发者key(https://lbs.qq.com/console/key.html)
以下填写数据仅为演示,开发时请按照相关规范填写!
创建成功后,就会看到key:
点击【进入:key设置】按钮,就会进入选择启用产品页面
这里需要注意两点:
1:确认自己需要那启用哪些API,可根据 微信小程序JavaScript SDK https://lbs.qq.com/qqmap_wx_jssdk/index.html 自行查看
2: 安全域名设置,在“设置” -> “开发设置”中设置request合法域名,添加https://apis.map.qq.com
3:需求功能实现
3.1 :获取用户当前位置,返回对应的省市区
思路:通过wx.getLocation获取用户当前的经纬度,然后通过逆地址解析(坐标位置描述),从而获取所在位置的文字描述
逆地址解析(坐标位置描述)Api : https://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.html
let QQMapWX = require('../../../vendors/qqmap-wx-jssdk.min.js'); let qqmapsdk; Page({ data: { receiver: '', area: '' }, onLoad: function() { // 实例化API核心类 qqmapsdk = new QQMapWX({ key: 'B65BZ-V4GCD-****-****-ZGFR2-M4BGY' }); }, getLocation() { let self = this; wx.showLoading({ title: '正在获取,请稍后...', mask: true, }); wx.getLocation({ type: 'gcj02', success(res) { //逆地址解析 self.getReverseGeo(res.latitude, res.longitude) }, fail() { wx.showToast({ title: '获取位置信息失败,请稍后再试', icon: 'none', duration: 1500, mask: true }) } }) }, getReverseGeo(latitude, longitude) { let self = this; let addressComponent = ''; //本接口提供由坐标到坐标所在位置的文字描述的转换,输入坐标返回地理位置信息和附近poi列表。 //api:https://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.html qqmapsdk.reverseGeocoder({ location: { latitude: latitude, longitude: longitude }, get_poi: 1, //是否返回周边POI列表:1.返回;0不返回(默认),非必须参数 success: function(res) { let adInfoName = res.result.ad_info.name.split(',').join(''); wx.showToast({ title: '获取成功', icon: 'success', duration: 1000, mask: true }) self.setData({ area: adInfoName }) }, fail: function(error) { console.error(error); wx.showToast({ title: '获取位置信息失败,请稍后再试', icon: 'none', duration: 1500, mask: true }) }, complete: function() { wx.hideLoading(); } }) } })