溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關微信小程序地圖實現展示線路的方法，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
效果圖：
思路：
1、首先獲取一系列的坐標點，然后將這些坐標從頭到尾鏈接起來。（參考微信小程序地圖組件polyline屬性）
2、在獲取的坐標點上標注某一個位置，實現打點。（參考微信小程序地圖組件marker屬性 ）
3、使用map組件
微信小程序地圖組件api地址
下面直接展示代碼：
wxml:
<view class="page-section page-section-gap">
<!-- longitude="{{longitude}}" latitude="{{latitude}}" scale="16" height: {{view.Height}}px;show-location-->
<map class="navi_map" include-points='{{points}}' longitude="{{longitude}}" latitude="{{latitude}}" polyline="{{polyline}}" markers="{{markers}}" bindcallouttap="bindcallouttap" bindmarkertap="markertap" wx:if="{{hasMarkers}}" scale="10" ></map>
</view>
<view class="maptext" wx:if="{{mapList!=''}}">
<view class="news">
<view wx:if="{{mapList.polylineJson!=null}}">預計<text >{{now}}</text>送達</view>
<view class="tishi">由藥店提供配送服務</view>
</view>
<view class="phone_box">
<view class="right_box" data-phone="{{mapPhone}}" bindtap="makeCallPhone" wx:if="{{mapPhone!=null}}">
<image src="{{imgUrl}}mapshop_phone.png"></image><view >聯系商家</view>
</view>
<view class="left_box" data-deliverhone="{{deliverPhone}}" bindtap="makesCallPhone" wx:if="{{deliverPhone!=null}}">
<image src="{{imgUrl}}map_phone.png"></image><view >聯系配送員</view>
</view>
</view>
</view>js:
data: {
longitude: '',
latitude:'',
points: [],
polyline: [],
markers: [],
mapList:'',
polylineList:[],
},
mapLine(options){
wx.showLoading({
title: '加載中',
})
let subOrderNo = options.maporder
console.log(subOrderNo)
let that=this
let token = that.data.storageData.token
let url = '接口地址';
let params = {
subOrderNo:subOrderNo
};
http.getRequest(url, params, token).then(res => {
// 地圖打點標記商家和配送員位置
let markers= [
{
iconPath: imgUrl+'shoplong.png',
id: 0,
latitude: that.data.mapList.pharmacyInfo.latitude,
longitude: that.data.mapList.pharmacyInfo.longitude,
callout: {
content: that.data.mapList.pharmacyInfo.pharmacyName+"已接單",
name:"商家已接單",
color: "#ff0000",
fontSize: "16",
borderRadius: "6",
bgColor: "#ffffff",
padding: "10",
display:"ALWAYS"
},
width: 50,
height: 50
},
{
iconPath:imgUrl+ 'maplog.png',
id: 1,
latitude: that.data.mapList.locationList[0].latitude,
longitude: that.data.mapList.locationList[0].longitude,
callout: {
content: "配送員正在配送",
name:"正在配送",
color: "#ff0000",
fontSize: "16",
borderRadius: "6",
bgColor: "#ffffff",
padding: "10",
display:"ALWAYS"
},
width: 50,
height: 50
},
];
console.log(markers)
let _this=this
_this.setData({
markers:markers,
hasMarkers:true,
latitude:that.data.mapList.pharmacyInfo.latitude,
longitude:that.data.mapList.pharmacyInfo.longitude
})
if(orderDeliver.polylineJson!=null){
let mapJson = JSON.parse(orderDeliver.polylineJson);
console.log(mapJson)
// 計算送達時間
let mapDate=that.data.mapList.updateTime
let newsDate=new Date(mapDate)
// let h = newsDate.getHours()
let m = newsDate.getMinutes()
let mapMinte=mapJson.route.paths[0].duration/60
newsDate.setMinutes(m+mapMinte)
let dd=newsDate.getMinutes()
let hh=newsDate.getHours()
if(dd<10){
dd='0'+dd
}
if(hh<10){
hh='0'+hh
}
let now=hh +':'+dd;
if(newsDate.getMinutes()>=60){
h=h+1;
}else{
this.setData({
now:now
})
console.log(now)
}
// 循環數組取快遞員的經緯度
let list = mapJson.route.paths[0].steps;
// console.log(list);
let polylineList = [];
for(let i =0;i<list.length;i++){
let polyline = list[i].polyline;
if(polyline.indexOf(";") != -1){
let pList = polyline.split(";");
// console.log(pList)
pList.map((items,index) =>{
let a = items.split(",");
polylineList.push({
latitude: a[1],
longitude: a[0]
});
// console.log(polylineList)
})
// polylineList.concat(pList);
}
}
let polyline = [{
points: polylineList,
color: "#518FF8",
width: 4,
dottedLine: false
}];
this.setData({
polyline:polyline,
points:polylineList,
})
}
}else if(res.responseCode == 0 && res.responseBody != null && res.responseBody.length != 0 && res.responseBody.deliverType ==2){
let list_di=res.responseBody.deliverType
let maplistJson=res.responseBody.polylineJson
let listMap=JSON.parse(maplistJson)
console.log(listMap)
let logList=listMap.data.reverse()
logList.forEach(element => {
element.ftime = element.ftime.substring(0,16)
});
console.log(logList)
this.setData({
mapList:[],
hasMarkers:false,
logList:logList,
list_di:list_di
})
// sysMsg.sysMsg("商家還未接單，請稍后查看", 2000, 'none');
}else{
sysMsg.sysMsg("商家還未接單，請稍后查看", 2000, 'none');
}
}).catch(err => {
console.log(err);
sysMsg.sysMsg("請求超時，請稍后再試", 1500, 'none');
})
},
onLoad: function (options) {
this.mapLine(options)
this.mapHeight()
this.mapLog()
// this.markers()
// console.log(options.maporder)
this.getstorageDataToPage()
// qq地圖api
qqmapsdk = new QQMapWX({
key: '申請的微信小程序地圖key'
});
},關于微信小程序地圖實現展示線路的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
