Vue+高德高精度定位&IP定位+高德位置經緯度貨車路線規劃，實作實時路線規劃

功能實作：實時擷取目前位置，并規劃到目的地的路線

實作思路：

1、定位目前位置，先精确定位，若精确定位失敗則使用IP定位

2、渲染地圖，規劃路線

3、重新整理目前位置，重新渲染路線規劃

一、引入高德地圖

在高德開放平台https://lbs.amap.com/api/javascript-api/guide/abc/prepare注冊開發者賬号并申請高德地圖key

高德各種demo的位址為https://lbs.amap.com/api/javascript-api/example/map-lifecycle/map-show

在index.html檔案中引入

<script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.15&key=“這裡是你申請的key”'></script>
           

在webpack.base.conf.js中添加

externals: {
  'AMap': 'AMap'
}
           

在應用定位的.vue檔案中添加

import AMap from 'AMap'
           

二、實作

var start   // 目前位置
var end     // 目的地
var path = [] // 路徑對象數組
created () {
  // 初始
  // 傳入目的地，擷取目的地的經緯度  
  // end = 目的地經緯度
  this.getGeocode('深圳', '深圳市寶安區翻身地鐵')
  // 定位目前位置，先精确定位，若精确定位失敗在調用IP定位 self.getLngLatLocation()
  // start= 目前位置經緯度
  //定位成功，start不為空後并在該函數調用路線規劃函數 
  //self.mapView()
  this.getLocation()
},
mounted () {
  //調用路線規劃函數來繪制底層地圖，使created中初始getLocation()定位未完成時，頁面不會一片空白
  this.mapView()
  // 設定定時器，每分鐘擷取一次目前位置 
  if (this.timer) { 
  clearInterval(this.timer)
  } else {
    this.timer = setInterval(() => {
      this.getLocation() / 定位目前位置 // start= 目前位置經緯度//并在該函數中調用路線規劃函數 self.mapView()
      console.log('重新整理了')
    }, 60 * 1000)
  }
},
beforeDestroy () {
  // 頁面銷毀時，清除定時器
  clearInterval(this.timer)
}
           

三、具體函數

路線規劃函數

mapView () {
  var map = new AMap.Map('mapContainer', {})
  var truckOptions = {
    map: map,
    policy: 0,
    size: 1,
    city: 'beijing',
    panel: 'panel'
  }
  var driving
  AMap.plugin('AMap.TruckDriving', function () { // 異步
    driving = new AMap.TruckDriving(truckOptions)
    path = [
      {lnglat: start},
      {lnglat: end}
    ]
    console.log(path)
    if (path) {
      driving.search(path, function (status, result) { // result即是對應的貨車導航資訊
        if (status === 'complete') {
          console.log('success')// log.success('繪制貨車路線完成')
        } else {
          console.log('error' + result) // log.error('擷取貨車規劃資料失敗：' + result)
        }
      })
    }
  })
}
           

精确定位函數

getLocation () {
  const self = this
  AMap.plugin('AMap.Geolocation', function () {
    var geolocation = new AMap.Geolocation({
      // 是否使用高精度定位，預設：true
      enableHighAccuracy: true,
      // 設定定位逾時時間，預設：無窮大
      timeout: 10000
    })

    geolocation.getCurrentPosition()
    AMap.event.addListener(geolocation, 'complete', onComplete)
    AMap.event.addListener(geolocation, 'error', onError)

    function onComplete (result) { // data是具體的定位資訊
      console.log('定位成功資訊：', result)
      start = result.position
      // path.push({lnglat: [data.position.lng, data.position.lat]})
      if (data.formattedAddress) {
        document.getElementById('id').innerText = data.formattedAddress
      }
      self.mapView()
    }
    function onError (data) {
      // 定位出錯
      // document.getElementById('id').innerText = '定位失敗，請稍後重試'
      console.log('精确定位失敗錯誤：', data)
      // 調用ip定位
      self.getLngLatLocation()
    }
  })
}
           

優先使用精确定位，當精确定位失敗時，調用IP定位

IP定位函數

getLngLatLocation () {
  AMap.plugin('AMap.CitySearch', function () {
    var citySearch = new AMap.CitySearch()
    citySearch.getLocalCity(function (status, result) {
      if (status === 'complete' && result.info === 'OK') {
        // 查詢成功，result即為目前所在城市資訊
        console.log('通過ip擷取目前城市：', result)
        start = result.bounds.kc
        console.log('kc', result.bounds.kc)
        // 逆向地理編碼
        var lnglat = result.rectangle.split(';')[0].split(',')
        AMap.plugin('AMap.Geocoder', function () {
          var geocoder = new AMap.Geocoder({
            city: result.adcode // city 指定進行編碼查詢的城市，支援傳入城市名、adcode 和 citycode
          })
          geocoder.getAddress(lnglat, function (status, data) {
            if (status === 'complete' && data.info === 'OK') { // result為對應的地理位置詳細資訊
              document.getElementById('id').innerText = data.regeocode.formattedAddress
            }
          })
        })
      }
    })
    self.mapView()
  })
}
           

逆向地理編碼函數，将具體中文位址轉換為經緯度

逆向地理編碼函數

getGeocode (city, detail) {
  return AMap.plugin('AMap.Geocoder', function () {
    var geocoder = new AMap.Geocoder({
      // city 指定進行編碼查詢的城市，支援傳入城市名、adcode 和 citycode
      city: city
    })
    geocoder.getLocation(detail, function (status, result) {
      if (status === 'complete' && result.info === 'OK') {
        // result中對應詳細地理坐标資訊
        end = result.geocodes[0].location
      }
    })
  })
}
           

四、其他說明

精确定位的經緯度資料在傳回的result中的position中

start=result.position

IP定位傳回的經緯度資料在傳回的result中的bounds.kc中

start=result.bounds.kc

在網頁測試時精确定位并不精确，可以在手機上測試，系統會請求調用GPS定位

手機測試的方法可以看：webstorm開發的Vue項目在手機調試以及打包成apk

https://blog.csdn.net/qq_41836598/article/details/96152485

規劃的結果，有圖檔和文字說明

高德各種demo的位址為https://lbs.amap.com/api/javascript-api/example/map-lifecycle/map-show

我做的時候把文字說明的div删除了

感謝參考

https://lbs.amap.com/api/javascript-api/example/driving-route/plan-route-according-to-lnglat

https://lbs.amap.com/api/javascript-api/example/location/get-city-name-by-ip-location

https://blog.csdn.net/qq_42817227/article/details/98303058