引言:实现微信小程序调用外部地图APP,类似微信聊天,打开别人发送的位置,然后自动识别当前手机中已有的地图APP,效果如下图所示:
此功能,主要在js上做处理:
微信小程序引用腾讯地图sdk,首先需要完成以下步骤:
1. 申请开发者密钥(key):https://lbs.qq.com/console/key.html
2. 开通webserviceAPI服务:控制台 -> key管理 -> 设置(使用该功能的key)-> 勾选webserviceAPI -> 保存
(小程序SDK需要用到webserviceAPI的部分服务,所以使用该功能的KEY需要具备相应的权限)
3. 下载微信小程序JavaScriptSDK,https://download.csdn.net/download/mythinternet/11435175
4. 安全域名设置,在“设置” -> “开发设置”中设置request合法域名,添加https://apis.map.qq.com
下面是微信小程序.js代码:
//1.引入腾讯地图mapSdk
const QQMapWX = require('qqmap-wx-jssdk.min.js');
//2.定义全局qqmapsdk变量;
let qqmapsdk;
Page({
/**
* 页面的初始数据
*/
data: {
nearbyMap:null
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
this.getLocation(); //位置授权; 必须要启用位置授权功能,否则无法实现下一步
},
/**
*@method: 获取位置授权
*/
getLocation() {
wx.authorize({
scope: 'scope.userLocation',
success: res => {
console.log(res)
},
fail: fres => {
let arr = {
title: "",
cont: '检测到您没打开定位权限,是否去设置打开?'
}
showConfirm(arr, res => {
if (res.confirm) {
wx.openSetting({
success: (res) => {}
})
} else {
console.log('取消获取授权')
}
})
}
})
},
// 跳转至详情页面
toNavDs(event){
wx.showLoading({
title: '加载中',
})
let lon = '经度',lat = '纬度'; //此处经纬度是你的目标位置,进入微信预览页面展示;
const adds = '详细地址'; //此处是你目标位置的详细地址,微信预览页面展示;
// 使用 JavaScript SDK 获取目的地经纬度
// 实例化API核心类
qqmapsdk = new QQMapWX({
key: 'YDVBZ-***********' //key值是腾讯地图开发者平台自动生成,需要自己去注册账户
});
qqmapsdk.geocoder({ // 腾讯地图sdk方法照着用
address: adds, //预览页详细地址展示
success:res=> {
if(res.status == 0){
setTimeout(function () {
wx.hideLoading()
}, 500)
let local = res.result.location;
this.setData({
latitude: lat, //纬度
longitude: lon //经度
})
}
}
})
// 使用微信内置地图查看位置
wx.getLocation({
type: 'gcj02', //返回可以用于wx.openLocation的经纬度
success:res=> {
wx.openLocation({
longitude: JSON.parse(longitudeAndLatitude[0]),
latitude: JSON.parse(longitudeAndLatitude[1]),
scale: 13,
name: '[位置]', //打开后显示的标题名称;
address: adds //预览地图展示详细地址;
})
}
})
}
})