企业开发小程序_微信小程序地图完成展示线路

2021-01-05 13:21

微信小程序地图实现展示线路       这篇文章主要为大家详细介绍了微信小程序地图实现展示线路,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序地图实现展示线路的具体代码,供大家参考,具体内容如下

效果图:

思路:

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

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

3、使用map组件

下面直接展示代码:

wxml:

 view 
 !-- longitude="{{longitude}}" latitude="{{latitude}}" scale="16" height: {{view.Height}}px;show-location-- 
 map include-points='{{points}}' longitude="{{longitude}}" latitude="{{latitude}}" polyline="{{polyline}}" markers="{{markers}}" bindcallouttap="bindcallouttap" bindmarkertap="markertap" wx:if="{{hasMarkers}}" scale="10" /map 
 /view 
 view wx:if="{{mapList!=''}}" 
 view 
 view wx:if="{{mapList.polylineJson!=null}}" 预计 text {{now}} /text 送达 /view 
 view 由药店提供配送服务 /view 
 /view 
 view 
 view style="" data-phone="{{mapPhone}}" bindtap="makeCallPhone" wx:if="{{mapPhone!=null}}" 
 image src="{{imgUrl}}ma凡科抠图hop_phone.png" /image view 联系商家 /view 
 /view 
 view data-deliverhone="{{deliverPhone}}" bindtap="makesCallPhone" wx:if="{{deliverPhone!=null}}" 
 image src="{{imgUrl}}map_phone.png" /image view 联系配送员 /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 = {

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].ste凡科抠图; // 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 qqma凡科抠图dk = new QQMapWX({ key: '申请的微信小程序地图key' },

为大家推荐现在关注度比较高的微信小程序教程一篇:小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




扫描二维码分享到微信

在线咨询
联系电话

020-66889888