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

编程入门 行业动态 更新时间:2024-10-25 20:29:45

小程序<a href=https://www.elefans.com/category/jswz/34/1770718.html style=地图导航功能实现(勾起使用外部高德或者腾讯地图)"/>

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

原理就是:使用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: '' // 在查看位置界面底部显示的超链接,可点击跳转
});
}, 最后:

转载于:.html

更多推荐

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

本文发布于:2024-03-04 13:14:02,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1709359.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:地图   腾讯   功能   程序

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!