E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

最近在做一个项目,需要开发大家在手机上经常用到的地图导航,主要实现功能有三点:一、在地址旁加一个按钮可以点击拉起微信内置地图二、点击地图内的导航按钮可以跳转到想要的地图软件进行操作,如:高德、腾讯、苹果内置其实第二步,微信已经全部封装好了,不需要我们多去操心。我们只需要做好如下几点就可以了:一、使用小程序内置方法拉起微信内置地图二、使用腾讯的微信小程序 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中传过来的地址名称        })    }})最终的拉起外部地图软件的方法,微信小程序已经内置好了,不需要我们做过多的操作。到这里,关于拉起外部导航的所有开发步骤、代码以及一些需要注意的地方和相关的设置都已经讲述完毕,如果哪里有疑问,或者我的代码哪里写的有问题,欢迎在评论中留言指正,咱们互相探讨。上述所有代码中涉及到的方法,如果有参数不知道是干什么的,或者想要让功能更加健壮,可以参考如下两个文档:微信小程序开发文档 ——   位置 => wx.openLocation腾讯地图 微信小程序 JavaScript SDK 开发文档

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序采坑记录微信小程序如何开发常见的拉起外部地图软件进行导航的功能
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