1. npm install amap --save

2. 在index.html中寫入

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.4&key=f447aabbe4424273395c076040a34b9e&plugin=AMap.Geocoder&plugin=AMap.Autocomplete&plugin=AMap.PolyEditor"></script>

3. vue.config.js中寫入

configureWebpack: {
  externals: {
    "AMap": "AMap"
  }
}
解決AMap報錯：AMap undefined報錯

4. 新建myMap.vue

<template>
  <div>
    <div id="mapContainer"></div>
  </div>
</template>

<style>
#mapContainer {
  width: 500px;
  height: 500px;
  background-color: #ffffff;
  margin: 50px;
}
</style>
<script>
import AMap from "AMap";

export default {
  data() {
    return {
      infoWindow: ""
    };
  },
  mounted() {
    this.showMap();
  },
  methods: {
    showMap() {
      let map = new AMap.Map("mapContainer", {
        resizeEnable: true,
        center: [104.037969, 30.521942],
        zoom: 13
      });

      // 座標點
      let marker = new AMap.Marker({
        position: new AMap.LngLat(104.037969, 30.521942), // 經緯度物件，也可以是經緯度構成的一維陣列[116.39, 39.9]
        title: "北京"
      });

      // 將建立的點標記新增到已有的地圖例項：
      map.add(marker);
      // 同時引入工具條外掛，比例尺外掛和鷹眼外掛
      AMap.plugin(
        [
          "AMap.ToolBar",
          "AMap.Scale",
          "AMap.OverView",
          "AMap.MapType",
          "AMap.Geolocation"
        ],
        function() {
          // 在圖面新增工具條控制元件，工具條控制元件集成了縮放、平移、定位等功能按鈕在內的組合控制元件
          map.addControl(new AMap.ToolBar());

          // 在圖面新增比例尺控制元件，展示地圖在當前層級和緯度下的比例尺
          map.addControl(new AMap.Scale());

          // 在圖面新增鷹眼控制元件，在地圖右下角顯示地圖的縮圖
          map.addControl(new AMap.OverView({ isOpen: true }));

          // 在圖面新增類別切換控制元件，實現預設圖層與衛星圖、實施交通圖層之間切換的控制
          map.addControl(new AMap.MapType());

          // 在圖面新增定位控制元件，用來獲取和展示使用者主機所在的經緯度位置
          map.addControl(new AMap.Geolocation());
        }
      );
　　　　// 這裡是資訊窗體，不需要可以刪除
      this.infoWindow = new AMap.InfoWindow({
        isCustom: true, //使用自定義窗體
        content: this.createInfoWindow("服務區", ""),
        offset: new AMap.Pixel(16, -25)
      });
      marker.on("mouseover", e => {
        this.infoWindow.setContent(
          this.createInfoWindow(e.target.name,)
        );
        // console.log('markerMouseOver',e)
        this.infoWindow.open(map, e.target.getPosition());
      });
      // marker.on("mouseout", e => {
      //   map.clearInfoWindow();
      // });
      marker.on("click", e => {
        console.log(111, e);
        this.infoWindow.setContent(
          this.createInfoWindow(e.target.name,)
        );
      });
      marker.emit("click", { target: marker });
    },

    // 自定義資訊窗體
    createInfoWindow() {
      let info ='<div>\n' +
        '    <el-card class="box-card" style="padding: 0 80 30 80;width: 400px;border-radius: 10px;">\n' +
        '      <div id="del-div">\n' +
        '        <el-link type="primary" icon="el-icon-close" @click="close()"></el-link>\n' +
        '      </div>\n' +
        '      <div style="text-align: center;">\n' +
        '        <h4>詳 情</h4>\n' +
        '      </div>\n' +
        '      <p v-if="isInfo">部署 : 測試一下</p>\n' +
        '      <p v-if="isInfo">地點 : 測試一下2222</p>\n' +
        '      <p v-if="isInfo">說明 : 測試一下111111</p>\n' +
        '      <p v-if="!isInfo" style="text-align: center;color: #b3b3b3;">暫無資訊</p>\n' +
        '      <div id="infoWindowTool">\n' +
        '        <el-link type="primary" @click="edit()">編輯</el-link>\n' +
        '        <el-link type="primary" @click="del()">刪除</el-link>\n' +
        '      </div>\n' +
        '    </el-card>\n' +
        '    <div class="amap-info-sharp">\n' +
        '      <i class="el-icon-caret-bottom"></i>\n' +
        '    </div>\n' +
        '  </div>'
      return info;
    },
    initialize(e) {
      this.overlay = e.overlay;
      this.infoWindow = e.infoWindow;
    },
    //關閉
    close() {
      this.infoWindow.close();
    },
    edit() {
      console.log("編輯按鈕測試");
    },
    del() {
      console.log("刪除按鈕測試");
    }
  }
};
</script>
<style>
.position_amap .amap-simple-marker-def-style .amap-simple-marker-label {
  line-height: 120px;
  width: 400px;
  height: 60px;
  text-align: left;
}
.amap-info-sharp {
  bottom: -1px;
  left: 48.5%;
  position: absolute;
  color: #fff;
  z-index: -1;
}
#del-div {
  position: absolute;
  right: 20px;
  top: 20px;
  transform: scale(1.2);
}
</style>