微信小程序地图实现展示线路
129 浏览量
2020-10-15
04:48:51
上传
评论 4
收藏 52KB PDF 举报
微信小程序地图实现展示线路微信小程序地图实现展示线路
主要为大家详细介绍了微信小程序地图实现展示线路，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序地图实现展示线路的具体代码，供大家参考，具体内容如下
效果图：效果图：
思路：思路：
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)
资源评论
