使用高德地图的LabelMarker()实现显示海量点,并在初始化时候只显示标记点,点击标记点显示点的信息的代码
时间: 2023-05-18 17:06:54 浏览: 65
以下是使用高德地图的LabelMarker()实现显示海量点,并在初始化时候只显示标记点,点击标记点显示点的信息的代码:
```javascript
// 初始化地图
var map = new AMap.Map('map-container', {
zoom: 10,
center: [116.397428, 39.90923]
});
// 创建一个 LabelMarker 图层
var labelMarker = new AMap.LabelMarker({
map: map,
zIndex: 100,
zooms: [3, 18],
opacity: 1,
cursor: 'pointer',
bubble: true,
label: {
offset: new AMap.Pixel(0, 0),
content: '<div class="marker-label">标记点</div>',
direction: 'top'
}
});
// 添加海量点
var points = [
{ lnglat: [116.405285, 39.904989], content: '点1信息' },
{ lnglat: [116.305285, 39.804989], content: '点2信息' },
{ lnglat: [116.205285, 39.704989], content: '点3信息' },
{ lnglat: [116.105285, 39.604989], content: '点4信息' },
// ...更多点
];
labelMarker.addMarkers(points.map(function(point) {
return new AMap.Marker({
position: point.lnglat,
content: '<div class="marker"></div>',
offset: new AMap.Pixel(-10, -10),
extData: point.content
});
}));
// 点击标记点显示点的信息
labelMarker.on('click', function(event) {
var content = event.target.getExtData();
alert(content);
});
// CSS 样式
.marker {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #f00;
}
.marker-label {
padding: 5px;
background-color: #fff;
border: 1px solid #f00;
}
```
注意:这段代码是 JavaScript 代码,不是 Lua 代码。如果你需要 Lua 代码,可以在 Lua 中实现类似的功能。