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：

路线规划