Vue高德地图多个地点标注详解

一、地图组件的引入

首先需要在项目中引入高德地图组件，在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组件。

  
    
   
    <script>
      export default {
        data() {
          return {
            markers: [
              {
                position: [116.481181, 39.989792]
              },
              {
                position: [113.93041, 22.4418],
              }
            ]
          };
        }
      }
    </script>
  

三、地点标注信息展示

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

  
  
   

  <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插件进行标注聚合。

  
  
   

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