微信小程序地图实现展示线路微信小程序地图实现展示线路
主要为大家详细介绍了微信小程序地图实现展示线路，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序地图实现展示线路的具体代码，供大家参考，具体内容如下
效果图：效果图：
思路：思路：
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" 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:
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)
weixin_38605801
- 粉丝: 10
- 资源: 985
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
会员权益专享
最新资源
- ARM Cortex-A(armV7)编程手册V4.0.pdf
- ABB机器人保养总结解析.ppt
- 【超详细图解】菜鸡如何理解双向链表的python代码实现
- 常用网络命令的使用 ipconfig ping ARP FTP Netstat Route Tftp Tracert Telnet nslookup
- 基于单片机控制的DC-DC变换电路
- RS-232接口电路的ESD保护.pdf
- linux下用time(NULL)函数和localtime()获取当前时间的方法
- Openstack用户使用手册.docx
- KUKA KR 30 hA,KR 60 hA机器人产品手册.pdf
- Java programming with JNI
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0