微信小程序中地图导航的使用,分高德导航和腾讯导航

本文介绍了微信小程序中使用腾讯导航和高德导航的方法。需申请相应平台的key,下载并加载sdk。文中给出了利用小程序地图maker点击方法获取目的地坐标实现步行导航的代码,还介绍了使用getLocation进行实时定位的实现方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

微信小程序中使用导航功能可食用高德导航和腾讯导航或者百度的导航,此文章主要介绍腾讯导航和高德导航。后面会贴出具体实现导航的代码。

地图基础使用map 标签,具体使用方法可参考微信的官方文档 https://developers.weixin.qq.com/miniprogram/dev/component/map.html

腾讯地图sdk:

http://3gimg.qq.com/lightmap/xcx/jssdk/qqmap-wx-jssdk1.2.zip

高德地图sdk:

https://a.amap.com/lbs/static/zip/AMapWX_SDK_V1.2.1.zip

需要申请相应平台的key,然后将下载好的sdk放到小程序中,在需要的地方加载进来:

在需要导航的小程序页面js文件的顶部引入

var QQMapWX = require('../../lib/qqmap-wx-jssdk.js');//引入腾讯地图sdk

var amapFile = require('../../lib/amap-wx.js');//引入高德地图sdk

然后利用小程序地图中maker 点击方法调用到相应的方法来获取目的地的坐标

例子是步行导航,可根据项目情况更改,具体实现方法如下:

/**

* 高德地图路线规划

*/

markclick1:function(res){

var that = this;

var id = res.markerId;

var zid = id - 1;

wx.showModal({

title: '温馨提示',

content: '是否立即前往,系统会为您导航,并规划路线',

cancelText: '暂时不去',

confirmText: '立即前往',

success: function (re) {

if (re.confirm == true) {

wx.showLoading({

title: '规划路线中,请稍后',

})

var myAmapFun = new amapFile.AMapWX({ key:'填写你申请的相应key值'});

myAmapFun.getWalkingRoute({

origin: that.data.long + ',' +that.data.lat,

destination: that.data.markers[zid].longitude + ',' + that.data.markers[zid].latitude ,

success: function (data) {

var points = [];

if (data.paths && data.paths[0] && data.paths[0].steps) {

var steps = data.paths[0].steps;

for (var i = 0; i < steps.length; i++) {

var poLen = steps[i].polyline.split(';');

for (var j = 0; j < poLen.length; j++) {

points.push({

longitude: parseFloat(poLen[j].split(',')[0]),

latitude: parseFloat(poLen[j].split(',')[1])

})

}

}

}

console.log(points)

that.setData({

polyline: [{

points: points,

color: "#0091ff",

width: 6

}]

});

}

wx.hideLoading();

that.shishi();

 

},

fail: function (info) {

wx.hideLoading();

if (info.infocode =='20803'){

wx.showModal({

title: '温馨提示',

content: '目的地超出步行距离',

showCancel: false

})

}else{

wx.showModal({

title: '温馨提示',

content: '路线规划失败',

showCancel: false

})

}

console.log(info)

}

})


 

}

}

})

},

markclick:function(res){

var that=this;

var id=res.markerId;

var zid=id-1;

wx.showModal({

title: '温馨提示',

content: '是否立即前往,系统会为您导航,并规划路线',

cancelText:'暂时不去',

confirmText:'立即前往',

success:function(re){

console.log(that.data.markers[zid])

if (re.confirm==true){

wx.showLoading({

title: '规划路线中,请稍后',

})

var qqmapwx=new QQMapWX({

key:'填写你申请的相应key值'

})

qqmapwx.direction({

mode:'walking',

from:{

latitude: that.data.lat,

longitude: that.data.long

},

to:{

latitude: that.data.markers[zid].latitude,

longitude: that.data.markers[zid].longitude

},

success:function(r){

console.log(r)

var ret = r;

var coors = ret.result.routes[0].polyline, pl = [];

var kr = 1000000;

for (var i = 2; i < coors.length; i++) {

coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;

}

for (var i = 0; i < coors.length; i += 2) {

pl.push({ latitude: coors[i], longitude: coors[i + 1] })

}

console.log(pl)

that.setData({

lat: pl[0].latitude,

long: pl[0].longitude,

polyline: [{

points: pl,

color: '#FF0000DD',

width: 4

}]

})

 

},

fail:function(r){

console.error(r)

if(r.message){

wx.showModal({

title: '温馨提示',

content: r.message,

showCancel:false

})

}

},

complete:function(){

wx.hideLoading();

}

})

}

}

})

},

 

然后是需要实时定位:

可利用小程序的getLocation  进行实时定位。具体实现方法如下:

//实时定位自己的位置 可根据项目需要调整实时获取位置坐标的时间

shishi:function(){

var that=this;

that.data.myloc=setInterval(function (){

wx.getLocation({

type: 'gcj02',

success: function (res) {

that.data.polyline[0]={

latitude: res.latitude,

longitude: res.longitude

}

console.log(that.data.polyline)

that.setData({

lat: res.latitude,

long: res.longitude

}

)

},})

},6000)

}

})

### 集成高德地图API至微信小程序 #### 准备工作 为了在微信小程序中集成使用高德地图API,需完成如下准备工作: - 成为高德开放平台的注册开发者,并申请获得开发者密钥(Key),这是访问API所必需的身份验证凭证[^2]。 - 小程序开发者应在后台设置中的开发管理部配置服务器域名,确保添加了高德地图API所需的合法请求域名到白名单内。这一步骤对于保障安全性合法性至关重要[^1]。 #### 下载与引入SDK 下载适用于微信小程序环境下的高德地图SDK并将其解压缩后放置于项目合适位置;接着,在项目的`app.json`文件里声明该插件以便后续调用其功能函数。 #### 实现定位服务 下面是一个简单的例子展示如何利用高德地图API来获取用户的当前位置信息: ```javascript const app = getApp(); const AMapWX = require('./libs/amap-wx.js'); Page({ data: { address: '' }, getLocation() { let myAmapFun = new AMapWX({ key: 'your_amap_key' }); myAmapFun.getRegeo({ success: (data) => { if(data[0]) { this.setData({ address: data[0].regeocodeData.formatted_address || '' }); } }, fail: function(info){ console.error('失败', info); } }) } }) ``` 此代码片段展示了当用户点击按钮触发事件处理器时,会向高德地图发起地理编码逆解析请求以取得详细的地理位置描述,并更新页面上的显示内容[^4]。 #### 构建导航界面 创建一个用于启动路径规划的服务接口,允许输入起点终点坐标参数从而返回推荐路线方案给前端渲染呈现出来。具体实现方式取决于业务逻辑需求以及UI设计考量因素。 #### 处理跨域问题 如果遇到因未被列入合法域名而导致无法正常发送HTTP请求的情况,则应当按照官方指引调整相应的小程序配置项,保证目标URL处于许可范围内[^5]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王福旭

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值