我有一个带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/
最佳答案
不要让图层打开弹出窗口,而是使用openOn(map)
设置事件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)。关于javascript - 传单:在光标位置而不是LineString中心打开弹出窗口,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41522376/