高德完全自定义点聚合，实现悬浮效果、选中效果

最新推荐文章于 2024-02-29 21:51:51 发布

shino_1125

最新推荐文章于 2024-02-29 21:51:51 发布

阅读量1.3k

点赞数 1

分类专栏：高德文章标签：前端

本文链接：https://blog.csdn.net/weixin_38312808/article/details/113726509

版权

这篇博客介绍如何在高德地图API的基础上完全自定义点聚合功能，增加了悬浮和选中效果。通过修改点聚合的样式和交互，实现了鼠标悬停时背景色变化及点击选中时的特定样式。示例代码展示了如何创建和设置 MarkerClusterer，以及处理点击事件来更新标记状态。

摘要由CSDN通过智能技术生成

说明：

高德地图点聚合官方功能不能满足业务需求，此例子在完全自定义点聚合基础上增加悬浮与选中效果。

预览图：

在这里插入图片描述

在线预览：

codepen

代码：

代码没有添加注释，只是自己的方式实现，如有疏漏，请多指正。

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>高德完全自定义点聚合，可配置悬浮效果、选中效果</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <style>
        html,
        body,
        #mapView {
    
            height: 100%;
            width: 100%;
        }

        .container {
    
            width: 40px;
            height: 40px;
            background-color: blue;
            border-radius: 50%;
            color