微信小程序 高德地图路线规划实现过程详解


Posted in Javascript onAugust 05, 2019

前言

最近项目中做到相关网约车小程序。需要使用到地图中的路线规划,对3种地图进行了分析。这里稍微做一下总结:

  • 百度地图 百度坐标 (BD-09)
  • 腾讯地图 火星坐标(GCJ-02)
  • 高德地图 火星坐标(GCJ-02)

微信小程序中使用的是腾讯地图作为底图。因此如果使用百度地图时,需要注意坐标的转换。此类坐标的转换函数在网上都有,这里不做过多解释

准备工作:

1、在做小程序 ---- 路线规划之前,需要准备小程序APPID 以及相应使用地图的KEY值。

2、微信小程序API 之 位置 API wx.getLocation(OBJECT)、wx.chooseLocation(OBJECT)、wx.openLocation(OBJECT)的相应用法:https://3water.com/article/166968.htm

各地图平台-------小程序开发的官方文档

1、高德地图: 微信小程序-路线规划,地图导航功能基于高德地图API官方文档 https://lbs.amap.com/api/wx/guide/route/route

2、百度地图: 微信小程序JavaScript API ----- http://lbsyun.baidu.com/index.php?title=wxjsapi (百度地图路线规划适用于:android / ios / web,故不适用,排除百度地图)

3、腾讯地图: 微信小程序JavaScript SDK 路线规划 --------- https://lbs.qq.com/qqmap_wx_jssdk/method-direction.html

因此使用高德地图和腾讯地图都可以进行路线规划,通过学习官方文档,了解到其实这两个平台的代码思路是一样的,以下以高德地图为例作详细的说明:

微信小程序 高德地图路线规划实现过程详解

高德地图-路线规划开发:根据官方文档demo进行开发 :https://lbs.amap.com/api/wx/guide/route/route

注意:数组数据在setData时候的使用方法

var markesName = "markers[" + 0 + "].name";
  that.setData({
   [markesName]: name,
  })

注意需要先加载头部的相关文件

var amapFile = require('../../libs/amap-wx.js');
var config = require('../../libs/config.js');

文件config.js

var config = {
 key: '1***********************'
}
module.exports.Config = config;

效果图:

微信小程序 高德地图路线规划实现过程详解

微信小程序 高德地图路线规划实现过程详解

相关代码:

location.js

