Vue 高德地图点标记

<template>
  <div class="admin-home">
    <div id="map" style="width: 100%;height:800px;"></div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
  data() {
    return {

      map: null
    };
  },
  methods: {
    initMarker() {
      var points = [
        { weight: 8, lnglat: ["108.939621", "34.343147"] },
        { weight: 1, lnglat: ["113.370643", "22.938827"] },
        { weight: 1, lnglat: ["112.985037", "23.15046"] },
        { weight: 1, lnglat: ["110.361899", "20.026695"] },
        { weight: 1, lnglat: ["121.434529", "31.215641"] },
      ];
      var markerList = [];
      points.forEach(point => {
        // 创建一个 Marker 实例：
        var marker = new AMap.Marker({
          position: new AMap.LngLat(point.lnglat[0], point.lnglat[1]),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          title: '北京'
        });
        //给标记点添加点击事件
        marker.on("click", function (e) {//给每一个点位增加点击事件
          alert('aaaaaaa')
        });
        markerList.push(marker)
      })
      this.map.add(markerList);
    },
    initMap() {
      AMapLoader.load({
        key: "xxx",             // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.ToolBar', 'AMap.Driving', 'AMap.MarkerClusterer'],
        // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        this.map = new AMap.Map("map", {  //设置地图容器id
          zoom: 11,           //初始化地图级别
          center: [105.602725, 37.076636], //初始化地图中心点位置
        });
        this.initMarker();
      }).catch(e => {
        console.log(e);
      })

    }

  },
  created() {
    this.initMap();
  },


};
</script>


<style lang="scss" scoped>
.admin-home {
  color: #444444;



}
</style>