微信小程序地图实现展示路线路

效果图：

思路：

1、首先获取一系列的坐标点，然后将这些坐标从头到尾链接起来。（参考微信小程序地图组件polyline属性）

2、在获取的坐标点上标注某一个位置，实现打点。（参考微信小程序地图组件marker属性）

3、使用map组件

微信小程序地图组件api地址：https://developers.weixin.qq.com/miniprogram/dev/component/map.html

下面直接展示代码：

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.maporderconsole.log(subOrderNo)let that=thislet token = that.data.storageData.tokenlet 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.updateTimelet newsDate=new Date(mapDate)// let h = newsDate.getHours()let m = newsDate.getMinutes()let mapMinte=mapJson.route.paths[0].duration/60newsDate.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.deliverTypelet maplistJson=res.responseBody.polylineJsonlet 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地图apiqqmapsdk = new QQMapWX({key: '申请的微信小程序地图key'});},

微信小程序地图实现展示路线路相关推荐

微信小程序微信小程序地图搜索、地图搜索点点击出callout气泡标题说明
实现效果:根据楼盘名称实现地图定位.周边搜索: 代码: html <view class="mapinfo"><view class="mapbd&qu ...
微信小程序地图获取地点信息（打卡签到功能为例）-2020-7-26
目录微信小程序地图获取地点信息(打卡签到功能为例) 效果图前提步骤首先需要了解的代码部分配置性代码功能性代码 demo 下载微信小程序地图获取地点信息(打卡签到功能为例) 解决方案:利用 ...
微信小程序地图插件系列（二）：微信小程序使用百度地图（不定期补充知识点）
前言当我们在使用一些地图相关软件的情况下,他会显示选择那种.一般都有高德地图,百度地图等.那么我们在微信小程序中也想使用这种功能需要怎么办呢? 本文地址链接微信小程序-百度地图SDK官方文档微信 ...
php小程序地图处理,微信小程序地图map详解及简单实例
微信小程序地图map 微信小程序map 地图属性名类型默认值说明longitudeNumber中心经度 latitudeNumber中心纬度 scaleNumber1缩放级别 markersArra ...
php小程序地图处理,微信小程序地图 map
微信小程序地图 map 微信小程序map 地图标记点标记点用于在地图上显示标记的位置,不能自定义图标和样式覆盖物覆盖物用于在地图上显示自定义图标,可自定义图标和样式地图组件的经纬度必填, 如 ...
微信小程序获取并展示公众号推文
微信小程序获取并展示公众号推文获取公众号access_token(开发环境) IP白名单设置获取access_token 小程序前端展示素材导入云数据库云函数读取展示注:笔者是小程序菜鸟,代 ...
微信小程序地图组件和相机组件实现基于location的AR效果的尝试（失败）
微信小程序地图组件和相机组件实现基于location的AR效果的尝试(失败) 最近无论AR还是微信小程序都是炒的火热.微信小程序的特点便是"无需安装,用完即走",而我们所说的AR用 ...
微信小程序--地图上添加图片
如何在微信小程序地图添加上,添加图片? 在微信小程序中,地图的层级最高,所以我们没有办法,通过定位,在地图上添加图片等信息; 处理办法: 添加控件:controls; 其中有个属性position,进 ...
微信小程序---地图导航（点击地址，可以进行导航）
微信小程序-地图导航(点击地址,可以进行导航) // 地图getLocation(e){var that = this,address = e.currentTarget.dataset.addres ...
微信小程序地图使用用户头像标记
一.在开发微信小程序地图的过程中,有这样一个需求,用户发表祝福语,然后存入数据库,可以在地图上显示用户头像并且点击用户头像时显示祝福语. 二.自己在开发时遇到的问题: 1.微信头像是网络图片,而地图的 ...

微信小程序地图实现展示路线路

微信小程序地图实现展示路线路相关推荐

最新文章

热门文章