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


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 相关文章推荐
Javascript小技巧之生成html元素
May 15 Javascript
jquery 表格排序、实时搜索表格内容(附图)
May 19 Javascript
jQuery插件pagination实现分页特效
Apr 12 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
Sep 14 Javascript
javascript日期比较方法实例分析
Jun 17 Javascript
javascript 小数乘法结果错误的处理方法
Jul 28 Javascript
D3.js中强制异步文件读取同步的几种方法
Feb 06 Javascript
浅谈JS中的常用选择器及属性、方法的调用
Jul 28 Javascript
微信小程序仿朋友圈发布动态功能
Jul 15 Javascript
vue实现侧边栏导航效果
Oct 21 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
Oct 26 Javascript
原生js实现无缝轮播图效果
Jan 28 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
一个用于mysql的数据库抽象层函数库
2006/10/09 PHP
PHP isset()与empty()的使用区别详解
2010/08/29 PHP
分享一则PHP定义函数代码
2015/02/26 PHP
PHP使用内置dir类实现目录遍历删除
2015/03/31 PHP
Smarty使用自定义资源的方法
2015/08/08 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
如何在PHP中使用数组
2020/06/09 PHP
escape、encodeURI、encodeURIComponent等方法的区别比较
2006/12/27 Javascript
基于jQuery的弹出框插件
2012/03/18 Javascript
javascript 保存文件到本地实现方法
2012/11/29 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
2016/04/18 Javascript
最全的Javascript编码规范(推荐)
2016/06/22 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
[01:04:05]VG vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
初步解析Python下的多进程编程
2015/04/28 Python
Python扫描IP段查看指定端口是否开放的方法
2015/06/09 Python
python计算圆周率pi的方法
2015/07/11 Python
Python常用知识点汇总
2016/05/08 Python
Pytorch GPU显存充足却显示out of memory的解决方式
2020/01/13 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
使用jquery实现HTML5响应式导航菜单教程
2014/04/02 HTML / CSS
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
总务岗位职责
2013/11/19 职场文书
高中毕业生个人自我鉴定
2013/11/24 职场文书
制药工程专业个人求职自荐信
2014/01/25 职场文书
经典婚礼主持开场白
2014/03/13 职场文书
服装采购员岗位职责
2014/03/15 职场文书
村长反四风问题个人对照检查材料
2014/09/21 职场文书
2014年环保局工作总结
2014/12/11 职场文书
初中家长评语大全
2014/12/26 职场文书