var amapFile = require('../../libs/amap-wx.js');
var config = require('../../libs/config.js');
const app = getApp()
Page({ 
 /**
 * 页面的初始数据
 */
 data: {
 markers: [{
  iconPath: "../../img/mapicon_navi_s.png",
  id: 0,
  latitude: 39.989643,
  longitude: 116.481028,
  width: 23,
  height: 33
 }, {
  iconPath: "../../img/mapicon_navi_e.png",
  id: 0,
  latitude: 39.90816,
  longitude: 116.434446,
  width: 24,
  height: 34
 }],
 distance: '',
 cost: '',
 state: 0,
 polyline: []
 }, 
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function(options) {
 console.log(11);
 var that = this
 wx.showLoading({
  title: "定位中",
  mask: true
 })
 wx.getLocation({
  type: 'gcj02',
  altitude: true, //高精度定位
  success: function(res) {
  console.info(res);
  var latitude = res.latitude
  var longitude = res.longitude
  var speed = res.speed
  var accuracy = res.accuracy
  that.setData({
   markers: [{
   name: '当前位置',
   latitude: latitude,
   longitude: longitude
   }, {
   name: '您要去哪儿?',
   latitude: '',
   longitude: ''
   }]
  })
  },
  fail: function() {
  wx.showToast({
   title: "定位失败",
   icon: "none"
  })
  }, 
  complete: function() {
  wx.hideLoading()
  }
 })
 },
 getFormAddress: function() {
 var that = this;
 wx.chooseLocation({
  success: function(res) {
  console.log(res);
  var name = res.name
  var address = res.address
  var latitude = res.latitude
  var longitude = res.longitude
  var markesName = "markers[" + 0 + "].name";
  var markesLatitude = "markers[" + 0 + "].latitude";
  var markeslongitude = "markers[" + 0 + "].longitude";
  var markesiconPath = "markers[" + 0 + "].iconPath";
  that.setData({
   [markesName]: name,
   [markesLatitude]: latitude,
   [markeslongitude]: longitude,
   [markesiconPath]: "../../img/mapicon_navi_s.png"
  })
  console.log('address1', that.data);
  },
  fail: function() {
  wx.showToast({
   title: '定位失败',
   icon: "none"
  })
  },
  complete: function() {
  //隐藏定位中信息进度
  wx.hideLoading()
  }
 })
 }, 
 getToAddress: function() {
 var that = this;
 wx.chooseLocation({
  success: function(res) {
  console.log(res);
  var name = res.name
  var address = res.address
  var latitude = res.latitude
  var longitude = res.longitude
  var markesName = "markers[" + 1 + "].name";
  var markesLatitude = "markers[" + 1 + "].latitude";
  var markeslongitude = "markers[" + 1 + "].longitude";
  var markesiconPath = "markers[" + 1 + "].iconPath";
  that.setData({
   [markesName]: name,
   [markesLatitude]: latitude,
   [markeslongitude]: longitude,
   [markesiconPath]: "../../img/mapicon_navi_e.png"
  })
  console.log('address1', that.data);
  },
  fail: function() {
  wx.showToast({
   title: '定位失败',
   icon: "none"
  })
  },
  complete: function() {
  //隐藏定位中信息进度
  wx.hideLoading()
  }
 })
 },
 /**
 * 确定
 */
 getSure: function() {
 var that = this;
 var origin = that.data.markers[0].longitude + ',' + that.data.markers[0].latitude;
 var destination = that.data.markers[1].longitude + ',' + that.data.markers[1].latitude; 
 app.origin = origin;
 app.destination = destination;
 console.log('origin', origin);
 console.log('destination', destination);
 var key = config.Config.key;
 var myAmapFun = new amapFile.AMapWX({
  key: key
 });
 myAmapFun.getDrivingRoute({
  origin: origin,
  destination: destination,
  // origin: '116.481028,39.989643',
  // destination: '116.434446,39.90816',
  success: function(data) {
  var points = [];
  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])
    })
   }
   }
  }
  that.setData({
   state: 1,
   polyline: [{
   points: points,
   color: "#0091ff",
   width: 6
   }]
  });
  if (data.paths[0] && data.paths[0].distance) {
   that.setData({
   distance: data.paths[0].distance + '米'
   });
  }
  if (data.taxi_cost) {
   that.setData({
   cost: '打车约' + parseInt(data.taxi_cost) + '元'
   });
  }
  console.log('that', that);
  }
 })
 },
 /**
 * 详情页
 */
 goDetail: function() {
 var that = this;
 wx.navigateTo({
  url: '../detail/detail'
 })
 } 
}) 

location.wxml

<view class="map_title">
 <view bindtap='getFormAddress'>
 出发地:<input placeholder="出发地" type="text" name="" bindinput="" value='{{markers[0].name}}' />
 </view>
 <view bindtap='getToAddress'>
 目的地:<input placeholder="目的地" type="text" name="" bindinput="" value='{{markers[1].name}}' />
 </view>
 <button bindtap = 'getSure'>确定</button>
</view>
<view wx:if="{{state==1}}">
 <view class="map_box">
 <map id="navi_map" longitude="{{markers[0].longitude}}" latitude="{{markers[0].latitude}}" scale="12" markers="{{markers}}" polyline="{{polyline}}"></map>
 </view>
 <view class="text_box">
 <view class="text">{{distance}}</view>
 <view class="text">{{cost}}</view>
 <view class="detail_button" bindtouchstart="goDetail">详情</view>
 </view>
</view>

location.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_title{
 position:absolute;
 top: 10px;
 bottom: 110px;
 left: 0px;
 right: 0px;
}
.map_btn{
 position:absolute;
 top: 120px;
 bottom: 220px;
 left: 0px;
 right: 0px;
}
.map_box{
 position:absolute;
 top: 160px;
 bottom: 90px;
 left: 0px;
 right: 0px;
}
#navi_map{
 width: 100%;
 height: 100%;
}
.text_box{
 position:absolute;
 height: 90px;
 bottom: 0px;
 left: 0px;
 right: 0px;
}
.text_box .text{
 margin: 15px;
}
.detail_button{
 position:absolute;
 bottom: 30px;
 right: 10px;
 padding: 3px 5px;
 color: #fff;
 background: #0091ff;
 width:50px;
 text-align:center;
 border-radius:5px;
}

