微信小程序使用map組件實現(xiàn)路線規(guī)劃功能示例
更新時間：2019年01月22日 11:43:37 作者：Rattenking
這篇文章主要介紹了微信小程序使用map組件實現(xiàn)路線規(guī)劃功能,結合具體實例形式分析了微信小程序基于map組件的地理位置獲取、路徑規(guī)劃等相關操作技巧,需要的朋友可以參考下
本文實例講述了微信小程序使用map組件實現(xiàn)路線規(guī)劃功能。分享給大家供大家參考，具體如下：
效果圖
實現(xiàn)原理
1. 通過map組件標記起始點和繪制路線圖；
2. 通過高德地圖API獲取不同類型的路線坐標點，以及耗費時間和路程。
WXML
<view class="flex-style">
<view class="flex-item {{status == 'car' ? 'active' : ''}}" data-status="car" bindtouchstart="goTo">駕車</view>
<view class="flex-item {{status == 'walk' ? 'active' : ''}}" data-status="walk" bindtouchstart="goTo">步行</view>
<view class="flex-item {{status == 'bus' ? 'active' : ''}}" data-status="bus" bindtouchstart="goTo">公交</view>
<view class="flex-item {{status == 'ride' ? 'active' : ''}}" data-status="ride" bindtouchstart="goTo">騎行</view>
</view>
<view class="map-inputtips-input">
<input bindinput="bindInput" placeholder="輸入終點" focus="true" />
</view>
<view class="map-search-list {{isShow ? '' : 'map-hide'}}">
<view bindtouchstart="bindSearch" wx:key="searchId" data-keywords="{{item.name}}" data-location="{{item.location}}" class="map-box" wx:for="{{tips}}">
{{item.name}}
</view>
</view>
<view class="map_box {{detailStatus ? 'active' : ''}}">
<map id="navi_map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" include-points='{{points}}' markers="{{markers}}" polyline="{{polyline}}"></map>
</view>
<view class="text_box {{detailStatus ? '' : 'map-hide'}}">
<view class="text">路程：{{distance}}米</view>
<view class="text">耗時：{{cost}}分鐘</view>
<view class="detail_button" bindtouchstart="goDetail">詳情</view>
</view>
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_box{
position:absolute;
top: calc(35px + 80rpx);
bottom: 0px;
left: 0px;
right: 0px;
}
.map_box.active{bottom: 90px;}
#navi_map{
width: 100%;
height: 100%;
}
.text_box{
position:absolute;
height: 90px;
bottom: 0px;
left: 0px;
right: 0px;
}
.text_box .text{
margin: 15px;
color: lightseagreen;
}
.detail_button{
position:absolute;
bottom: 30px;
right: 10px;
padding: 3px 5px;
color: #fff;
background: #0091ff;
width:50px;
text-align:center;
border-radius:5px;
}
.map-inputtips-input{
height: 80rpx;
line-height: 80rpx;
width: 100%;
box-sizing: border-box;
font-size: 30rpx;
padding: 0 10px;
background-color: #fff;
position: fixed;
top: 35px;
left: 0;
z-index: 1000;
border-bottom:1px solid #c3c3c3;
}
.map-inputtips-input input{
border: 1px solid #ddd;
border-radius: 5px;
height: 60rpx;
line-height: 60rpx;
width: 100%;
box-sizing: border-box;
padding: 0 5px;
margin-top: 10rpx;
}
.map-box{
margin: 0 10px;
border-bottom:1px solid #c3c3c3;
height: 80rpx;
line-height: 80rpx;
}
.map-box:last-child{border: none;}
.map-search-list{
position: fixed;
top: calc(80rpx + 35px);
left: 0;
width: 100%;
z-index: 1000;
background-color: #fff;
}
JS
const app = getApp();
const amap = app.data.amap;
const key = app.data.key;
Page({
data: {
longitude: '',
latitude: '',
isShow: false,
detailStatus: false,
status: '',
markers: [],
points: [],
distance: '',
cost: '',
city: '',
tips: {},
polyline: []
},
onLoad() {
var _this = this;
wx.getLocation({
success: function (res) {
if (res && res.longitude) {
_this.setData({
longitude: res.longitude,
latitude: res.latitude,
points: [{
longitude: res.longitude,
latitude: res.latitude
}],
markers: [{
id: 0,
longitude: res.longitude,
latitude: res.latitude,
iconPath: '../../src/images/navi_s.png',
width: 32,
height: 32
}]
})
}
}
})
},
bindInput: function (e) {
var _this = this;
var keywords = e.detail.value;
var myAmap = new amap.AMapWX({ key: key });
myAmap.getInputtips({
keywords: keywords,
location: '',
success: function (res) {
if (res && res.tips) {
var address = res.tips[0].district;
_this.setData({
isShow: true,
city: address.substring(address.indexOf('省') + 1, address.indexOf('市')),
tips: res.tips
});
}
}
})
},
bindSearch: function (e) {
var keywords = e.target.dataset.keywords;
var location = e.target.dataset.location;
location = location.split(',');
if (this.data.markers.length > 1 && this.data.points.length > 1){
this.data.markers.pop();
this.data.points.pop();
this.setData({ polyline:[]});
}
var markers = this.data.markers;
var points = this.data.points;
markers.push({
id: 0,
longitude: location[0],
latitude: location[1],
iconPath: '../../src/images/navi_e.png',
width: 32,
height: 32
});
points.push({
longitude: location[0],
latitude: location[1]
})
this.setData({
isShow: false,
markers: markers,
points: points
})
},
goTo(e) {
if (this.data.points.length < 2) {
wx.showToast({ title: '請輸入終點' })
return;
}
var status = e.target.dataset.status;
var myAmap = new amap.AMapWX({ key: key });
switch (status) {
case 'car':
myAmap.getDrivingRoute(this.getDataObj('#4B0082'));
break;
case 'walk':
myAmap.getWalkingRoute(this.getDataObj());
break;
case 'bus':
myAmap.getTransitRoute(this.getBusData('#008B8B'));
break;
case 'ride':
myAmap.getRidingRoute(this.getDataObj('#00FFFF'));
break;
default:
return;
}
this.setData({
detailStatus: true,
status: status
})
},
getDataObj(color) {
var _this = this;
var color = color || "#0091ff";
return {
origin: _this.data.points[0].longitude + ',' + _this.data.points[0].latitude,
destination: _this.data.points[1].longitude + ',' + _this.data.points[1].latitude,
success(data) {
var points = [];
if (!data.paths || !data.paths[0] || !data.paths[0].steps) {
wx.showToast({ title: '失??！' });
return;
}
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])
})
}
}
}
_this.setData({
distance: data.paths[0].distance,
cost: parseInt(data.paths[0].duration / 60),
polyline: [{
points: points,
color: color,
width: 6
}]
});
},
fail(info) {
wx.showToast({ title: '失敗！' })
}
}
},
getBusData(color) {
var _this = this;
var color = color || "#0091ff";
return {
origin: _this.data.points[0].longitude + ',' + _this.data.points[0].latitude,
destination: _this.data.points[1].longitude + ',' + _this.data.points[1].latitude,
city: _this.data.city,
success(data) {
var points = [], cost = 0;
if (data && data.transits) {
var transits = data.transits;
for (var i = 0; i < transits.length; i++) {
cost += parseInt(transits[i].duration);
var segments = transits[i].segments;
for (var j = 0; j < segments.length; j++) {
if (segments[j].bus.buslines[0] && segments[j].bus.buslines[0].polyline) {
var steps = segments[j].bus.buslines[0].polyline.split(';');
for (var k = 0; k < steps.length; k++) {
var point = steps[k].split(',');
points.push({
longitude: point[0],
latitude: point[1]
})
if (parseInt(point[0] * 100000) === parseInt(_this.data.points[1].longitude * 100000) && parseInt(point[1] * 100000) === parseInt(_this.data.points[1].latitude * 100000)){
_this.setData({
distance: data.distance,
cost: parseInt(cost / 60),
polyline: [{
points: points,
color: color,
width: 6
}]
});
return ;
}
}
}
}
}
}
},
fail(info) {
wx.showToast({ title: '失敗！' })
}
}
}
})
實現(xiàn)步驟
1. 利用 input 輸入終點地址關鍵字；
2. 通過關鍵字利用高德地圖API（getInputtips）獲取地址坐標列表；
3. 列表添加選中事件，獲取具體的 location ，進行地圖標記；
4. 選擇路線類型（駕車，騎行等），通過高德地圖對應的API獲取規(guī)劃坐標；
5. 繪制路線。
6. 注意：在返回的路線坐標數(shù)據(jù)格式，公交和其他三種方式的數(shù)據(jù)格式不同，需要單獨進行處理（單獨處理公交數(shù)據(jù)的方法： getBusData）。
希望本文所述對大家微信小程序開發(fā)有所幫助。
相關文章
下面小編就為大家?guī)硪黄狫S產(chǎn)生隨機數(shù)的幾個用法詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
大家都知道將多維數(shù)組（尤其是二維數(shù)組）轉化為一維數(shù)組是業(yè)務開發(fā)中的常用邏輯，除了使用樸素的循環(huán)轉換以外，我們還可以利用Javascript的語言特性和數(shù)據(jù)結構的思想實現(xiàn)更為簡潔優(yōu)雅的轉換。下面跟著小編一起來學習學習關于JavaScript如何實現(xiàn)數(shù)組降維吧。2017-01-01
JS 驗證密碼 不能為空，必須含有數(shù)字、字母、特殊字符,長度在8-12位
這篇文章主要介紹了JS 驗證密碼 不能為空，必須含有數(shù)字、字母、特殊字符,長度在8-12位的相關資料,需要的朋友可以參考下2017-06-06
這篇文章介紹了時間戳轉換為時間 年月日時間的JS函數(shù)，有需要的朋友可以參考一下2013-08-08
讓插入到 innerHTML 中的 script 跑起來的實現(xiàn)代碼
在做 ajax 編程時，我們常常需要將 xmlhttp 獲取到的頁面內(nèi)容通過 innerHTML 來賦給某個容器（比如 div、span 或者 td 等），但是這里存在一個問題，就是我們將要賦給 innerHTML 的頁面內(nèi)容如果包含有腳本程序，這些腳本程序不管是外部腳本，還是內(nèi)部腳本，可能(1)都不會被執(zhí)行。2006-07-07
這篇文章主要介紹了JS中的事件委托,結合實例形式簡單分析了javascript事件委托的概念、功能、使用方法及相關注意事項,需要的朋友可以參考下2018-03-03
js 如何打印預覽，實局部打印頁面很簡單。就是把你需要打印的部分做一個起始標記，下面有個示例大大家不妨參考下2014-07-07
html的DOM中document對象images集合用法實例
這篇文章主要介紹了html的DOM中document對象images集合用法,實例分析了images集合的語法與使用技巧,需要的朋友可以參考下2015-01-01
在入門Vue時, 列表渲染一節(jié)中提到數(shù)組的變異方法, 其中包括push(), pop(), shift(), unshift(), splice(), sort(), reverse(), 而concat()和slice()不屬于變異方法. 在這里就復習一下Array所提供的這幾個方法的使用2017-04-04
js eval木馬代碼,以后再分析吧...2007-03-03