我有一张带有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/
发布于 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)。
发布于 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);
});
});
https://stackoverflow.com/questions/41522376
复制相似问题