[英]leaflet popup on mouseover removes click event
I have a number of points plotted on my map using geoJSON. 我使用geoJSON在地图上绘制了许多点。 When you click a point, the map zooms to the point and pulls up some info in another div.
单击某个点时,地图会缩放到该点并在另一个div中提取一些信息。 When I put a popup on a mouseover event, my click function no longer works.
当我在mouseover事件上放置一个弹出窗口时,我的点击功能不再有效。
Here is my click function: 这是我的点击功能:
function fillInfo(e) {
var layer = e.target;
document.getElementById('infoBox').innerHTML = '<h2>' + layer.feature.properties.name + '</h2>' + '<h3>' + layer.feature.properties.address + '</h3></p>'
}
//Variable to set zoom level on click
var southLat = layer.feature.geometry.coordinates[0] + .022438;
var southLong = layer.feature.geometry.coordinates[1] - .003235;
var northLat = layer.feature.geometry.coordinates[0] - .022438;
var northLong = layer.feature.geometry.coordinates[1] + .003235;
map.fitBounds([[southLong, southLat], [northLong, northLat]]);
}
Here is my mouseover function: 这是我的鼠标悬停功能:
function highlightFeature(e) {
var layer = e.target;
layer.bindPopup(layer.feature.properties.name)
.openPopup();
layer.setStyle({
weight: 5,
color: '#666',
dashArray: '',
fillOpacity: 0.7
});
if (!L.Browser.ie && !L.Browser.opera) {
layer.bringToFront();
}
}
And here I call them: 在这里我称呼他们:
function onEachFeature(feature, layer) {
layer.on({
click: fillInfo,
mouseover: highlightFeature,
mouseout: resetHighlight
});
}
This gets the popup working fine on rollover, but the point no longer responds to the click event. 这使得弹出窗口在翻转时工作正常,但该点不再响应click事件。
There is a offset-property for a popup, the default is set to [0,6]
, therefore the popup covers the point (the node that contains the white downwards arrow is larger than the arrow), and you'll not be able to click on the point. 弹出窗口有一个偏移属性,默认设置为
[0,6]
,因此弹出窗口覆盖该点(包含白色向下箭头的节点大于箭头),你将无法使用点击该点。
Set the offset-option of the popup: 设置弹出窗口的偏移量选项:
layer.bindPopup(layer.feature.properties.name,{offset:new L.Point(0,0)})
.openPopup();
The second argument provided to L.Point is the important y-coordinate, decrease this argument to move the popup upwards. 提供给L.Point的第二个参数是重要的y坐标,减少此参数以向上移动弹出窗口。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.