微信小程序使用map组件实现路线规划功能示例


Posted in Javascript onJanuary 22, 2019

本文实例讲述了微信小程序使用map组件实现路线规划功能。分享给大家供大家参考,具体如下:

效果图

微信小程序使用map组件实现路线规划功能示例

实现原理

1. 通过map组件标记起始点和绘制路线图;
2. 通过高德地图API获取不同类型的路线坐标点,以及耗费时间和路程。

WXML

<view class="flex-style">
 <view class="flex-item {{status == 'car' ? 'active' : ''}}" data-status="car" bindtouchstart="goTo">驾车</view>
 <view class="flex-item {{status == 'walk' ? 'active' : ''}}" data-status="walk" bindtouchstart="goTo">步行</view>
 <view class="flex-item {{status == 'bus' ? 'active' : ''}}" data-status="bus" bindtouchstart="goTo">公交</view>
 <view class="flex-item {{status == 'ride' ? 'active' : ''}}" data-status="ride" bindtouchstart="goTo">骑行</view>
</view>
<view class="map-inputtips-input">
 <input bindinput="bindInput" placeholder="输入终点" focus="true" />
</view>
<view class="map-search-list {{isShow ? '' : 'map-hide'}}">
 <view bindtouchstart="bindSearch" wx:key="searchId" data-keywords="{{item.name}}" data-location="{{item.location}}" class="map-box" wx:for="{{tips}}">
  {{item.name}}
 </view>
</view>
<view class="map_box {{detailStatus ? 'active' : ''}}">
 <map id="navi_map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" include-points='{{points}}' markers="{{markers}}" polyline="{{polyline}}"></map>
</view>
<view class="text_box {{detailStatus ? '' : 'map-hide'}}">
 <view class="text">路程:{{distance}}米</view>
 <view class="text">耗时:{{cost}}分钟</view>
 <view class="detail_button" bindtouchstart="goDetail">详情</view>
</view>

WXSS

.flex-style{
 display: -webkit-box;
 display: -webkit-flex;
 display: flex;
}
.flex-item{
 height: 35px;
 line-height: 35px;
 text-align: center;
 -webkit-box-flex: 1;
 -webkit-flex: 1;
 flex: 1
}
.flex-item.active{
 color:#0091ff;
}
.map_box{
 position:absolute;
 top: calc(35px + 80rpx);
 bottom: 0px;
 left: 0px;
 right: 0px;
}
.map_box.active{bottom: 90px;}
#navi_map{
 width: 100%;
 height: 100%;
}
.text_box{
 position:absolute;
 height: 90px;
 bottom: 0px;
 left: 0px;
 right: 0px;
}
.text_box .text{
 margin: 15px;
 color: lightseagreen;
}
.detail_button{
 position:absolute;
 bottom: 30px;
 right: 10px;
 padding: 3px 5px;
 color: #fff;
 background: #0091ff;
 width:50px;
 text-align:center;
 border-radius:5px;
}
.map-inputtips-input{
 height: 80rpx;
 line-height: 80rpx;
 width: 100%;
 box-sizing: border-box;
 font-size: 30rpx;
 padding: 0 10px;
 background-color: #fff;
 position: fixed;
 top: 35px;
 left: 0;
 z-index: 1000;
 border-bottom:1px solid #c3c3c3;
}
.map-inputtips-input input{
 border: 1px solid #ddd;
 border-radius: 5px;
 height: 60rpx;
 line-height: 60rpx;
 width: 100%;
 box-sizing: border-box;
 padding: 0 5px;
 margin-top: 10rpx;
}
.map-box{
 margin: 0 10px;
 border-bottom:1px solid #c3c3c3;
 height: 80rpx;
 line-height: 80rpx;
}
.map-box:last-child{border: none;}
.map-search-list{
 position: fixed;
 top: calc(80rpx + 35px);
 left: 0;
 width: 100%;
 z-index: 1000;
 background-color: #fff;
}

JS

