微信小程序使用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 相关文章推荐
理解Javascript_03_javascript全局观
Oct 11 Javascript
Jquery replace 字符替换实现代码
Dec 02 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
Jan 27 Javascript
Js,alert出现乱码问题的解决方法
Jun 19 Javascript
利用js读取动态网站从服务器端返回的数据
Feb 10 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
全面解析多种Bootstrap图片轮播效果
May 27 Javascript
关于vue.js过渡css类名的理解(推荐)
Apr 10 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
Sep 11 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
详解Vue 如何监听Array的变化
Jun 06 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 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
摩卡咖啡
2021/03/03 咖啡文化
php模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
PHP代码优化技巧小结
2015/09/29 PHP
windows平台中配置nginx+php环境
2015/12/06 PHP
PHP闭包函数详解
2016/02/13 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
2012/11/08 Javascript
JavaScript判断变量是否为undefined的两种写法区别
2013/12/04 Javascript
jQuery插件开发的五种形态小结
2015/03/04 Javascript
javascript原型模式用法实例详解
2015/06/04 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
简单理解vue中Props属性
2016/10/27 Javascript
js无提示关闭浏览器窗口的两种方法分析
2016/11/06 Javascript
12 款 JS 代码测试必备工具(翻译)
2016/12/13 Javascript
使用async、enterproxy控制并发数量的方法详解
2018/01/02 Javascript
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
JavaScript实现拖拽和缩放效果
2020/08/24 Javascript
[51:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
使用Python的Treq on Twisted来进行HTTP压力测试
2015/04/16 Python
Python标准库defaultdict模块使用示例
2015/04/28 Python
Python深度优先算法生成迷宫
2018/01/22 Python
Python3.5集合及其常见运算实例详解
2019/05/01 Python
通过cmd进入python的实例操作
2019/06/26 Python
Python : turtle色彩控制实例详解
2020/01/19 Python
实例讲解CSS3中的box-flex弹性盒属性布局
2016/06/09 HTML / CSS
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
模具专业推荐信
2013/10/30 职场文书
《蓝色的树叶》教学反思
2014/02/24 职场文书
简单的项目建议书模板
2014/03/12 职场文书
2014年入党积极分子学习三中全会思想汇报
2014/09/13 职场文书
基层干部个人对照检查及整改措施
2014/10/28 职场文书
2014年生活老师工作总结
2014/12/23 职场文书
2015社区个人工作总结范文
2015/05/13 职场文书
雨中的树观后感
2015/06/03 职场文书
关于的python五子棋的算法
2022/05/02 Python