微信小程序选项卡功能开发步骤与方法全解析
466
2023-11-11
微信小程序地图实现展示线路
本文实例为大家分享了微信小程序地图实现展示线路的具体代码，供大家参考，具体内容如下
效果图：
思路：
1、首先获取一系列的坐标点，然后将这些坐标从头到尾链接起来。（参考微信小程序地图组件polyline属性）
2、在获取的坐标点上标注某一个位置，实现打点。（参考微信小程序地图组件marker属性 ）
3、使用map组件
微信小程序地图组件api地址
下面直接展示代码：
wxml:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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" style="width: 100%; height: {{view.Height}}px;" wx:if="{{hasMarkers}}" scale="10" ></map>
</view>
<view class="maptext" wx:if="{{mapList!=}}">
<view class="news">
<view wx:if="{{mapList.polylineJson!=null}}">预计<text style="color:#FF6565">{{now}}</text>送达</view>
<view class="tishi">由药店提供配送服务</view>
</view>
<view class="phone_box">
<view style="" class="right_box" data-phone="{{mapPhone}}" bindtap="makeCallPhone" wx:if="{{mapPhone!=null}}">
<image src="{{imgUrl}}mapshop_phone.png"></image><view style="line-height:96rpx">联系商家</view>
</view>
<view class="left_box" data-deliverhone="{{deliverPhone}}" bindtap="makesCallPhone" wx:if="{{deliverPhone!=null}}">
<image src="{{imgUrl}}map_phone.png"></image><view style="line-height:96rpx">联系配送员</view>
</view>
</view>
</view>
js:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
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
});
},
为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~