Leaflet에서 클릭이 아닌 마우스 오버시 팝업이 열릴 수 있습니까?
이것은 한 번에 하나의 마커에 대해서만 작동하지만 더 많은 수의 마커에 필요합니다.
marker.on('mouseover', function(e){
marker.openPopup();
});답변
마커의 팝업을 표시해야하는 경우 마커 bindPopup 메소드를 사용할 수 있습니다.
그런 다음 더 많은 제어 기능을 가지며 마커에 자동으로 바인딩됩니다.
아래 예에서 사용자가 마우스를 가리킬 때 팝업을 표시하고 사용자가 마우스를 내릴 때 팝업을 숨길 수 있습니다.
marker.bindPopup("Popup content");
marker.on('mouseover', function (e) {
this.openPopup();
});
marker.on('mouseout', function (e) {
this.closePopup();
});참고 : 팝업 자체를 마우스로 가리킬 때 팝업이 닫히는 문제가 발생할 수 있으므로 팝업 앵커를 조정하여 (팝업 설정 참조) 팝업이 마커 자체에서 조금 더 떨어져 표시되도록 팝업 앵커를 조정해야 할 수 있습니다. 너무 쉽게 사라집니다.
답변
이렇게하면 마커 마우스 오버에 팝업이 표시됩니다.
marker.on('mouseover', function(e) {
//open popup;
var popup = L.popup()
.setLatLng(e.latlng)
.setContent('Popup')
.openOn(map);
});답변
이것은 Leaflet 관련 문제가 아니라 Javascript의 문제입니다.
마커를 컬렉션에 저장 한 다음 모든 마커 openPopup의 'mouseover'이벤트에 바인딩 합니다.
예를 들어 배열을 사용하면
var markers = getAllMarkers(); // up to you to implement, say it returns an Array<L.Marker>
for (var i = 0; i < markers.length; i++) {
var currentMarker = markers[i];
currentMarker.on('mouseover', currentMarker.openPopup.bind(currentMarker));
}답변
Leaflet 1.3.x를 사용하는 경우 툴팁 바인딩은 내장 된 방법입니다.
http://leafletjs.com/reference-1.3.0.html#tooltip
var polyline = L.polyline([[StartLat, StartLong],[EndLat,EndLong]]).addTo(this.map);
polyline.bindTooltip("tool tip is bound");답변
“더 많은 수의 마커에 대해”작동하는 솔루션이 있다는 점에서 GeoJSON에서로드 된 각 포인트 데이터 레이어에 대해 다음과 같은 작업을 수행합니다.
var layerPopup;
featureLayer.on('mouseover', function(e){
var coordinates = e.layer.feature.geometry.coordinates;
var swapped_coordinates = [coordinates[1], coordinates[0]]; //Swap Lat and Lng
if (map) {
layerPopup = L.popup()
.setLatLng(swapped_coordinates)
.setContent('Popup for feature #'+e.layer.feature.properties.id)
.openOn(map);
}
});
featureLayer.on('mouseout', function (e) {
if (layerPopup && map) {
map.closePopup(layerPopup);
layerPopup = null;
}
});