高德地图点聚合功能加点击事件

最新推荐文章于 2025-04-07 08:52:37 发布

袋鼠@糊糊

最新推荐文章于 2025-04-07 08:52:37 发布

阅读量4.3k

点赞数 2

文章标签： vue javascript

本文链接：https://blog.youkuaiyun.com/qq_40685103/article/details/112312838

版权

这篇博客介绍了如何在Vue项目中利用JavaScript和高德地图API实现点聚合功能，并详细讲解了AMap.MarkerClusterer插件的使用，通过放大缩小地图层级动态聚合或分散点位。同时，文中提到了如何为聚合点添加点击事件，以增强地图交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果展示
在这里插入图片描述

在这里插入图片描述

放大缩小地图层级时,点位会自动聚合或分散
主要用到的方法是聚合点插件:AMap.MarkerClusterer
高德地图官方api：https://lbs.amap.com/api/javascript-api/reference/plugin#AMap.MarkerClusterer

开始要先引入

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=自己的key"></script>

<template>
    <div class="hot_wrapper">
        <div style="height:100%;width:100%;outline: none!important;" id="container" tabindex="0"> </div>
    </div>
</template>
<script>
import AMap from "AMap";
import API from '../../utils/httpConfig'
export default {
   
    props:['typeMap','activedIndex'],
    data() {
   
        return {
   
            mapData:[],//经纬度数据
            unitId:'',//单位id
        }   
    },
    methods: {
      
        initMap() {
   // 创建地图
            var that = this
            this.map = new AMap.Map('container', {
   
                zoom:10,
                zooms: