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

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

地图基础使用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)

}

})

发布了7 篇原创文章 · 获赞 3 · 访问量 1万+
展开阅读全文

微信小程序之高德地图API路线规划

09-21

#wxml代码# ``` <view class="flex-style"> <view class="flex-item active" bindtouchstart="goToCar">驾车</view> <view class="flex-item" bindtouchstart="goToWalk">步行</view> <view class="flex-item" bindtouchstart="goToBus">公交</view> <view class="flex-item" bindtouchstart="goToRide">骑行</view> </view> <view class="map_box"> <map id="navi_map" longitude="{{longitude}}" latitude="{{latitude}}" scale="12" markers="{{markers}}" polyline="{{polyline}}" show-location="true"></map> </view> <view class="text_box"> <view class="text">{{distance}}</view> <view class="text">{{cost}}</view> <view class="detail_button" bindtouchstart="goDetail">详情</view> </view> ``` #js代码# ``` var amapFile = require('../../utils/amap-wx.js'); var config = require('../../utils/config.js'); Page({ data: { markers: [{ iconPath: "../../img/mapicon_navi_s.png", id: 0, latitude:'', longitude:'', width: 23, height: 33 },{ iconPath: "../../img/mapicon_navi_e.png", id: 0, latitude:'', longitude:'', width: 24, height: 34 }], distance: '', cost: '', polyline: [] }, onLoad: function() { var that = this; var key = config.Config.key; var myAmapFun = new amapFile.AMapWX({key: key}); myAmapFun.getDrivingRoute({ success: function(data){ origin: data[0].longitude,data[0].latitude; destination: data[1].longitude,data[1].latitude; var marker = [{ latitude: data[0].latitude, longitude: data[0].longitude }, { latitude: data[1].latitude, longitude: data[1].longitude } ] that.setData({ markers: marker[0], latitude: data[0].latitude, longitude: data[0].longitude }); that.setData({ markers: marker[1], latitude: data[1].latitude, longitude: data[1].longitude }); 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]) }) } } } that.setData({ polyline: [{ points: points, color: "#0091ff", width: 6 }] }); if(data.paths[0] && data.paths[0].distance){ that.setData({ distance: data.paths[0].distance + '米' }); } if(data.taxi_cost){ that.setData({ cost: '打车约' + parseInt(data.taxi_cost) + '元' }); } } }) }, goDetail: function(){ wx.navigateTo({ url: '../navigation_car_detail/navigation' }) }, goToCar: function (e) { wx.redirectTo({ url: '../navigation_car/navigation' }) }, goToBus: function (e) { wx.redirectTo({ url: '../navigation_bus/navigation' }) }, goToRide: function (e) { wx.redirectTo({ url: '../navigation_ride/navigation' }) }, goToWalk: function (e) { wx.redirectTo({ url: '../navigation_walk/navigation' }) } }) ``` 怎么改才能让marker的两个标记变成活的经纬度,原来的高德地图API是两个写死的经纬度,[高德路线规划](http://lbs.amap.com/api/wx/guide/route/route),现在这个样子是我自己改的,摸索了微信小程序3天了,还不太懂,希望有大神能不吝赐教!! 问答

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

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览