高德地图小程序步行路线显示_微信小程序高德地图路线规划实现过程详解

前言

最近项目中做到相关网约车小程序。需要使用到地图中的路线规划&＃xff0c;对3种地图进行了分析。这里稍微做一下总结&＃xff1a;

百度地图 百度坐标 (BD-09)

腾讯地图 火星坐标(GCJ-02)

高德地图 火星坐标(GCJ-02)

微信小程序中使用的是腾讯地图作为底图。因此如果使用百度地图时&＃xff0c;需要注意坐标的转换。此类坐标的转换函数在网上都有&＃xff0c;这里不做过多解释

准备工作&＃xff1a;

1、在做小程序 ---- 路线规划之前&＃xff0c;需要准备小程序APPID 以及相应使用地图的KEY值。

2、微信小程序API 之 位置 API wx.getLocation(OBJECT)、wx.chooseLocation(OBJECT)、wx.openLocation(OBJECT)的相应用法&＃xff1a;https://www.gxlcms.com/article/166968.htm

各地图平台-------小程序开发的官方文档

1、高德地图&＃xff1a; 微信小程序-路线规划,地图导航功能基于高德地图API官方文档 https://lbs.amap.com/api/wx/guide/route/route

2、百度地图&＃xff1a;　微信小程序Javascript API ----- http://lbsyun.baidu.com/index.php?title&＃61;wxjsapi (百度地图路线规划适用于&＃xff1a;android / ios / web,故不适用&＃xff0c;排除百度地图)

3、腾讯地图&＃xff1a;　微信小程序Javascript SDK 路线规划 --------- https://lbs.qq.com/qqmap_wx_jssdk/method-direction.html

因此使用高德地图和腾讯地图都可以进行路线规划&＃xff0c;通过学习官方文档&＃xff0c;了解到其实这两个平台的代码思路是一样的&＃xff0c;以下以高德地图为例作详细的说明&＃xff1a;

高德地图-路线规划开发&＃xff1a;根据官方文档demo进行开发 &＃xff1a;https://lbs.amap.com/api/wx/guide/route/route

注意&＃xff1a;数组数据在setData时候的使用方法

var markesName &＃61; "markers[" &＃43; 0 &＃43; "].name";

that.setData({

[markesName]: name,

})

注意需要先加载头部的相关文件

var amapFile &＃61; require(&＃39;../../libs/amap-wx.js&＃39;);

var config &＃61; require(&＃39;../../libs/config.js&＃39;);

文件config.js

var config &＃61; {

key: &＃39;1***********************&＃39;

}

module.exports.Config &＃61; config;

效果图&＃xff1a;

相关代码&＃xff1a;

location.js

var amapFile &＃61; require(&＃39;../../libs/amap-wx.js&＃39;);

var config &＃61; require(&＃39;../../libs/config.js&＃39;);

const app &＃61; getApp()

