高德地图多个marker标记点 移入显示label详细信息
时间: 2023-09-08 19:08:26 浏览: 173
高德地图的marker聚合
5星 · 资源好评率100%
你可以在高德地图的Marker对象中添加鼠标事件监听器,来实现鼠标移入显示label详细信息的功能。具体的实现步骤如下:
1. 创建Marker对象时,设置label属性为一个AMap.Text对象,用于显示详细信息。
```javascript
var marker = new AMap.Marker({
position: [lng, lat],
label: {
content: '详细信息',
offset: new AMap.Pixel(0, -20) // 设置label偏移量,使其显示在Marker上方
}
});
```
2. 给Marker对象添加mouseover和mouseout事件监听器,在鼠标移入和移出时显示或隐藏label。
```javascript
marker.on('mouseover', function (e) {
marker.setLabel({
content: '详细信息',
offset: new AMap.Pixel(0, -20),
visible: true // 显示label
});
});
marker.on('mouseout', function (e) {
marker.setLabel({
visible: false // 隐藏label
});
});
```
完整的代码示例:
```javascript
var map = new AMap.Map('container', {
zoom: 13,
center: [116.397428, 39.90923]
});
var markers = [
{lnglat: [116.405285, 39.904989], info: '北京市'},
{lnglat: [121.472644, 31.231706], info: '上海市'},
{lnglat: [113.280637, 23.125178], info: '广州市'},
{lnglat: [114.066112, 22.548515], info: '深圳市'}
];
for (var i = 0; i < markers.length; i++) {
var marker = new AMap.Marker({
position: markers[i].lnglat,
label: {
content: markers[i].info,
offset: new AMap.Pixel(0, -20)
}
});
marker.on('mouseover', function (e) {
marker.setLabel({
content: e.target.getExtData().info,
offset: new AMap.Pixel(0, -20),
visible: true
});
});
marker.on('mouseout', function (e) {
marker.setLabel({
visible: false
});
});
marker.setExtData(markers[i]); // 将详细信息存储在Marker对象的扩展数据中
marker.setMap(map);
}
```
阅读全文