vue引入高德地图并实现自定义选择主题/图层

npm下载依赖就不说了，直接附上代码：

<template>
  <div class="all">
    <div id="gao-de-map" class="container">
    </div>
    <div class="changeColoer">
      <el-dropdown size="mini" trigger="click" >
        <el-button class="btn1" >
          切换图层<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="colorChange('normal')">标准地图</el-dropdown-item>
          <el-dropdown-item @click.native="colorChange('macaron')">马卡龙风格</el-dropdown-item>
          <el-dropdown-item @click.native="colorChange('whitesmoke')">远山黛风格</el-dropdown-item>
          <el-dropdown-item @click.native="colorChange('fresh')">草色青风格</el-dropdown-item>
          <el-dropdown-item @click.native="colorChange('light')">月光银风格</el-dropdown-item>
          <el-dropdown-item @click.native="colorChange('satellite')">卫星地图</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>

</template>

<script>
  import AMapLoader from '@amap/amap-jsapi-loader';
  import {
    init
  } from 'echarts';
  window._AMapSecurityConfig = {
    securityJsCode: '你的code'
  }
  export default {
    name: "map",
    data() {
      return {
        map: null, //初始化 map 对象,
        AMap:null,
        layer: '',
        mapConfig: {
          viewMode: "2D", //是否为3D地图模式
          zoom: 13, //初始化地图级别
          center: [116.397428, 39.90923], //初始化地图中心点位置（北京）
          layers: [],
        }
      }
    },
    mounted() {
      //DOM初始化完成进行地图初始化
      this.initMap();
    },
    methods: {
      colorChange(color) {
        if (color === 'satellite') {
          this.layer = new AMap.TileLayer.Satellite()
        }else{
          this.layer = new AMap.TileLayer()
        }
        this.mapConfig.layers.splice(0, 1, this.layer)
        this.map.destroy()
        this.map = new AMap.Map('gao-de-map', this.mapConfig)
        if(color !== 'satellite'){
          var styleName = "amap://styles/" + color;
          this.map.setMapStyle(styleName);
        }
      },
      initMap() {
        AMapLoader.load({
            key: "你的key", // 申请好的Web端开发者Key，首次调用 load 时必填
            // version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: [''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
          }).then((AMap) => {
            this.map = new AMap.Map("gao-de-map", this.mapConfig)
          })
          .catch(e => {
            
          })
      }
    }
  }
</script>

<style>
  .all{
    height: 100%;
    width: 100%;
    position: relative;
    .container {
      width: 100%;
      height: 100%;
    }
    .changeColoer {
      position: absolute;
      bottom: 30px;
      left: 30px;
      z-index: 9999;
      .btn1 {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        width: 90px;
        height: 30px;
      }
    }
  }
  .amap-logo {
    display: none !important;
  }

  .amap-copyright {
    display: none !important;
  }

</style>

记录一下，

另外有个要注意的是：按钮要和地图所用的容器平级，所以我用了一个最外面的div包裹住按钮所在的div和地图所在的div，否则切换卫星地图的时候按钮会消失。！！