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


Posted in Javascript onJuly 29, 2020

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

效果图:

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

思路:

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)
   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'
 });
},

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

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

Javascript 相关文章推荐
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
Jun 11 Javascript
js汉字转拼音实现代码
Feb 06 Javascript
通过$(this)使用jQuery包装后的方法或属性
May 18 Javascript
node+express+ejs制作简单页面上手指南
Nov 26 Javascript
js实现的简单radio背景颜色选择器代码
Aug 18 Javascript
node.js博客项目开发手记
Mar 16 Javascript
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
如何解决webpack-dev-server代理常切换问题
Jan 09 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
Apr 26 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
Aug 05 Javascript
Vue 使用typescript如何优雅的调用swagger API
Sep 01 Javascript
vue a标签点击实现赋值方式
Sep 07 Javascript
vuex实现购物车的增加减少移除
Jun 28 #Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 #Javascript
vuex实现购物车功能
Jun 28 #Javascript
JavaScript图像放大镜效果实现方法详解
Jun 28 #Javascript
详细分析Node.js 模块系统
Jun 28 #Javascript
微信小程序实现拨打电话功能的示例代码
Jun 28 #Javascript
js瀑布流布局的实现
Jun 28 #Javascript
You might like
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
php使用反射插入对象示例分享
2014/03/11 PHP
php实现将Session写入数据库
2015/07/26 PHP
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
PHP/HTML混写的四种方式总结
2017/02/27 PHP
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
基于JavaScript实现瀑布流布局(二)
2016/01/26 Javascript
浏览器兼容的JS写法总结
2016/04/27 Javascript
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
Vue实现双向绑定的方法
2016/12/22 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
微信小程序 冒泡事件原理解析
2019/09/27 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
[52:02]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第二场 2月26日
2021/03/11 DOTA
python通过pil模块获得图片exif信息的方法
2015/03/16 Python
Python中使用第三方库xlutils来追加写入Excel文件示例
2015/04/05 Python
python列出目录下指定文件与子目录的方法
2015/07/03 Python
在Python的Django框架中生成CSV文件的方法
2015/07/22 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
python识别文字(基于tesseract)代码实例
2019/08/24 Python
python爬虫用scrapy获取影片的实例分析
2020/11/23 Python
澳大利亚便宜隐形眼镜购买网站:QUICKLENS Australia
2018/10/06 全球购物
OSPF有什么优点?为什么OSPF比RIP收敛快?
2013/02/13 面试题
公司面试感谢信
2014/02/01 职场文书
车间机修工岗位职责
2014/02/28 职场文书
阅兵口号
2014/06/19 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
社区党的群众路线教育实践活动总结材料
2014/10/31 职场文书
部门2014年度工作总结
2014/11/12 职场文书
车间主任岗位职责
2015/02/03 职场文书
2015年销售内勤工作总结
2015/04/27 职场文书
公司团队口号霸气押韵
2015/12/24 职场文书
创业计划之特色精品店
2019/08/12 职场文书