Vue - 使用高德API加载一个地图

一. 在最外层的html.js中引入高德key

二.组件中加载高德地图

<template>
  <div class="wrap">
    <div id="map"></div>
  </div>
</template>

<script>
let map = null;
export default {
  data() {
    return {};
  },
  mounted() {
    this.getMap();
  },
  methods: {
    getMap() {
      map = new AMap.Map("map", {
        mapStyle: "amap://styles/fresh", //设置地图的显示样式
        zoom: 13, //设置地图显示的缩放级别
        center: [118.735995, 32.0219131], //设置地图中心点坐标
        viewMode: "2D", //设置地图模式
        lang: "zh_cn", //设置地图语言类型
        // layers: [//设置图层,可设置成包含一个或多个图层的数组
        //     new AMap.TileLayer.Satellite(),
        //     new AMap.TileLayer.RoadNet()
        // ],
      });
      /**
       * 实时路况图层
       */
      var trafficLayer = new AMap.TileLayer.Traffic({
        zIndex: 10,
      });
      //添加图层到地图
      map.add(trafficLayer);
    },
  },
};
</script>

<style scoped>
#map {
  width: 1080px;
  height: 750px;
}
</style>