微信小程序之高德地圖多點路線規劃

時間  2021-01-19
標籤 html git web 算法 小程序 微信小程序 api 數組 微信 微信開發 欄目 HTML 简体版
原文   原文鏈接

目錄以下：html

調用git

兩點之間的導航web

多點路線規劃算法

 

調用

如何調用高德api？小程序

高德官方給出的https://lbs.amap.com/api/wx/summary/開放文檔比較詳細：微信小程序

第一步，註冊高德開發者api

第二部，去控制檯建立應用數組

img

即點擊右上角的控制平臺建立應用微信

img建立應用綁定服務記得選擇微信小程序；同時在https://lbs.amap.com/api/wx/gettingstarted中下載開發包微信開發

第三步，登錄微信公衆平臺在開發設置中將高德域名配置上

第四步，打開微信開發者工具，打開微信小程序，在項目中新建一個libs文件夾

將在高德官網上下載獲得的開發包解壓，將其中的 amap-wx.js 文件放在libs文件夾下

img

 

 

同時建立config.js

var config = {
  key:'請在此填入你申請的key'
}
module.exports.Config = config;

 

在其餘界面js部分中便可調用高德api

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

 

兩點之間的導航

這是實現多點路線規劃的基礎，很是重要！！！

實現效果

img

 

img

 

 

 

 

以駕車爲例，注：界面使用的是colorui

wxml部分：

<scroll-view scroll-x class="bg-white nav text-center">
  <view class="cu-item {{index==TabCur?'text-blue cur':''}}" wx:for="{{4}}" wx:key bindtap="tabSelect" data-id="{{index}}">
    {{method[index]}}
  </view>
</scroll-view>
<view class="map">
 <view bindtap='getFormAddress'>
  <view class="cu-form-group">
    <view class="title">出發地</view>
    <input placeholder="出發地" type="text" name="" bindinput="" value='{{markers[0].name}}' />
  </view>
 </view>
 <view bindtap='getToAddress'>
  <view class="cu-form-group">
    <view class="title">目的地</view>
    <input placeholder="目的地" type="text" name="" bindinput="" value='{{markers[1].name}}' />
  </view>
 </view>
​
  <view class="flex" wx:if="{{TabCur==0||TabCur==1}}">
    <button class="cu-btn bg-blue lg" bindtap = 'getSure'>肯定</button>
  </view>
​
</view>
<view>
  <view class="map_box" wx:if="{{TabCur==0}}">
    <map id="navi_map" longitude="{{markers[0].longitude}}" latitude="{{markers[0].latitude}}" scale="12" markers="{{markers}}" polyline="{{polyline}}"></map>
  </view>
  <view class="text_box" wx:if='{{TabCur==0}}'>
    <view class="text">{{distance}}</view>
    <view class="text">{{cost}}</view>
    <view class="detail_button" bindtouchstart="goDetail" wx:if="{{state==1}}">詳情</view>
  </view>
</view>

 

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,
 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部分：

.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: 150px;
  bottom: 220px;
  left: 0px;
  right: 0px;
 }
 .map_box{
  position:absolute;
  top: 187px;
  bottom: 70px;
  left: 0px;
  right: 0px;
 }
 #navi_map{
  width: 100%;
  height: 100%;
 }
 .text_box{
  
  position:absolute;
  height: 70px;
  bottom: 0px;
  left: 0px;
  right: 0px;
 }
 .text_box .text{
  margin: 15px;
 }

 

詳情頁部分：

html部分：

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

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) {
  }
 })
 }
})

 

wxss部分：

Page{

}
.text_box{
  margin: 0 15px;
  padding: 15px 0;
  border-bottom: 1px solid #c3c3c3;
  font-size: 13px;
}
.text_box .text_item{display:inline-block;line-height: 8px;}

 


​

其餘公交、騎行、步行方法與駕車相似，能夠查看高德開放文檔學習

個人設計上公交能夠查看不一樣城市的公交路線，而非只能查看一個城市的，實現很簡單，在界面上添加了一個選擇器城市參數傳至city，便可查看不一樣城市的公交路線

img

多點路線規劃

實現效果：能夠選擇出發地，選擇不一樣的景點，根據不一樣的出行方式給出一條距離最短的路徑

實現思路：

  • 獲取到周邊的景點位置等相關信息

  • 將用戶添加的景點信息傳到下一個頁面進行計算

  • 得到全部可能的路線並計算每一條路線的長度找出距離最短的一條

踩坑

  • 一開始打算利用深度優先搜索算法實現，可是發如今現實的地圖中，任意兩點之間幾乎都存在路，並不像抽象後的數學題同樣。因而最後使用了全排列的方法獲取到了全部的路線。

  • 在全排列的過程當中須要遞歸調用函數，涉及到傳參問題，須要將自定義的帶參函數寫在Page外，寫在Page裏的話，我嘗試了不少方式調用函數都會報錯。

  • 在使用高德api獲取路徑的函數後，沒法計算每一段路線的長度，最後發現是在函數調用的過程當中，存儲路線距離的數組只是暫存的，在函數調用後沒法使用該數組來計算距離。因而最後我在函數調用的過程當中計算每一條路線的長度並進行比較，最後用this.setData的方法將最後獲得的路線展現在界面上。

具體實現

  • 獲取出發地、出行方式並賦值給全局變量傳遞掉下一個界面，如app.origin = origin。

  • 利用getPoiAround函數獲取到周邊的景點信息，querykeywords能夠固定設置爲景區，將返回的前二十條景區信息展現在界面上。

  • 將用戶選擇的景點信息存入數組並傳遞到下一個界面進行計算。

  • 利用全排列獲取到全部可能的路線並去重。

  • 計算每一條路線的長度並找到最小的一條將其展現在界面上。

注：獲取到每一條路線距離的方法和獲取到兩個地點之間不一樣出行方式路線的方法在前面兩點之間的導航部分，多點之間的路線導航其實就是將多個兩點之間的路線導航連在了一塊兒。先將前面的兩點之間的不一樣出行方式導航實現後，改動細微的部分，再加入全排列的算法和大小比較的算法便可實現，在此就不貼出源碼。

但願個人思路能給予你啓發~

可優化部分

  • querykeywords能夠設置爲讓用戶選擇不一樣的標籤，如：戶外、娛樂、美食、賓館等等。

  • 可以讓用戶選擇不一樣標籤的地點將其存入數組計算一條出行的最短路徑。

  • 能夠在最終的展現界面顯示地圖讓用戶更直觀地查看各個地點之間的方位及距離信息。

  • 最優導航形式：實時導航。

注：以上四條是我暫時想到的可優化的部分，算是給本身挖了一個坑，等我填完來這裏寫個實現方式。

本人仍是個菜雞，上述實現方式若有不足之處還但願大佬能不吝賜教~

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程