高德地图(vue2项目)-工具控件使用

<template>
  <div>
    <!-- -->
    <div id="container"></div>
    <div class="traffic">
      <button @click="showTraffic">展示实时交通图层</button>
      <button @click="hideTraffic">隐藏实时交通图层</button>
    </div>
  </div>
</template>

<script>
// 引入地图插件
import AMapLoader from "@amap/amap-jsapi-loader";
// 设置秘钥
window._AMapSecurityConfig = {
  securityJsCode: "秘钥",
};
export default {
  name: "GaodeMapContainer",
  data() {
    return {
      map: null, //
      traffic: null, // 实时交通
    };
  },

  mounted() {
    this.initData();
  },

  methods: {
    // 1. 展示地图
    async initData() {
      const AMap = await AMapLoader.load({
        key: "key", //申请好的Web端开发者key，调用 load 时必填
        version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.ToolBar", // 缩放控件
          "AMap.ControlBar", //方向控件
          "AMap.MapType", // 图层切换控件
          "AMap.Scale", // 比例尺控件
          "AMap.HawkEye", // 鹰眼控件
          "AMap.Geolocation", // 定位控件
        ], // 引入地图控件
      });
      // 3-1. 展示图层--创建图层
      const layer = new AMap.createDefaultLayer({
        zooms: [3, 20], //可见级别
        visible: true, //是否可见
        opacity: 1, //透明度
        zIndex: 0, //叠加层级
      });
      // 2.初始化地图-把地图展示到指定的容器区域内
      this.map = new AMap.Map("container", {
        viewMode: "2D", //默认使用 2D 模式，平面模式
        zoom: 11, //地图级别
        center: [116.397428, 39.90923], //地图中心点
        mapStyle: "amap://styles/normal", //设置地图的显示样式
        layers: [layer], //layer为创建的默认图层3-2:展示图层
      });
      // 4. 创建实时交通图层
      this.traffic = new AMap.TileLayer.Traffic({
        autoRefresh: true, //是否自动刷新，默认为false
        interval: 180, //刷新间隔，默认180s
      });
      this.map.add(this.traffic); //通过add方法添加图层
      // 工具-缩放
      const toolbar = new AMap.ToolBar(); //缩放工具条实例化
      this.map.addControl(toolbar);
      // 工具方向盘
      const controlBar = new AMap.ControlBar();
      this.map.addControl(controlBar);
      // 工具-图层切换控件
      const mapType = new AMap.MapType();
      this.map.addControl(mapType);
      // 工具-比例尺
      const scale = new AMap.Scale();
      this.map.addControl(scale);
      // 工具-鹰眼控件
      const hawkEye = new AMap.HawkEye();
      this.map.addControl(hawkEye);
      // 工具-定位控件
      const geolocation = new AMap.Geolocation();
      this.map.addControl(geolocation);
    },
    // 4-2 展示实时交通
    showTraffic() {
      this.traffic.show();
    },
    // 4-3 隐藏实时交通
    hideTraffic() {
      this.traffic.hide();
    },
    // 5- 添加地图控件
  },
};
</script>
<style scoped>
#container {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  min-height: 800px;
  background: pink;
}
.traffic {
  position: fixed;
  left: 10px;
  top: 10px;
  width: 200px;
  height: 100px;
}
</style>
>