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


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 相关文章推荐
ie和firefox不兼容的解决方法集合
Apr 28 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
Feb 02 Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 Javascript
angularjs表格分页功能详解
Jan 21 Javascript
Bootstrap每天必学之标签页(Tab)插件
Aug 09 Javascript
jQuery基于BootStrap样式实现无限极地区联动
Aug 26 Javascript
浅谈jQuery before和insertBefore的区别
Dec 04 Javascript
基于vue实现swipe分页组件实例
May 25 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
Mar 01 Javascript
jquery+php后台实现省市区联动功能示例
May 23 jQuery
JS删除String里某个字符的方法
Jan 06 Javascript
Vue 禁用浏览器的前进后退操作
Sep 04 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
php防注入,表单提交值转义的实现详解
2013/06/10 PHP
php实现的单一入口应用程序实例分析
2015/09/23 PHP
php实现图片上传、剪切功能
2016/05/07 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
Thinkphp5框架异常处理操作实例分析
2020/06/03 PHP
JQuery 实现的页面滚动时浮动窗口控件
2009/07/10 Javascript
判断iframe里的页面是否加载完成
2014/06/06 Javascript
JavaScript实现的石头剪刀布游戏源码分享
2014/08/22 Javascript
jQuery使用$.ajax进行即时验证的方法
2015/12/08 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
JS原型链怎么理解
2016/06/27 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
Vue上传组件vue Simple Uploader的用法示例
2017/08/25 Javascript
Angular实现可删除并计算总金额的购物车功能示例
2017/12/26 Javascript
jQuery插件Validation表单验证详解
2018/05/26 jQuery
layui加载数据显示loading加载完成loading消失的实例代码
2019/09/23 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
[01:02:53]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第二局
2016/03/06 DOTA
跟老齐学Python之集合的关系
2014/09/24 Python
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
用python的requests第三方模块抓取王者荣耀所有英雄的皮肤实例
2017/12/14 Python
浅谈python str.format与制表符\t关于中文对齐的细节问题
2019/01/14 Python
Pycharm运行加载文本出现错误的解决方法
2019/06/27 Python
Pycharm激活方法及详细教程(详细且实用)
2020/05/12 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
2013/01/09 HTML / CSS
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
Diesel美国网上商店:意大利牛仔时装品牌
2020/12/10 全球购物
创业计划书的主要内容有哪些
2014/01/29 职场文书
环保倡议书怎么写
2014/05/16 职场文书
售后服务承诺函格式
2015/01/21 职场文书
2015年信访维稳工作总结
2015/04/07 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
2019银行竞聘书
2019/06/21 职场文书