高德jsapi2.0 聚合marker

最新推荐文章于 2024-01-11 11:01:57 发布

月照一江秋水

最新推荐文章于 2024-01-11 11:01:57 发布

阅读量643

点赞数

分类专栏：地图 vue 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_41206597/article/details/128253751

版权

vue 同时被 2 个专栏收录

15 篇文章 2 订阅

订阅专栏

地图

6 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!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, #container {
            height: 100%;
            width: 100%;
        }

        .input-card {
            width: 25rem;
        }

        .input-card .btn {
            width: 7rem;
            margin-right: .7rem;
        }

        .input-card .btn:last-child {
            margin-right: 0;
        }
    </style>
</head>
<body>
<div id="container" class="map" tabindex="0"></div>
  <div class="info" id="text">
    鼠标点击marker
</div>
<script src="//a.amap.com/jsapi_demos/static/china.js"></script>


 <script src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值&plugin=AMap.MarkerCluster"></script> 

<script type="text/javascript">
    var cluster;

    var map = new AMap.Map("container", {
        center: [104.937478,35.439575],
        zoom: 5
    });

    var gridSize = 60
    // 数据中需包含经纬度信息字段 lnglat
    // var points = [
        // { lnglat: ["108.939621", "34.343147"] },
        // { lnglat: ["112.985037", "23.15046"] },
        // ...
        // ...
    // ]
    var count = points.length;

    var _renderClusterMarker = function (context) {
        var div = '<div style="width: 50px;height: 50px;border: 1px solid red;">聚合样式</div>'
        context.marker.setContent(div)
    };
    var _renderMarker = function(context) {
        var content = '<div style="background-color: hsla(180, 100%, 50%, 0.3); height: 18px; width: 18px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 3px;">非聚合</div>';
        var offset = new AMap.Pixel(-9, -9);
        context.marker.setContent(content)
        context.marker.setOffset(offset)
     	context.marker.on('click', markerClick);
    }
    
    function markerClick(e) {
    	document.querySelector("#text").innerText = e.lnglat.getLat();
    }
    
    addCluster(2);
    
    function addCluster(tag) {
        if (cluster) {
            cluster.setMap(null);
        }
      cluster = new AMap.MarkerCluster(map, points, {
        gridSize: gridSize, // 设置网格像素大小
        renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
        renderMarker: _renderMarker, // 自定义非聚合点样式
      });
    }
</script>
</body>
</html>