作者：重庆车管所 | 来源：互联网 | 2023-09-25 09:16
这篇文章将为大家详细讲解有关微信小程序地图实现展示线路的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
效果图：
思路：
1、首先获取一系列的坐标点，然后将这些坐标从头到尾链接起来。（参考微信小程序地图组件polyline属性）
2、在获取的坐标点上标注某一个位置，实现打点。（参考微信小程序地图组件marker属性 ）
3、使用map组件
微信小程序地图组件api地址
下面直接展示代码：
wxml:
预计{{now}}送达
由药店提供配送服务
联系商家
联系配送员
js:
data: {
longitude: &＃39;&＃39;,
latitude:&＃39;&＃39;,
points: [],
polyline: [],
markers: [],
mapList:&＃39;&＃39;,
polylineList:[],
},
mapLine(options){
wx.showLoading({
title: &＃39;加载中&＃39;,
})
let subOrderNo = options.maporder
console.log(subOrderNo)
let that=this
let token = that.data.storageData.token
let url = &＃39;接口地址&＃39;;
let params = {
subOrderNo:subOrderNo
};
http.getRequest(url, params, token).then(res => {
// 地图打点标记商家和配送员位置
let markers= [
{
iconPath: imgUrl+&＃39;shoplong.png&＃39;,
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+ &＃39;maplog.png&＃39;,
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=&＃39;0&＃39;+dd
}
if(hh<10){
hh=&＃39;0&＃39;+hh
}
let now=hh +&＃39;:&＃39;+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{
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, &＃39;none&＃39;);
}else{
sysMsg.sysMsg("商家还未接单，请稍后查看", 2000, &＃39;none&＃39;);
}
}).catch(err => {
console.log(err);
sysMsg.sysMsg("请求超时，请稍后再试", 1500, &＃39;none&＃39;);
})
},
onLoad: function (options) {
this.mapLine(options)
this.mapHeight()
this.mapLog()
// this.markers()
// console.log(options.maporder)
this.getstorageDataToPage()
// qq地图api
qqmapsdk = new QQMapWX({
key: &＃39;申请的微信小程序地图key&＃39;
});
},关于微信小程序地图实现展示线路的方法就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
京公网安备 11010802041100号