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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zx562602419/article/details/81430232

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

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

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

这一段代码想要能够正常运行,需要进行如下操作:

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 开发文档

没有更多推荐了,返回首页