vue + 高德地圖路徑規劃的demo

vue+ 高德地圖路徑規劃的demo

官方文檔說明

位置經緯度+ 駕車路線規劃 高德地圖官方參考鏈接

demo:

<template>
  <div id="demo">
    <el-amap vid="amapDemo" :amap-manager="amapManager" :events="mapEvents" class="amap-demo">
    </el-amap>
  </div>
</template>

<script>
  import {
    AMapManager
  } from 'vue-amap';
  import VueAMap from 'vue-amap'
  let amapManager = new VueAMap.AMapManager();
  export default {
    name: "demo",
    data() {
      return {
        amapManager,
        mapEvents: {
          init(o) {
            o.setMapStyle('amap://styles/macaron'); //自定義的高德地圖的樣式，我選的是馬卡龍
            let marker = new AMap.Marker({ //點圖標
              position: [116.379028, 39.865042]
            });
            o.setZoomAndCenter(16, [116.379028, 39.865042])
            marker.setMap(o);
            o.plugin(["AMap.Walking"], function() {
              var driving = new AMap.Walking({
                map: o
              })
              //位置經緯度+ 駕車路線規劃
              //參考連接： https://lbs.amap.com/api/javascript-api/example/driving-route/plan-route-according-to-lnglat
              //官方文檔說明： https://lbs.amap.com/api/javascript-api/reference/route-search#m_AMap.Driving
              // driving.search(new AMap.LngLat(116.379028, 39.865042), new AMap.LngLat(116.427281, 39.903719), function(status, result) {
              //   if (status === 'complete') {
              //     console.log('繪製成功');
              //   } else {
              //     console.log('繪製失敗', result);
              //   }
              // });
              //地點關鍵字+ 駕車路線規劃
              driving.search([{
                  keyword: '北京市地震局(公交站)',
                  city: '北京'
                },
                {
                  keyword: '亦莊文化園(地鐵站)',
                  city: '北京'
                }
              ], function(status, result) {
                // result 即是對應的駕車導航信息，相關數據結構文檔請參考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
                if (status === 'complete') {
                  console.log('繪製駕車路線完成');
                } else {
                  console.log('獲取駕車數據失敗：' + result);
                }
              });
              o.addControl(driving);
            })
          }
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .amap-demo {
    width: 100%;
    height: 100vh;
  }
</style>