微信小程序使用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 TO HTML 转换
Jun 26 Javascript
JS写的数字拼图小游戏代码[学习参考]
Oct 29 Javascript
在js中单选框和复选框获取值的方式
Nov 06 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
jQuery基础语法实例入门
Dec 23 Javascript
js简单时间比较的方法
Aug 02 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
Dec 16 Javascript
jQuery实现链接的title快速出现的方法
Feb 20 Javascript
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
微信小程序一周时间表功能实现
Oct 17 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
Mar 16 Javascript
JavaScript缺少insertAfter解决方案
Jul 03 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
php中{}大括号是什么意思
2013/12/01 PHP
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
php高清晰度无损图片压缩功能的实现代码
2018/12/09 PHP
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
浅析node.js中close事件
2014/11/26 Javascript
jquery中one()方法的用法实例
2015/01/16 Javascript
DOM操作一些常用的属性汇总
2015/03/13 Javascript
jquery validate表单验证的基本用法入门
2016/01/18 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
2016/05/26 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
2018/03/29 Javascript
es6新特性之 class 基本用法解析
2018/05/05 Javascript
[01:51]历届DOTA2国际邀请赛举办地回顾 TI9落地上海
2018/08/26 DOTA
python 快速排序代码
2009/11/23 Python
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
Python中splitlines()方法的使用简介
2015/05/20 Python
python编写Logistic逻辑回归
2020/12/30 Python
使用Python+Splinter自动刷新抢12306火车票
2018/01/03 Python
python with提前退出遇到的坑与解决方案
2018/01/05 Python
几个适合python初学者的简单小程序,看完受益匪浅!(推荐)
2019/04/16 Python
使用Python实现跳一跳自动跳跃功能
2019/07/10 Python
python自动生成model文件过程详解
2019/11/02 Python
python简单利用字典破解zip文件口令
2020/09/07 Python
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
美国轮胎网站:Priority Tire
2018/11/28 全球购物
耐克亚太地区:Nike APAC
2019/12/07 全球购物
SQL Server提供的3种恢复模型都是什么? 有什么区别?
2012/05/13 面试题
期中考试反思800字
2014/05/01 职场文书
关于运动会的广播稿
2014/09/22 职场文书
房屋过户委托书范本
2014/10/07 职场文书
煤矿百日安全活动总结
2015/05/07 职场文书
创业计划书之校园跑腿公司
2019/09/24 职场文书
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