ps:这里只说腾讯地图。
一、微信小程序将经纬度转成具体地址
1.首先,小程序里wx.getLocation可以获取用户当前的经纬度,即
wx.getLocation({
type: 'wgs84',
success (res) {
console.log(res)
const latitude = res.latitude
const longitude = res.longitude
const speed = res.speed
const accuracy = res.accuracy
}
})
在控制台打印:
2.访问https://lbs.qq.com/qqmap_wx_jssdk/index.html(腾讯地图服务),完成前三步操作:
(点进上面的链接里就可以看到图中所示的操作步骤)
申请完key和配置了request合法域名之后(配置的是服务域名,不是安全域名),将第二步下载的 微信小程序JavaScriptSDK 中的qqmap-wx-jssdk.min.js(没压缩的那个js文件也行)文件复制到小程序的utils文件夹下。
3.将经纬度转成具体地址,即逆地址解析:
// 引入SDK核心类
var QQMapWX = require('utils/qqmap-wx-jssdk.min.js');
// 实例化API核心类
var demo = new QQMapWX({
key: '你第一步申请的key' // 必填
});
// 地理位置
wx.getLocation({
type: 'wgs84',
success(res) {
console.log(res)
const latitude = res.latitude
const longitude = res.longitude
const speed = res.speed
const accuracy = res.accuracy
// 调用接口转换成具体位置
demo.reverseGeocoder({
location: {
latitude: res.latitude,
longitude: res.longitude
},
success: function (res) {
console.log(res.result);
},
fail: function (res) {
console.log(res);
},
// complete: function (res) {
// console.log(res);
// }
})
}
})
打印出的结果为:
这里需要注意的点:
1.申请key的时候,一定要把WebServiceAPI勾上,默认的第一个选项(域名白名单)就行,下面不用填网址。不勾选这个会报错。
2.https://apis.map.qq.com在小程序后台添为服务域名,不是安全域名。
二、小程序内置地图导航(打开地图app)
我要实现的效果是点击图中的地址,会自动跳转到导航:
(之前实现思路:把地图组件定位在这行字上面,然后透明度设为0(opacity:0;),这样子点击这个地址的时候就会跳转到地图导航页面。(呸,在真机上设置透明度根本不行。)
其实地图组件的那个点击事件写在任何view上都是有效的,所以map组件的display:none;,点击事件写在地址的view就行,点击之后一样可以跳到导航(不知道我说清楚了没有)。
wxml文件(经纬度是当前的):
<map id="map" longitude="117.135437" latitude="39.22393" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 100%;opacity:0;" bindtap="toMap"></map>
js文件(经纬度是目的地的):
// 点击地图
toMap: function (e) {
wx.openLocation({
latitude: 23.362490,
longitude: 116.715790,
scale: 18,
name: '华乾大厦',
address: '金平区长平路93号'
})
},
点击之后:点击图中右下角的“去这里”(只能在真机):
即可以选择地图,会打开手机上的app,如果没有安装会跳转到下载app。点街景也是很好玩的。
(最后这张图是手机截屏,我也不知道为什么这么大,吓我一跳。)
主要还是参考官方文档和前辈们写好的,自己做完之后总结一下,方便下次用的时候查找。