微信小程序采坑记录微信小程序如何开发常见的拉起外部地图软件进行导航的功能-即速应用

最近在做一个项目，需要开发大家在手机上经常用到的地图导航，主要实现功能有三点：
一、在地址旁加一个按钮可以点击拉起微信内置地图
二、点击地图内的导航按钮可以跳转到想要的地图软件进行操作，如：高德、腾讯、苹果内置

其实第二步，微信已经全部封装好了，不需要我们多去操心。我们只需要做好如下几点就可以了：

一、使用小程序内置方法拉起微信内置地图
二、使用腾讯的微信小程序 JavaScript SDK 进行地址名称 ==> 经纬度的转换
三、使用微信内置API传递获取到的坐标值，使拉起导航能够正常使用

小程序

具体实现之后的效果如下所示：

小程序

代码如下所示：

WXML

<image src="{{imgCommon}}addr.png" class="addr-image" bindtap="mapNavigation" data-addr="{{classdata.address}}"></image>

其中 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中传过来的地址名称        })    }})