• 售前

  • 售后

热门帖子
入门百科

微信小程序之高德舆图多点门路规划过程示例详解

[复制链接]
123457176 显示全部楼层 发表于 2021-10-25 19:51:23 |阅读模式 打印 上一主题 下一主题
调用

如何调用高德api?
高德官方给出的https://lbs.amap.com/api/wx/summary/开放文档比力具体:
第一步,注册高德开发者
第二部,去控制台创建应用

即点击右上角的控制平台创建应用

创建应用绑定服务记得选择微信小步调;同时在https://lbs.amap.com/api/wx/gettingstarted中下载开发包

第三步,登岸微信公众平台在开发设置中将高德域名设置上
https://restapi.amap.com
第四步,打开微信开发者工具,打开微信小步调,在项目中新建一个libs文件夹
将在高德官网上下载得到的开发包解压,将其中的 amap-wx.js 文件放在libs文件夹下

同时创建config.js
  1. var config = {
  2. key:'请在此填入你申请的key'
  3. }
  4. module.exports.Config = config;
复制代码
在其他界面js部门中即可调用高德api
  1. var amapFile = require('../../libs/amap-wx.js');
  2. var config = require('../../libs/config.js');
复制代码
两点之间的导航

这是实现多点蹊径规划的根本,非常重要!!!
实现效果


以驾车为例,注:界面使用的是colorui
wxml部门:
  1. <scroll-view scroll-x class="bg-white nav text-center">
  2. <view class="cu-item {{index==TabCur?'text-blue cur':''}}" wx:for="{{4}}" wx:key bindtap="tabSelect" data-id="{{index}}">
  3. {{method[index]}}
  4. </view>
  5. </scroll-view>
  6. <view class="map">
  7. <view bindtap='getFormAddress'>
  8. <view class="cu-form-group">
  9. <view class="title">出发地</view>
  10. <input placeholder="出发地" type="text" name="" bindinput="" value='{{markers[0].name}}' />
  11. </view>
  12. </view>
  13. <view bindtap='getToAddress'>
  14. <view class="cu-form-group">
  15. <view class="title">目的地</view>
  16. <input placeholder="目的地" type="text" name="" bindinput="" value='{{markers[1].name}}' />
  17. </view>
  18. </view>
  19. <view class="flex" wx:if="{{TabCur==0||TabCur==1}}">
  20. <button class="cu-btn bg-blue lg" bindtap = 'getSure'>确定</button>
  21. </view>
  22. </view>
  23. <view>
  24. <view class="map_box" wx:if="{{TabCur==0}}">
  25. <map id="navi_map" longitude="{{markers[0].longitude}}" latitude="{{markers[0].latitude}}" scale="12" markers="{{markers}}" polyline="{{polyline}}"></map>
  26. </view>
  27. <view class="text_box" wx:if='{{TabCur==0}}'>
  28. <view class="text">{{distance}}</view>
  29. <view class="text">{{cost}}</view>
  30. <view class="detail_button" bindtouchstart="goDetail" wx:if="{{state==1}}">详情</view>
  31. </view>
  32. </view>
复制代码
js部门:
  1. var amapFile = require('../../libs/amap-wx.js');
  2. 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, method:['驾车','公交','骑行','步行'], index:0, TabCur:0, polyline: [], transits: [] },  /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { 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() } }) }, //选择器改变函数 tabSelect(e) { this.setData({ TabCur: e.currentTarget.dataset.id, scrollLeft: (e.currentTarget.dataset.id - 1) * 60 })},//获取出发地 getFormAddress: function() { var that = this; wx.chooseLocation({ success: function(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" }) }, 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" }) }, 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; //目标地var TabCur=this.data.TabCur;app.origin = origin;app.destination = destination;var key = config.Config.key;var myAmapFun = new amapFile.AMapWX({ key: key }); if(TabCur==0){  myAmapFun.getDrivingRoute({//获取驾车蹊径  origin: origin,  destination: destination,  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) + '元'  });  }  } }) } },/** * 详情页 */goDetail: function() {  var TabCur=this.data.TabCur;  if(TabCur==0){  wx.navigateTo({  url: '../detail/detail'  }) } },})
