<!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>
高德jsapi2.0 聚合marker
最新推荐文章于 2024-06-27 14:34:23 发布