<!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="input-card">
</div>
<script src="//a.amap.com/jsapi_demos/static/china.js"></script>
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.MarkerClusterer"></script>
<script type="text/javascript">
var cluster, markers = [];
var map = new AMap.Map("container", {
resizeEnable: true,
center: [105, 34],
zoom: 4
});
console.log(points);
var startIcon = new AMap.Icon({
size: new AMap.Size(40, 40),
image: 'https://ship.png',
imageSize: new AMap.Size(40, 40),
});
var labelOffset = new AMap.Pixel(-15, -15);
for (var i = 0; i < points.length; i += 1) {
markers.push(new AMap.Marker({
position: points[i]['lnglat'],
offset: new AMap.Pixel(-15, -15),
icon: startIcon,
label: {
content: i,
offset: labelOffset,
}
}))
}
console.log(markers);
var count = markers.length;
addCluster(2);
function addCluster(tag) {
if (cluster) {
cluster.setMap(null);
}
cluster = new AMap.MarkerClusterer(map, markers);
}
</script>
</body>
</html>