popup Archives - Page 2 of 2

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;
    }
});