复制代码
wxss部门:
  1. .flex-style{
  2. display: -webkit-box;
  3. display: -webkit-flex;
  4. display: flex;
  5. }
  6. .flex-item{
  7. height: 35px;
  8. line-height: 35px;
  9. text-align: center;
  10. -webkit-box-flex: 1;
  11. -webkit-flex: 1;
  12. flex: 1
  13. }
  14. .flex-item.active{
  15. color:#0091ff;
  16. }
  17. .map_title{
  18. position:absolute;
  19. top: 10px;
  20. bottom: 110px;
  21. left: 0px;
  22. right: 0px;
  23. }
  24. .map_btn{
  25. position:absolute;
  26. top: 150px;
  27. bottom: 220px;
  28. left: 0px;
  29. right: 0px;
  30. }
  31. .map_box{
  32. position:absolute;
  33. top: 187px;
  34. bottom: 70px;
  35. left: 0px;
  36. right: 0px;
  37. }
  38. #navi_map{
  39. width: 100%;
  40. height: 100%;
  41. }
  42. .text_box{
  43. position:absolute;
  44. height: 70px;
  45. bottom: 0px;
  46. left: 0px;
  47. right: 0px;
  48. }
  49. .text_box .text{
  50. margin: 15px;
  51. }
复制代码
详情页部门:
html部门:
  1. <view class="text_box" wx:for="{{steps}}" wx:for-item="i" wx:key="j">
  2. {{i.instruction}}
  3. </view>
复制代码
js部门:
  1. var amapFile = require('../../libs/amap-wx.js');
  2. 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) { } }) }})
复制代码
wxss部门:
  1. Page{
  2. }
  3. .text_box{
  4. margin: 0 15px;
  5. padding: 15px 0;
  6. border-bottom: 1px solid #c3c3c3;
  7. font-size: 13px;
  8. }
  9. .text_box .text_item{display:inline-block;line-height: 8px;}
复制代码
其他公交、骑行、步行方法与驾车类似,可以查看高德开放文档学习
我的计划上公交可以查看差别都会的公交蹊径,而非只能查看一个都会的,实现很简朴,在界面上添加了一个选择器都会参数传至city,即可查看差别都会的公交蹊径

多点蹊径规划

实现效果:可以选择出发地,选择差别的景点,根据差别的出行方式给出一条距离最短的路径

实现思绪:
      
  • 获取到周边的景点位置等相干信息  
  • 将用户添加的景点信息传到下一个页面进行计算  
  • 获得全部可能的蹊径并计算每一条蹊径的长度找出距离最短的一条
踩坑
      
  • 一开始打算利用深度优先搜刮算法实现,但是发现在实际的地图中,任意两点之间险些都存在路,并不像抽象后的数学题一样。于是最后使用了全分列的方法获取到了全部的蹊径。  
  • 在全分列的过程中需要递归调用函数,涉及到传参题目,需要将自界说的带参函数写在Page外,写在Page里的话,我尝试了许多方式调用函数都会报错。  
  • 在使用高德api获取路径的函数后,无法计算每一段蹊径的长度,最后发现是在函数调用的过程中,存储蹊径距离的数组只是暂存的,在函数调用后无法使用该数组来计算距离。于是最后我在函数调用的过程中计算每一条蹊径的长度并进行比力,最后用this.setData的方法将最后得到的蹊径展示在界面上。
具体实现
      
  • 获取出发地、出行方式并赋值给全局变量传递掉下一个界面,如
    1. app.origin = origin
    复制代码
    。  
  • 利用
    1. getPoiAround
    复制代码
    函数获取到周边的景点信息,
    1. querykeywords
    复制代码
    可以固定设置为景区,将返回的前二十条景区信息展示在界面上。  
  • 将用户选择的景点信息存入数组并传递到下一个界面进行计算。  
  • 利用全分列获取到全部可能的蹊径并去重。  
  • 计算每一条蹊径的长度并找到最小的一条将其展示在界面上。
注:获取到每一条蹊径距离的方法和获取到两个所在之间差别出行方式蹊径的方法在前面两点之间的导航部门,多点之间的蹊径导航其实就是将多个两点之间的蹊径导航连在了一起。先将前面的两点之间的差别出行方式导航实现后,改动眇小的部门,再到场全分列的算法和大小比力的算法即可实现,在此就不贴出源码。
希望我的思绪能给予你启发~
可优化部门
      
    1. querykeywords
    复制代码
    可以设置为让用户选择差别的标签,如:户外、娱乐、美食、宾馆等等。  
  • 可让用户选择差别标签的所在将其存入数组计算一条出行的最短路径。  
  • 可以在终极的展示界面表现地图让用户更直观地查看各个所在之间的方位及距离信息。  
  • 最优导航情势:及时导航。
注:以上四条是我临时想到的可优化的部门,算是给自己挖了一个坑,等我填完来这里写个实现方式。
到此这篇关于微信小步调之高德地图多点蹊径规划过程示例详解的文章就先容到这了,更多相干高德地图多点蹊径规划内容请搜刮草根技能分享从前的文章或继续浏览下面的相干文章希望大家以后多多支持草根技能分享!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作