const app = getApp();
const amap = app.data.amap;
const key = app.data.key;
Page({
 data: {
  longitude: '',
  latitude: '',
  isShow: false,
  detailStatus: false,
  status: '',
  markers: [],
  points: [],
  distance: '',
  cost: '',
  city: '',
  tips: {},
  polyline: []
 },
 onLoad() {
  var _this = this;
  wx.getLocation({
   success: function (res) {
    if (res && res.longitude) {
     _this.setData({
      longitude: res.longitude,
      latitude: res.latitude,
      points: [{
       longitude: res.longitude,
       latitude: res.latitude
      }],
      markers: [{
       id: 0,
       longitude: res.longitude,
       latitude: res.latitude,
       iconPath: '../../src/images/navi_s.png',
       width: 32,
       height: 32
      }]
     })
    }
   }
  })
 },
 bindInput: function (e) {
  var _this = this;
  var keywords = e.detail.value;
  var myAmap = new amap.AMapWX({ key: key });
  myAmap.getInputtips({
   keywords: keywords,
   location: '',
   success: function (res) {
    if (res && res.tips) {
     var address = res.tips[0].district;
     _this.setData({
      isShow: true,
      city: address.substring(address.indexOf('省') + 1, address.indexOf('市')),
      tips: res.tips
     });
    }
   }
  })
 },
 bindSearch: function (e) {
  var keywords = e.target.dataset.keywords;
  var location = e.target.dataset.location;
  location = location.split(',');
  if (this.data.markers.length > 1 && this.data.points.length > 1){
   this.data.markers.pop();
   this.data.points.pop();
   this.setData({ polyline:[]});
  }
  var markers = this.data.markers;
  var points = this.data.points;
  markers.push({
   id: 0,
   longitude: location[0],
   latitude: location[1],
   iconPath: '../../src/images/navi_e.png',
   width: 32,
   height: 32
  });
  points.push({
   longitude: location[0],
   latitude: location[1]
  })
  this.setData({
   isShow: false,
   markers: markers,
   points: points
  })
 },
 goTo(e) {
  if (this.data.points.length < 2) {
   wx.showToast({ title: '请输入终点' })
   return;
  }
  var status = e.target.dataset.status;
  var myAmap = new amap.AMapWX({ key: key });
  switch (status) {
   case 'car':
    myAmap.getDrivingRoute(this.getDataObj('#4B0082'));
    break;
   case 'walk':
    myAmap.getWalkingRoute(this.getDataObj());
    break;
   case 'bus':
    myAmap.getTransitRoute(this.getBusData('#008B8B'));
    break;
   case 'ride':
    myAmap.getRidingRoute(this.getDataObj('#00FFFF'));
    break;
   default:
    return;
  }
  this.setData({
   detailStatus: true,
   status: status
  })
 },
 getDataObj(color) {
  var _this = this;
  var color = color || "#0091ff";
  return {
   origin: _this.data.points[0].longitude + ',' + _this.data.points[0].latitude,
   destination: _this.data.points[1].longitude + ',' + _this.data.points[1].latitude,
   success(data) {
    var points = [];
    if (!data.paths || !data.paths[0] || !data.paths[0].steps) {
     wx.showToast({ title: '失败!' });
     return;
    }
    if (data.paths && data.paths[0] && data.paths[0].steps) {
     var steps = data.paths[0].steps;
     for (var i = 0; i < steps.length; i++) {
      var poLen = steps[i].polyline.split(';');
      for (var j = 0; j < poLen.length; j++) {
       points.push({
        longitude: parseFloat(poLen[j].split(',')[0]),
        latitude: parseFloat(poLen[j].split(',')[1])
       })
      }
     }
    }
    _this.setData({
     distance: data.paths[0].distance,
     cost: parseInt(data.paths[0].duration / 60),
     polyline: [{
      points: points,
      color: color,
      width: 6
     }]
    });
   },
   fail(info) {
    wx.showToast({ title: '失败!' })
   }
  }
 },
 getBusData(color) {
  var _this = this;
  var color = color || "#0091ff";
  return {
   origin: _this.data.points[0].longitude + ',' + _this.data.points[0].latitude,
   destination: _this.data.points[1].longitude + ',' + _this.data.points[1].latitude,
   city: _this.data.city,
   success(data) {
    var points = [], cost = 0;
    if (data && data.transits) {
     var transits = data.transits;
     for (var i = 0; i < transits.length; i++) {
      cost += parseInt(transits[i].duration);
      var segments = transits[i].segments;
      for (var j = 0; j < segments.length; j++) {
       if (segments[j].bus.buslines[0] && segments[j].bus.buslines[0].polyline) {
        var steps = segments[j].bus.buslines[0].polyline.split(';');
        for (var k = 0; k < steps.length; k++) {
         var point = steps[k].split(',');
         points.push({
          longitude: point[0],
          latitude: point[1]
         })
         if (parseInt(point[0] * 100000) === parseInt(_this.data.points[1].longitude * 100000) && parseInt(point[1] * 100000) === parseInt(_this.data.points[1].latitude * 100000)){
          _this.setData({
           distance: data.distance,
           cost: parseInt(cost / 60),
           polyline: [{
            points: points,
            color: color,
            width: 6
           }]
          });
          return ;
         }
        }
       }
      }
     }
    }
   },
   fail(info) {
    wx.showToast({ title: '失败!' })
   }
  }
 }
})

