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

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

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

一、使用小程序内置方法拉起微信内置地图
二、使用腾讯的微信小程序 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 开发文档