点击详情跳转页,显示导航详细说明:

detail.js

var amapFile = require('../../libs/amap-wx.js');
var config = require('../../libs/config.js');
const app = getApp()
Page({
 data: {
 steps: {}
 },
 onLoad: function () {
 var that = this;
 var key = config.Config.key;
 var myAmapFun = new amapFile.AMapWX({ key: key });
 myAmapFun.getDrivingRoute({
  origin: app.origin,
  destination: app.destination,
  success: function (data) {
  if (data.paths && data.paths[0] && data.paths[0].steps) {
   that.setData({
   steps: data.paths[0].steps
   });
  }
  },
  fail: function (info) {
  }
 })
 }
})

detail.wxml

<view class="text_box" wx:for="{{steps}}" wx:for-item="i" wx:key="j">
 {{i.instruction}}
</view>

这只是个人的一个demo用例。仅做参考。其中还有很多瑕疵,不要介意哈。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
双击滚屏-常用推荐
Nov 29 Javascript
谷歌浏览器 insertCell与appendChild的区别
Feb 12 Javascript
JQery 渐变图片导航效果代码 漂亮
Jan 01 Javascript
js防止表单重复提交实现代码
Sep 05 Javascript
JS截取url中问号后面参数的值信息
Apr 29 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
Sep 12 Javascript
Angular项目如何升级至Angular6步骤全纪录
Sep 03 Javascript
VUE项目中加载已保存的笔记实例方法
Sep 14 Javascript
vue实现图片上传预览功能
Dec 23 Javascript
JS表格的动态操作完整示例
Jan 13 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
Jul 07 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
Nov 09 Javascript
详解将微信小程序接口Promise化并使用async函数
Aug 05 #Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 #Javascript
使用apifm-wxapi快速开发小程序过程详解
Aug 05 #Javascript
浅谈Vue项目骨架屏注入实践
Aug 05 #Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
Aug 05 #Javascript
JS 自执行函数原理及用法
Aug 05 #Javascript
jQuery提示框插件SweetAlert用法分析
Aug 05 #jQuery
You might like
jquery获取多个checkbox的值异步提交给php的方法
2015/06/24 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
php7下的filesize函数
2019/09/30 PHP
php如何实现数据库的备份和恢复
2020/11/30 PHP
js或css实现滚动广告的几种方案
2010/01/28 Javascript
JavaScrip单线程引擎工作原理分析
2010/09/04 Javascript
JS分割字符串并放入数组的函数
2011/07/04 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
用Move.js配合创建CSS3动画的入门指引
2015/07/22 Javascript
jQuery焦点图轮播特效代码分享(3款)
2015/09/05 Javascript
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
jquery插件格式实例分析
2016/06/16 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
2017/11/09 Javascript
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
Python实现的下载8000首儿歌的代码分享
2014/11/21 Python
Python base64编码解码实例
2015/06/21 Python
python使用pymysql实现操作mysql
2016/09/13 Python
好的Python培训机构应该具备哪些条件
2018/05/23 Python
Python import与from import使用及区别介绍
2018/09/06 Python
Python实现常见的回文字符串算法
2018/11/14 Python
python整小时 整天时间戳获取算法示例
2019/02/20 Python
python匿名函数用法实例分析
2019/08/03 Python
3种python调用其他脚本的方法
2020/01/06 Python
Keras-多输入多输出实例(多任务)
2020/06/22 Python
css3中less实现文字长阴影(long shadow)
2020/04/24 HTML / CSS
贝玲妃英国官网:Benefit英国
2018/02/03 全球购物
创造美妙香氛体验:Aera扩散器和香水
2018/11/25 全球购物
给导游的表扬信
2014/01/10 职场文书
幼儿园毕业家长感言
2014/02/10 职场文书
五一活动标语
2014/06/30 职场文书
2014高中生入党思想汇报范文
2014/09/13 职场文书
幼儿园大班见习报告
2014/10/31 职场文书
班主任经验交流材料
2014/12/16 职场文书
教你用Java在个人电脑上实现微信扫码支付
2021/06/13 Java/Android
JavaScript实现酷炫的鼠标拖尾特效
2022/02/18 Javascript