微信小程序 高德地圖路線規(guī)劃實(shí)現(xiàn)過程詳解
更新時(shí)間：2019年08月05日 16:18:30 作者：誠享人生
這篇文章主要介紹了微信小程序 路線規(guī)劃實(shí)現(xiàn)過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
前言
最近項(xiàng)目中做到相關(guān)網(wǎng)約車小程序。需要使用到地圖中的路線規(guī)劃，對(duì)3種地圖進(jìn)行了分析。這里稍微做一下總結(jié)：
- 百度地圖 百度坐標(biāo) （BD-09）
- 騰訊地圖 火星坐標(biāo)(GCJ-02)
- 高德地圖 火星坐標(biāo)(GCJ-02)
微信小程序中使用的是騰訊地圖作為底圖。因此如果使用百度地圖時(shí)，需要注意坐標(biāo)的轉(zhuǎn)換。此類坐標(biāo)的轉(zhuǎn)換函數(shù)在網(wǎng)上都有，這里不做過多解釋
準(zhǔn)備工作：
1、在做小程序 ---- 路線規(guī)劃之前，需要準(zhǔn)備小程序APPID 以及相應(yīng)使用地圖的KEY值。
2、微信小程序API 之 位置 API wx.getLocation(OBJECT)、wx.chooseLocation(OBJECT)、wx.openLocation(OBJECT)的相應(yīng)用法：http://m.fzitv.net/article/166968.htm
各地圖平臺(tái)-------小程序開發(fā)的官方文檔
1、高德地圖： 微信小程序-路線規(guī)劃,地圖導(dǎo)航功能基于高德地圖API官方文檔 https://lbs.amap.com/api/wx/guide/route/route
2、百度地圖： 微信小程序JavaScript API ----- http://lbsyun.baidu.com/index.php?title=wxjsapi （百度地圖路線規(guī)劃適用于：android / ios / web,故不適用，排除百度地圖）
3、騰訊地圖： 微信小程序JavaScript SDK 路線規(guī)劃 --------- https://lbs.qq.com/qqmap_wx_jssdk/method-direction.html
因此使用高德地圖和騰訊地圖都可以進(jìn)行路線規(guī)劃，通過學(xué)習(xí)官方文檔，了解到其實(shí)這兩個(gè)平臺(tái)的代碼思路是一樣的，以下以高德地圖為例作詳細(xì)的說明：
高德地圖-路線規(guī)劃開發(fā)：根據(jù)官方文檔demo進(jìn)行開發(fā) ：https://lbs.amap.com/api/wx/guide/route/route
注意：數(shù)組數(shù)據(jù)在setData時(shí)候的使用方法
var markesName = "markers[" + 0 + "].name";
that.setData({
[markesName]: name,
})
注意需要先加載頭部的相關(guān)文件
var amapFile = require('../../libs/amap-wx.js');
var config = require('../../libs/config.js');
文件config.js
var config = {
key: '1***********************'
}
module.exports.Config = config;
效果圖：
相關(guān)代碼：
location.js
var amapFile = require('../../libs/amap-wx.js');
var config = require('../../libs/config.js');
const app = getApp()
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
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: '',
cost: '',
state: 0,
polyline: []
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function(options) {
console.log(11);
var that = this
wx.showLoading({
title: "定位中",
mask: true
})
wx.getLocation({
type: 'gcj02',
altitude: true, //高精度定位
success: function(res) {
console.info(res);
var latitude = res.latitude
var longitude = res.longitude
var speed = res.speed
var accuracy = res.accuracy
that.setData({
markers: [{
name: '當(dāng)前位置',
latitude: latitude,
longitude: longitude
}, {
name: '您要去哪兒?',
latitude: '',
longitude: ''
}]
})
},
fail: function() {
wx.showToast({
title: "定位失敗",
icon: "none"
})
},
complete: function() {
wx.hideLoading()
}
})
},
getFormAddress: function() {
var that = this;
wx.chooseLocation({
success: function(res) {
console.log(res);
var name = res.name
var address = res.address
var latitude = res.latitude
var longitude = res.longitude
var markesName = "markers[" + 0 + "].name";
var markesLatitude = "markers[" + 0 + "].latitude";
var markeslongitude = "markers[" + 0 + "].longitude";
var markesiconPath = "markers[" + 0 + "].iconPath";
that.setData({
[markesName]: name,
[markesLatitude]: latitude,
[markeslongitude]: longitude,
[markesiconPath]: "../../img/mapicon_navi_s.png"
})
console.log('address1', that.data);
},
fail: function() {
wx.showToast({
title: '定位失敗',
icon: "none"
})
},
complete: function() {
//隱藏定位中信息進(jìn)度
wx.hideLoading()
}
})
},
getToAddress: function() {
var that = this;
wx.chooseLocation({
success: function(res) {
console.log(res);
var name = res.name
var address = res.address
var latitude = res.latitude
var longitude = res.longitude
var markesName = "markers[" + 1 + "].name";
var markesLatitude = "markers[" + 1 + "].latitude";
var markeslongitude = "markers[" + 1 + "].longitude";
var markesiconPath = "markers[" + 1 + "].iconPath";
that.setData({
[markesName]: name,
[markesLatitude]: latitude,
[markeslongitude]: longitude,
[markesiconPath]: "../../img/mapicon_navi_e.png"
})
console.log('address1', that.data);
},
fail: function() {
wx.showToast({
title: '定位失敗',
icon: "none"
})
},
complete: function() {
//隱藏定位中信息進(jìn)度
wx.hideLoading()
}
})
},
/**
* 確定
*/
getSure: function() {
var that = this;
var origin = that.data.markers[0].longitude + ',' + that.data.markers[0].latitude;
var destination = that.data.markers[1].longitude + ',' + that.data.markers[1].latitude;
app.origin = origin;
app.destination = destination;
console.log('origin', origin);
console.log('destination', destination);
var key = config.Config.key;
var myAmapFun = new amapFile.AMapWX({
key: key
});
myAmapFun.getDrivingRoute({
origin: origin,
destination: destination,
// origin: '116.481028,39.989643',
// destination: '116.434446,39.90816',
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])
})
}
}
}
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 + '米'
});
}
if (data.taxi_cost) {
that.setData({
cost: '打車約' + parseInt(data.taxi_cost) + '元'
});
}
console.log('that', that);
}
})
},
/**
* 詳情頁
*/
goDetail: function() {
var that = this;
wx.navigateTo({
url: '../detail/detail'
})
}
})
location.wxml
<view class="map_title">
<view bindtap='getFormAddress'>
出發(fā)地：<input placeholder="出發(fā)地" type="text" name="" bindinput="" value='{{markers[0].name}}' />
</view>
<view bindtap='getToAddress'>
目的地：<input placeholder="目的地" type="text" name="" bindinput="" value='{{markers[1].name}}' />
</view>
<button bindtap = 'getSure'>確定</button>
</view>
<view wx:if="{{state==1}}">
<view class="map_box">
<map id="navi_map" longitude="{{markers[0].longitude}}" latitude="{{markers[0].latitude}}" scale="12" markers="{{markers}}" polyline="{{polyline}}"></map>
</view>
<view class="text_box">
<view class="text">{{distance}}</view>
<view class="text">{{cost}}</view>
<view class="detail_button" bindtouchstart="goDetail">詳情</view>
</view>
</view>
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;
}
點(diǎn)擊詳情跳轉(zhuǎn)頁，顯示導(dǎo)航詳細(xì)說明：
detail.js
var amapFile = require('../../libs/amap-wx.js');
var config = require('../../libs/config.js');
const app = getApp()
Page({
data: {
steps: {}
},
onLoad: function () {
var that = this;
var key = config.Config.key;
var myAmapFun = 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
<view class="text_box" wx:for="{{steps}}" wx:for-item="i" wx:key="j">
{{i.instruction}}
</view>
這只是個(gè)人的一個(gè)demo用例。僅做參考。其中還有很多瑕疵，不要介意哈。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JS實(shí)現(xiàn)Fisheye效果動(dòng)感放大菜單代碼
這篇文章主要介紹了JS實(shí)現(xiàn)Fisheye效果動(dòng)感放大菜單代碼,涉及JavaScript事假監(jiān)聽機(jī)制及定時(shí)函數(shù)等相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
js跳轉(zhuǎn)到指定url的方法與實(shí)際使用
這篇文章主要給大家介紹了關(guān)于js跳轉(zhuǎn)到指定url的方法與實(shí)際使用的相關(guān)資料,要實(shí)現(xiàn)JavaScript跳轉(zhuǎn)到指定URL,可以使用window.location對(duì)象來實(shí)現(xiàn),需要的朋友可以參考下2023-09-09
全屏滾動(dòng)插件fullPage.js使用實(shí)例解析
這篇文章主要為大家解析了全屏滾動(dòng)插件fullPage.js使用實(shí)例,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
JavaScript實(shí)現(xiàn)密碼強(qiáng)度實(shí)時(shí)驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)密碼強(qiáng)度實(shí)時(shí)驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
如何將php數(shù)組或者對(duì)象傳遞給javascript
這篇文章主要介紹了將php數(shù)組或者對(duì)象傳遞給javascript的方法,需要的朋友可以參考下2014-03-03
本文主要介紹了js實(shí)現(xiàn)3D圖片展示效果的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了使用JS編寫的隨機(jī)抽取號(hào)碼的小程序功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-08-08
這篇文章主要介紹了微信小程序dom操作的替代思路,結(jié)合實(shí)例形式分析了微信小程序通過事件響應(yīng)、動(dòng)態(tài)操作元素屬性來實(shí)現(xiàn)dom操作效果,需要的朋友可以參考下2018-12-12
詳解JS截取字符串的三個(gè)方法substring,substr,slice
js中有三個(gè)截取字符的方法，分別是substring()、substr()、slice()，平時(shí)我們可能都用到過，但總是會(huì)對(duì)這些方法有點(diǎn)混淆。本文將詳細(xì)介紹一下這三者的區(qū)別，需要的可以參考一下2022-03-03
JavaScript中string轉(zhuǎn)換成number介紹
這篇文章主要介紹了JavaScript中string轉(zhuǎn)換成number介紹,本文講解了3種將string值轉(zhuǎn)換成number的方法,需要的朋友可以參考下2014-12-12