Page({

/**

* 页面的初始数据

*/

data: {

markers: [{

iconPath: "../../img/mapicon_navi_s.png",

id: 0,

latitude: 39.989643,

longitude: 116.481028,

width: 23,

height: 33

}, {

iconPath: "../../img/mapicon_navi_e.png",

id: 0,

latitude: 39.90816,

longitude: 116.434446,

width: 24,

height: 34

}],

distance: &＃39;&＃39;,

cost: &＃39;&＃39;,

state: 0,

polyline: []

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function(options) {

console.log(11);

var that &＃61; this

wx.showLoading({

title: "定位中",

mask: true

})

wx.getLocation({

type: &＃39;gcj02&＃39;,

altitude: true, //高精度定位

success: function(res) {

console.info(res);

var latitude &＃61; res.latitude

var longitude &＃61; res.longitude

var speed &＃61; res.speed

var accuracy &＃61; res.accuracy

that.setData({

markers: [{

name: &＃39;当前位置&＃39;,

latitude: latitude,

longitude: longitude

}, {

name: &＃39;您要去哪儿?&＃39;,

latitude: &＃39;&＃39;,

longitude: &＃39;&＃39;

}]

})

},

fail: function() {

wx.showToast({

title: "定位失败",

icon: "none"

})

},

complete: function() {

wx.hideLoading()

}

})

},

getFormAddress: function() {

var that &＃61; this;

wx.chooseLocation({

success: function(res) {

console.log(res);

var name &＃61; res.name

var address &＃61; res.address

var latitude &＃61; res.latitude

var longitude &＃61; res.longitude

var markesName &＃61; "markers[" &＃43; 0 &＃43; "].name";

var markesLatitude &＃61; "markers[" &＃43; 0 &＃43; "].latitude";

var markeslongitude &＃61; "markers[" &＃43; 0 &＃43; "].longitude";

var markesiconPath &＃61; "markers[" &＃43; 0 &＃43; "].iconPath";

that.setData({

[markesName]: name,

[markesLatitude]: latitude,

[markeslongitude]: longitude,

[markesiconPath]: "../../img/mapicon_navi_s.png"

})

console.log(&＃39;address1&＃39;, that.data);

},

fail: function() {

wx.showToast({

title: &＃39;定位失败&＃39;,

icon: "none"

})

},

complete: function() {

//隐藏定位中信息进度

wx.hideLoading()

}

})

},

getToAddress: function() {

var that &＃61; this;

wx.chooseLocation({

success: function(res) {

console.log(res);

var name &＃61; res.name

var address &＃61; res.address

var latitude &＃61; res.latitude

var longitude &＃61; res.longitude

var markesName &＃61; "markers[" &＃43; 1 &＃43; "].name";

var markesLatitude &＃61; "markers[" &＃43; 1 &＃43; "].latitude";

var markeslongitude &＃61; "markers[" &＃43; 1 &＃43; "].longitude";

var markesiconPath &＃61; "markers[" &＃43; 1 &＃43; "].iconPath";

that.setData({

[markesName]: name,

[markesLatitude]: latitude,

[markeslongitude]: longitude,

[markesiconPath]: "../../img/mapicon_navi_e.png"

})

console.log(&＃39;address1&＃39;, that.data);

},

fail: function() {

wx.showToast({

title: &＃39;定位失败&＃39;,

icon: "none"

})

},

complete: function() {

//隐藏定位中信息进度

wx.hideLoading()

}

})

},

/**

* 确定

*/

getSure: function() {

var that &＃61; this;

var origin &＃61; that.data.markers[0].longitude &＃43; &＃39;,&＃39; &＃43; that.data.markers[0].latitude;

var destination &＃61; that.data.markers[1].longitude &＃43; &＃39;,&＃39; &＃43; that.data.markers[1].latitude;

app.origin &＃61; origin;

app.destination &＃61; destination;

console.log(&＃39;origin&＃39;, origin);

console.log(&＃39;destination&＃39;, destination);

var key &＃61; config.Config.key;

var myAmapFun &＃61; new amapFile.AMapWX({

key: key

});

myAmapFun.getDrivingRoute({

origin: origin,

destination: destination,

// origin: &＃39;116.481028,39.989643&＃39;,

// destination: &＃39;116.434446,39.90816&＃39;,

success: function(data) {

var points &＃61; [];

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

var steps &＃61; data.paths[0].steps;

for (var i &＃61; 0; i

var poLen &＃61; steps[i].polyline.split(&＃39;;&＃39;);

for (var j &＃61; 0; j

points.push({

longitude: parseFloat(poLen[j].split(&＃39;,&＃39;)[0]),

latitude: parseFloat(poLen[j].split(&＃39;,&＃39;)[1])

})

}

}

}

that.setData({

state: 1,

polyline: [{

points: points,

color: "#0091ff",

width: 6

}]

});

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

that.setData({

distance: data.paths[0].distance &＃43; &＃39;米&＃39;

});

}

if (data.taxi_cost) {

that.setData({

cost: &＃39;打车约&＃39; &＃43; parseInt(data.taxi_cost) &＃43; &＃39;元&＃39;

});

}

console.log(&＃39;that&＃39;, that);

}

})

},

/**

* 详情页

*/

goDetail: function() {

var that &＃61; this;

wx.navigateTo({

url: &＃39;../detail/detail&＃39;

})

}

})

location.wxml

出发地&＃xff1a;

目的地&＃xff1a;

确定

{{distance}}

{{cost}}

详情

location.wxss

.flex-style{

display: -webkit-box;

display: -webkit-flex;

display: flex;

}

.flex-item{

height: 35px;

line-height: 35px;

text-align: center;

-webkit-box-flex: 1;

-webkit-flex: 1;

flex: 1

}

.flex-item.active{

color:#0091ff;

}

.map_title{

position:absolute;

top: 10px;

bottom: 110px;

left: 0px;

right: 0px;

}

.map_btn{

position:absolute;

top: 120px;

bottom: 220px;

left: 0px;

right: 0px;

}

.map_box{

position:absolute;

top: 160px;

bottom: 90px;

left: 0px;

right: 0px;

}

#navi_map{

width: 100%;

height: 100%;

}

.text_box{

position:absolute;

height: 90px;

bottom: 0px;

left: 0px;

right: 0px;

}

.text_box .text{

margin: 15px;

}

.detail_button{

position:absolute;

bottom: 30px;

right: 10px;

padding: 3px 5px;

color: #fff;

background: #0091ff;

width:50px;

text-align:center;

border-radius:5px;

}

点击详情跳转页&＃xff0c;显示导航详细说明&＃xff1a;

detail.js

var amapFile &＃61; require(&＃39;../../libs/amap-wx.js&＃39;);

var config &＃61; require(&＃39;../../libs/config.js&＃39;);

const app &＃61; getApp()

Page({

data: {

steps: {}

},

onLoad: function () {

var that &＃61; this;

var key &＃61; config.Config.key;

var myAmapFun &＃61; new amapFile.AMapWX({ key: key });

myAmapFun.getDrivingRoute({

origin: app.origin,

destination: app.destination,

success: function (data) {

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

that.setData({

steps: data.paths[0].steps

});

}

},

fail: function (info) {

}

})

}

})

detail.wxml

{{i.instruction}}

这只是个人的一个demo用例。仅做参考。其中还有很多瑕疵&＃xff0c;不要介意哈。

以上就是本文的全部内容&＃xff0c;希望对大家的学习有所帮助&＃xff0c;也希望大家多多支持脚本之家。

本条技术文章来源于互联网&＃xff0c;如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源&＃xff1a;php中文网