一、地图组件的引入

首先需要在项目中引入高德地图组件，在Vue中可以使用高德地图JavaScript API实现。在main.js中引入以下代码：

import VueAMap from 'vue-amap';
Vue.use(VueAMap);
//初始化 VueAMap
VueAMap.initAMapApiLoader({
    key: '高德地图的key', // 使用自己申请的高德地图的key
    plugin: ['AMap.Geolocation', 'AMap.MarkerClusterer'], // 根据需要引入所需插件
    v: '1.4.4'
});

二、引入地图组件

在Vue页面中，我们需要引入VueAMap组件。我们使用高德地图的Map组件来展示地图。而经纬度则在VueAMap内的Marker组件。

<template>
  <div id="app">
    <el-container>
      <el-main>
        <vue-amap :resizeenable="true" :zoom="13">
          <amap-marker v-for="marker in markers" :position="marker.position"></amap-marker>
        </vue-amap>
      </el-main>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      markers: [
        {
          position: [116.481181, 39.989792]
        },
        {
          position: [113.93041, 22.4418],
        }
      ]
    };
  }
}
</script>

三、地点标注信息展示

在地点标注之前，我们需要先设置InfoWindow，然后在Marker组件中使用。

<template>
  <div :id="'amap'+id" class="amap"></div>
  <el-dialog :visible.sync="dialogVisible">
    <el-form>
      <el-form-item>
        <span>{{ currentMarker.title }}</span>
      </el-form-item>
      <el-form-item label="经度">
        <el-input v-model="currentMarker.position[0]" disabled />
      </el-form-item>
      <el-form-item label="纬度">
        <el-input v-model="currentMarker.position[1]" disabled />
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      currentMarker: {},
      markers: [
        {
          id: 1,
          title: '北京',
          position: [116.480983, 39.98944],
          content: '北方之首，中国的首都北京'
        },
        {
          id: 2,
          title: '深圳',
          position: [114.06667, 22.61667],
          content: '中国改革开放第一个经济特区'
        }
      ]
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.mapInit();
    });
  },
  methods: {
    mapInit() {
      this.$refs.amap.$mapPromise.then(() => {
        this.initMapData();
      });
    },
    initMapData() {
      const infoWindow = new window.AMap.InfoWindow({
        offset: new window.AMap.Pixel(0, -20),
        isCustom: false,
        autoMove: true
      });
      this.markers.forEach(marker => {
        const aMapMarker = new window.AMap.Marker({
          icon: marker.icon || '/assets/marker.png',
          position: marker.position,
          title: marker.title,
          map: this.$refs.amap.$map,
          offset: new window.AMap.Pixel(-13, -30)
        });
        if (marker.content) {
          aMapMarker.on('click', () => {
            infoWindow.setContent(marker.content);
            infoWindow.open(this.$refs.amap.$map, aMapMarker.getPosition());
          });
        }
        aMapMarker.on('mouseover', () => {
          aMapMarker.setAnimation('AMAP_ANIMATION_BOUNCE');
        });
        aMapMarker.on('mouseout', () => {
          aMapMarker.setAnimation(null);
        });
      });
    }
  }
};
</script>

四、多个地点的标注，并聚合显示

如果需要在地图上展示多个地点标注，可以使用MarkerClusterer插件进行标注聚合。

<template>
  <div class="amap" id="amap"></div>
</template>
<script>
export default {
  data() {
    return {
      markers: [
        {
          id: 1,
          title: '北京',
          position: [116.480983, 39.98944],
          content: '北方之首，中国的首都北京'
        },
        {
          id: 2,
          title: '深圳',
          position: [114.06667, 22.61667],
          content: '中国改革开放第一个经济特区'
        }
      ]
    };
  },
  methods: {
    mapInit() {
      this.$nextTick(() => {
        window.AMapUI.loadUI(['misc/MarkerClusterer'], MarkerClusterer => {
          const map = new window.AMap.Map('amap', {
            resizeEnable: true,
            zoom: 13,
            center: [116.397428, 39.90923]
          });
          const markers = this.markers.map(marker => {
            return new window.AMap.Marker({
              position: marker.position,
              title: marker.title,
              animation: 'AMAP_ANIMATION_DROP'
            });
          });
          const cluster = new MarkerClusterer(map, markers, {
            gridSize: 80,
            maxZoom: 15
          });
        });
      });
    }
  },
  mounted() {
    this.mapInit();
  }
};
</script>

五、总结

本文主要以Vue高德地图多个地点标注为例，从地图组件引入、引入地图组件、地点标注信息展示、多个地点的标注，并聚合显示等多个方面进行了详细的阐述。在实际项目中，根据具体的需求可以使用不同的方法和插件，以实现更加自然的地图展示效果。