微信小程序使用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 1.3 和 Validation 验证插件1.5.1
Jul 09 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
详解JavaScript中数组的相关知识
Jul 29 Javascript
jQuery使用$.ajax提交表单完整实例
Dec 11 Javascript
非常棒的jQuery图片轮播效果
Apr 17 Javascript
使用jquery提交form表单并自定义action的实现代码
May 25 Javascript
Javascript 调用 ActionScript 的简单方法
Sep 22 Javascript
Vue和Bootstrap的整合思路详解
Jun 30 Javascript
详解vue页面首次加载缓慢原因及解决方案
Nov 06 Javascript
js实现多个标题吸顶效果
Jan 08 Javascript
vue界面发送表情的实现代码
Sep 11 Javascript
Vue详细的入门笔记
May 10 Vue.js
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
当海贼王变成JOJO风
2020/03/02 日漫
非常好用的两个PHP函数 serialize()和unserialize()
2012/02/04 PHP
CI框架源码阅读,系统常量文件constants.php的配置
2013/02/28 PHP
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
php mysql procedure实现获取多个结果集的方法【基于thinkPHP】
2016/11/09 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
JavaScript Event学习第六章 事件的访问
2010/02/07 Javascript
JavaScript继承方式实例
2010/10/29 Javascript
Node.js中创建和管理外部进程详解
2014/08/16 Javascript
JavaScript中number转换成string介绍
2014/12/31 Javascript
微信小程序 animation API详解及实例代码
2016/10/08 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
2017/02/17 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
详解Javascript 中的 class、构造函数、工厂函数
2017/12/20 Javascript
jQuery 改变P标签文本值方法
2018/02/24 jQuery
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
简述pm2常用命令集合及配置文件说明
2019/05/30 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
JavaScript中遍历的十种方法总结
2020/12/15 Javascript
vue下拉刷新组件的开发及slot的使用详解
2020/12/23 Vue.js
ReactRouter的实现方法
2021/01/25 Javascript
python使用socket连接远程服务器的方法
2015/04/29 Python
对numpy中轴与维度的理解
2018/04/18 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
详解python中的lambda与sorted函数
2020/09/04 Python
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
Vuori官网:运动服装的终级表现
2021/01/27 全球购物
StringBuilder和String的区别
2015/05/18 面试题
计算机学生的自我评价分享
2014/02/18 职场文书
产品质量承诺书
2014/03/27 职场文书
小学生中国梦演讲稿
2014/04/23 职场文书
2014年大学生预备党员思想汇报1000字
2014/09/13 职场文书
证券区域经理岗位职责
2015/04/10 职场文书