Leaflet:在光标位置打开弹出窗口，而不是LineString中心
Leaflet:在光标位置打开弹出窗口，而不是LineString中心
提问于 2017-01-07 22:17:22
我有一张带有LineString的传单地图。
// a GeoJSON LineString
var geojson = {
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [[-101.123, 40.2500], [-101.123, 40.2503]]
}
};
// create map and add json
var map = L.map('map');
var geojsonLayer = new L.GeoJSON(geojson).addTo(map);
map.fitBounds(geojsonLayer.getBounds())
// add popup for the line
geojsonLayer.eachLayer(function (layer) {
var popup = L.popup();
popup.setContent('text');
layer.bindPopup(popup);
layer.on('click mouseover', function () {
layer.openPopup();
});
});当我在它上面的时候，一个弹出窗口会在LineString中心打开。
我怎样才能在光标位置打开它？
下面是一个简单的工作示例：http://jsfiddle.net/wuu8Lv2t/1/
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-01-07 23:39:21
不要让图层打开弹出窗口，而是使用event e.latlng中的坐标设置位置
// add popup for the line
geojsonLayer.eachLayer(function (layer) {
var popup = L.popup();
popup.setContent('text');
layer.bindPopup(popup);
layer.on('mouseover', function (e) {
var popup = e.target.getPopup();
popup.setLatLng(e.latlng).openOn(map);
});
layer.on('mouseout', function(e) {
e.target.closePopup();
});
layer.on('mousemove', function (e) {
e.target.closePopup();
var popup = e.target.getPopup();
popup.setLatLng(e.latlng).openOn(map);
});
});请注意，在您的问题中有一个错误:您不能在事件处理程序中使用变量layer，必须使用e.target (请参阅doc)。
Stack Overflow用户
发布于 2018-12-05 14:52:16
公认的答案( @YaFred)相当不错，关键是更新函数layer.on('mousemove'...。但是，正如所写的那样，每次鼠标移动时关闭和打开弹出窗口都会使其闪烁。相反，在layer.('mousemove...中，您只需要更新位置的行：
// add popup for the layer
geojsonLayer.eachLayer(function (layer) {
var popup = L.popup();
popup.setContent('text');
layer.bindPopup(popup);
layer.on('mouseover', function (e) {
var popup = e.target.getPopup();
popup.setLatLng(e.latlng).openOn(map);
});
layer.on('mouseout', function(e) {
e.target.closePopup();
});
// update popup location
layer.on('mousemove', function (e) {
popup.setLatLng(e.latlng).openOn(map);
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41522376
复制相关文章
相似问题