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


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 内置对象属性及方法集合
Jul 04 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 Javascript
Js点击弹出下拉菜单效果实例
Aug 12 Javascript
JS嵌套函数调用上下文的问题解决
Mar 26 Javascript
jquery常用特效方法使用示例
Apr 25 Javascript
正则表达式优化JSON字符串的技巧
Dec 24 Javascript
React进阶学习之组件的解耦之道
Aug 07 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
vue-cli3全面配置详解
Nov 14 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
Mar 27 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
Apr 13 Javascript
JS相册图片抖动放大展示效果的示例代码
Jan 29 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之第五天
2006/10/09 PHP
php获取mysql版本的几种方法小结
2008/03/25 PHP
php数据库备份还原类分享
2014/03/20 PHP
CI(CodeIgniter)框架配置
2014/06/10 PHP
php检测url是否存在的方法
2015/04/14 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
Extjs4 关于Store的一些操作(加载/回调/添加)
2013/04/18 Javascript
JS命名空间的另一种实现
2013/08/09 Javascript
JS常用表单验证方法总结
2014/05/22 Javascript
JavaScript获取function所有参数名的方法
2015/10/30 Javascript
Bootstrap每天必学之折叠
2016/04/12 Javascript
jQuery层级选择器实例代码
2017/02/06 Javascript
js实现适配不同的屏幕大小
2017/04/10 Javascript
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
Vue项目路由刷新的实现代码
2019/04/17 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
vue 插件的方法代码详解
2019/06/06 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
2020/07/26 Javascript
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
python下MySQLdb用法实例分析
2015/06/08 Python
Windows下为Python安装Matplotlib模块
2015/11/06 Python
Python操作mongodb的9个步骤
2018/06/04 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
解决python明明pip安装成功却找不到包的问题
2019/08/28 Python
用OpenCV将视频分解成单帧图片,图片合成视频示例
2019/12/10 Python
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
C#面试题
2016/05/06 面试题
介绍一下linux的文件系统
2012/03/20 面试题
优秀共产党员主要事迹材料
2015/11/05 职场文书
社区结对共建协议书
2016/03/23 职场文书
JavaGUI模仿QQ聊天功能完整版
2021/07/04 Java/Android