leaflet弹出窗口(popup)绑定到标记(marker)鼠标悬浮到标记即可弹出。离开不弹出
时间: 2023-07-31 15:09:14 浏览: 600
您可以使用 Leaflet 中的 `bindPopup` 方法将弹出窗口绑定到标记,然后使用 `mouseover` 和 `mouseout` 事件来控制弹出窗口的显示和隐藏。
具体实现步骤如下:
1. 创建一个标记,并设置标记的经纬度和弹出窗口的内容。
```
var marker = L.marker([51.5, -0.09]).bindPopup("Hello, world!").addTo(map);
```
2. 使用 `mouseover` 事件来显示弹出窗口。
```
marker.on("mouseover", function (e) {
this.openPopup();
});
```
3. 使用 `mouseout` 事件来隐藏弹出窗口。
```
marker.on("mouseout", function (e) {
this.closePopup();
});
```
完整的代码示例如下:
```
var map = L.map("map").setView([51.5, -0.09], 13);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "Map data © <a href='https://www.openstreetmap.org/'>OpenStreetMap</a> contributors, " +
"<a href='https://creativecommons.org/licenses/by-sa/2.0/'>CC-BY-SA</a>, " +
"Imagery © <a href='https://www.mapbox.com/'>Mapbox</a>",
maxZoom: 18,
}).addTo(map);
var marker = L.marker([51.5, -0.09]).bindPopup("Hello, world!").addTo(map);
marker.on("mouseover", function (e) {
this.openPopup();
});
marker.on("mouseout", function (e) {
this.closePopup();
});
```
当鼠标悬停在标记上时,弹出窗口会自动显示,当鼠标移开时,弹出窗口会自动隐藏。
阅读全文
相关推荐


















