vue-amap中添加高德地圖地圖的自定義樣式

vue-amap中添加高德地圖地圖的自定義樣式

高德地圖的自定義樣式列表：
使用： amap://styles/+ 樣式的名稱
如： 使用標準顏色
amap://styles/normal
依次類推

• 標準
  normal

• 幻影黑
  dark

• 月光銀
  light

• 遠山黛
  whitesmoke

• 草色青
  fresh

• 雅士灰
  grey

• 塗鴉
  graffiti

• 馬卡龍
  macaron

• 靛青藍
  blue

• 極夜藍
  darkblue

• 醬籽
  wine

vue中：

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

script :

<script>
  import {
    AMapManager
  } from 'vue-amap';
  import VueAMap from 'vue-amap'
  let amapManager = new VueAMap.AMapManager();

  export default {
      name: "",
      data() {
          return {
            amapManager,
            mapEvents: {
                init(o) {
                     o.setMapStyle('amap://styles/macaron');//自定義的高德地圖的樣式，我選的是馬卡龍
                       
               }
          }
        }
     }
 }

添加高德原生的點圖標和路線規劃的插件：
在mapEvents中添加：

   mapEvents: {
      init(o) {
          let marker = new AMap.Marker({ //點圖標
              position: [121.59996, 31.197646]
           });
          marker.setMap(o);
         o.plugin(["AMap.Walking "], function() {
              var driving = new AMap.Walking({
                map: o,
                showTraffic: false,//去掉實時路況
                autoFitView: true, 
                // 駕車路線規劃策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
                policy: AMap.DrivingPolicy.LEAST_TIME
              })
              o.addControl(driving);
         })
    }
} 

更多關於路線規劃的屬性參考官網API：

路線規劃