实现步骤

1. 利用 input 输入终点地址关键字;
2. 通过关键字利用高德地图API(getInputtips)获取地址坐标列表;
3. 列表添加选中事件,获取具体的 location ,进行地图标记;
4. 选择路线类型(驾车,骑行等),通过高德地图对应的API获取规划坐标;
5. 绘制路线。
6. 注意:在返回的路线坐标数据格式,公交和其他三种方式的数据格式不同,需要单独进行处理(单独处理公交数据的方法: getBusData)。

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
jQuery Ajax之load()方法
Oct 12 Javascript
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
Dec 02 Javascript
新手常遇到的一些jquery问题整理
Aug 16 Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 Javascript
jQuery组件easyui基本布局实现代码
Aug 25 Javascript
jQuery简单实现中间浮窗效果
Sep 04 Javascript
Javascript生成带参数的二维码示例
Oct 10 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 Javascript
详解vuex的简单使用
Mar 12 Javascript
微信小程序仿美团城市选择
Jun 06 Javascript
layui下拉列表select实现可输入查找的方法
Sep 28 Javascript
一文了解JavaScript用Element Traversal新属性遍历子元素
Nov 27 Javascript
JavaScript JMap类定义与使用方法示例
Jan 22 #Javascript
vue2.0 如何在hash模式下实现微信分享
Jan 22 #Javascript
JavaScript继承与聚合实例详解
Jan 22 #Javascript
JavaScript格式化json和xml的方法示例
Jan 22 #Javascript
基于vue的验证码组件的示例代码
Jan 22 #Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
Jan 22 #Javascript
深入分析element ScrollBar滚动组件源码
Jan 22 #Javascript
You might like
破解图片防盗链的代码(asp/php)测试通过
2010/07/02 PHP
教你php如何实现验证码
2016/01/20 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
Avengerls vs KG BO3 第一场2.18
2021/03/10 DOTA
另类调用flash无须激活的方法
2006/12/27 Javascript
jquery 合并内容相同的单元格(示例代码)
2013/12/13 Javascript
asp.net中oracle 存储过程(图文)
2015/08/12 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
利用jQuery异步上传文件的插件用法详解
2017/07/19 jQuery
Angular4学习笔记之根模块与Ng模块
2017/09/09 Javascript
微信小程序实现滚动消息通知
2018/02/02 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
详解如何使用node.js的开发框架express创建一个web应用
2018/12/20 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
微信小程序全选多选效果实现代码解析
2020/01/21 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
Python中pow()和math.pow()函数用法示例
2018/02/11 Python
使用matplotlib画散点图的方法
2018/05/25 Python
Opencv+Python实现图像运动模糊和高斯模糊的示例
2019/04/11 Python
使用Python制作表情包实现换脸功能
2019/07/19 Python
python使用gdal对shp读取,新建和更新的实例
2020/03/10 Python
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
2016/04/26 HTML / CSS
意大利珠宝店:Luxury Zone
2019/01/05 全球购物
中学生学雷锋活动心得体会
2014/03/10 职场文书
高考标语大全
2014/06/05 职场文书
法制宣传口号
2014/06/16 职场文书
法语专业求职信
2014/07/20 职场文书
安全标兵事迹材料
2014/08/17 职场文书
初级党校心得体会
2014/09/11 职场文书
2015年企业新年寄语
2014/12/08 职场文书
优秀共产党员事迹材料2016
2016/02/29 职场文书
合作合同协议书
2016/03/21 职场文书
《正面管教》读后有感:和善而坚定的旅程
2019/12/19 职场文书
MySQL 隔离数据列和前缀索引的使用总结
2021/05/14 MySQL