• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

小程序地图导航功能实现(勾起使用外部高德或者腾讯地图) ...

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

原理就是:使用sdk 解析地址成经纬,再唤起小程序地图解析,然后通过这个选择使用外部的地图软件。

首先使用:先去下载腾讯地图sdk,将其引用。

第一步:

var QQMapWX = require(\'../../map/qqmap-wx-jssdk.min.js\');
const wxMap = new QQMapWX({
key: \'*********\' // 必填
});
 
 
第二步:解析地址
 
//解析地址为经纬
detaiAddress: function (e) {
var that = this;
wxMap.geocoder({
//获取表单传入地址
address: \'广州大舜丽池国际酒店\', //地址参数,例:固定地址,address: \'北京市海淀区彩和坊路海淀西大街74号\'
success: function (res) { //成功后的回调
console.log(res);
var res = res.result;
var latitude = res.location.lat;
var longitude = res.location.lng;
that.data.returnDetail = res.title;
that.lunchMap(latitude, longitude); //唤起地图
},
fail: function (error) {
console.error(error);
},
complete: function (res) {
console.log(res);
}
})
},
 
第三步,唤起小程序内置地图
//唤起地图
lunchMap: function (latitude, longitude) {
var that = this;
wx.openLocation({
latitude: latitude, // 纬度,浮点数,范围为90 ~ -90

longitude: longitude, // 经度,浮点数,范围为180 ~ -180。

name: \'大舜丽池国际酒店\', // 地图上显示的位置名

address: \'\', // 地址详情说明

scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大

infoUrl: \'\' // 在查看位置界面底部显示的超链接,可点击跳转

});

},
最后:
 

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
uni-app&微信小程序图片组件的等比例缩放和自适应裁切显示 ...发布时间:2022-07-18
下一篇:
python一个小程序:猜数字发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap