微信小程序踩坑记录 ------- 微信小程序如何开发常见的拉起外部地图软件进行导航的功能
最近在做一个项目，需要开发大家在手机上经常用到的地图导航，主要实现功能有三点：
一、在地址旁加一个按钮可以点击拉起微信内置地图
二、点击地图内的导航按钮可以跳转到想要的地图软件进行操作，如：高德、腾讯、苹果内置
其实第二步，微信已经全部封装好了，不需要我们多去操心。我们只需要做好如下几点就可以了：
一、使用小程序内置方法拉起微信内置地图
二、使用腾讯的微信小程序 JavaScript SDK 进行地址名称 ==> 经纬度 的转换
三、使用微信内置API传递获取到的坐标值，使拉起导航能够正常使用
具体实现之后的效果如下所示：
代码如下所示：
WXML
其中 bindtap 中设置的是点击之后js中的方法名，这个大家都知道；重点是 data-addr 中的参数，这个参数的值是我们最终想要导航到的地址名，比如 北京市海淀区清河五彩城，我这里的代码这个必须设置，不然我们最终实现的效果会出现，导航没有目的地。那这导航做的就没有意义了。
js
// 引入SDK核心类
var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js')
var qqmapsdk;
page({data: {}// 点击按钮触发方法mapNavigation: function (e) {console.log(e.target.dataset.addr);var addr = e.target.dataset.addr;var that = this;// 使用 JavaScript SDK 获取目的地经纬度// 实例化API核心类qqmapsdk = new QQMapWX({key: '申请的腾讯地图key值'});qqmapsdk.geocoder({address: addr,success: function (res) {console.log(res);var local = res.result.location;that.setData({latitude: local.lat,longitude: local.lng})}})// 使用微信内置地图查看位置wx.getLocation({type: 'gcj02', //返回可以用于wx.openLocation的经纬度success: function (res) {wx.openLocation({latitude: that.data.latitude,longitude: that.data.longitude,scale: 28,name: addr, //打开后显示的地址名称})}})},
})
上面的是js的整体代码，为了能够更方便的讲解各个方法，我在这里将所有方法，都拆解开来，没有进行嵌套，看上去还是蛮简单易懂的。
下面我一一介绍代码的功能以及需要注意的事项。
1、引入腾讯地图的 微信小程序 JavaScript SDK
// 引入SDK核心类
var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js')
var qqmapsdk;
这里我们想要调用 SDK，需要进行如下操作：
- 下载微信小程序 JavaScriptSDK 文件，这里我直接给一个官方的下载直通车 微信小程序JavaScriptSDK v1.0
- 进入小程序的后台，在“设置” -> “开发设置”中设置 request 合法域名，添加腾讯地图的https://apis.map.qq.com 这个域名， 点击 小程序登录窗口 输入自己正在开发相关功能的小程序账密，进行相关设置。
2、获取从WXML中传过来的导航终点地址，并使用第一步引入的SDK获取到相应的经纬度
var addr = e.target.dataset.addr; //获取目的地 地址名
var that = this;
// 实例化API核心类
qqmapsdk = new QQMapWX({key: '申请的腾讯地图key值'
});
// 使用 JavaScript SDK 获取目的地经纬度
qqmapsdk.geocoder({address: addr,success: function (res) {console.log(res);var local = res.result.location;that.setData({latitude: local.lat,longitude: local.lng})}
})
这一段代码想要能够正常运行，需要进行如下操作：
- 申请腾讯地图的开发者秘钥（key），可以点击 申请腾讯地图开发者密钥，直接跳转到相应页面。
3、使用小程序的内置 API 进行内置地图展示及参数传递，使后续拉起的导航能够正常使用
// 使用微信内置地图查看位置
wx.getLocation({type: 'gcj02', //返回可以用于wx.openLocation的经纬度success: function (res) {wx.openLocation({// 上述方法 2 中获取到的经纬度latitude: that.data.latitude,longitude: that.data.longitude,scale: 28,name: addr, // 打开后显示的从WXML中传过来的地址名称})}
})
最终的拉起外部地图软件的方法，微信小程序已经内置好了，不需要我们做过多的操作。到这里，关于拉起外部导航的所有开发步骤、代码以及一些需要注意的地方和相关的设置都已经讲述完毕，如果哪里有疑问，或者我的代码哪里写的有问题，欢迎在评论中留言指正，咱们互相探讨。
上述所有代码中涉及到的方法，如果有参数不知道是干什么的，或者想要让功能更加健壮，可以参考如下两个文档：
微信小程序开发文档 —— 位置 => wx.openLocation
腾讯地图 微信小程序 JavaScript SDK 开发文档
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！