高德地图上实现多个信息窗体的点击
时间: 2024-03-16 08:41:44 浏览: 100
要在高德地图上实现多个信息窗体的点击,你需要使用 AMap.InfoWindow 类来创建信息窗体,并使用 AMap.Marker 类来创建标记点。然后,你需要将信息窗体与标记点关联起来,并在标记点点击事件中打开信息窗体。以下是示例代码:
```javascript
// 创建信息窗体
var infoWindow1 = new AMap.InfoWindow({
content: '<div>信息窗体1</div>',
offset: new AMap.Pixel(0, -20)
});
var infoWindow2 = new AMap.InfoWindow({
content: '<div>信息窗体2</div>',
offset: new AMap.Pixel(0, -20)
});
// 创建标记点
var marker1 = new AMap.Marker({
position: [lng1, lat1]
});
var marker2 = new AMap.Marker({
position: [lng2, lat2]
});
// 将信息窗体与标记点关联起来
marker1.on('click', function() {
infoWindow1.open(map, marker1.getPosition());
});
marker2.on('click', function() {
infoWindow2.open(map, marker2.getPosition());
});
// 将标记点添加到地图上
map.add([marker1, marker2]);
```
在这个例子中,我们创建了两个信息窗体和两个标记点,并将它们关联起来。当标记点被点击时,相应的信息窗体会在标记点上方弹出。你可以根据需要创建更多的信息窗体和标记点,并在它们之间建立关联。
阅读全文