전단지 마커의 팝업 위치를 변경 하시겠습니까?

Leaflet에서 마커 아이콘 하단에 팝업을 열고 싶습니다.

내 코드 :

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
    '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    'Imagery © <a href="http://mapbox.com">Mapbox</a>',
    id: 'mapbox.streets'
}).addTo(mymap);

var lati = 51.51;
var longi = -0.09;

var popupLocation1 = new L.LatLng(lati, longi);
var popupContent1 = 'This is a nice popup';

popup1 = new L.Popup();
popup1.setLatLng(popupLocation1);
popup1.setContent(popupContent1);

var m1 = L.marker([ lati, longi ]).addTo(mymap);

m1.bindPopup(popup1);

m1.openPopup();

마커 위에 팝업이 나타납니다.

아래처럼 팝업을 원합니다.

popupAnchor옵션 을 사용하여 오프셋을 지정할 수 있지만 원하는 위치는 지정할 수 없습니다. 먼저 다음과 같은 아이콘을 지정해야합니다.

var myIcon = L.divIcon({ popupAnchor: [0, -30] });

그런 다음 마커 옵션에서이 아이콘을 사용할 수 있습니다.

var marker = L.marker(location, {
                 icon: myIcon
             }).bindPopup(function (marker) {...}); //Shortened

이제 팝업이 마커 위 30px 위로 열립니다. 팝업 상단에 작은 화살표 모양의 삼각형을 배치해야하기 때문에 이것은 정확히 요구 한 것이 아니지만 여전히 언급 할 가치가 있다고 생각합니다.

기본 전단지 솔루션이 없습니다.

다른 방법은 https://github.com/erictheise/rrose를 사용하는 것입니다

좋은 데모 :

http://jsfiddle.net/asleepwalker/6m81vtad/

나는 이것이 오래된 질문이라는 것을 알고 있지만 그의 대답에 설명 된 @Robert 우회를 취할 필요는 없습니다.

Popup에서 상속 한대로 다음을 DivOverlay초기화 할 때 오프셋 옵션을 직접 설정할 수 있습니다 Popup.

    var popup = L.popup({
        offset: [0, -30]
    })
      .setLatLng(location)
      .setContent("Test Text")
      .openOn(mapId);

문서를 읽으십시오 : https://leafletjs.com/reference-1.5.0.html#popup

이것은 CSS에서만 가능합니다. 아래에서는 !important세 개의 CSS 요소를 재정의 하고 :before의사 요소를 하나 추가 합니다. 나는 기본적으로 처음에 팝업 일렬로 늘어서있어 최고 대신 바닥 , 55px 당신의 선택 마커에 따라, 개인 취향.

그런 다음 팝업의 "tip"을 bottom에서으로 비슷하게 이동하고 top:0px"normal"트릭을 사용하여 만들어진 것이 아니라는 것을 발견합니다. 당신이 가리키고 싶은 곳의 반대쪽 경계; 우리의 경우에는 아래쪽 경계). 대신 왼쪽 상단에서 회전 된 사각형으로 만들어진 것 같습니다 (아마도 브라우저가 GPU를 사용하도록 강제하고 모든 것을 가속화 하기 때문 입니까?). 그리고 나는 포인트를 잘 얻지 못합니다. 내 팁은 올바른 위치에 있지만 보이지 않습니다.); 지금은 잘못된 위치에있는 상자 그림자를 제거하고 그대로 유지합니다. "이전 팁"을 이해하는 사람은 조정하십시오.

따라서 대신 "정상"프로세스를 사용하여 내 팁을 만듭니다 (확실하지 않은 경우 3x 투명 및 1x 흰색 대신 --- 예를 들어 아래의 네 가지 테두리 색상을 변경하십시오 border-bottom-color: blue; border-left-color: green; border-top-color: yellow' border-right-color: red).

#map {
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   bottom: 0;
   z-index: 0;
}
.leaflet-popup {top: 55px !important;}
/* Here I move the "tip" to the right location, but didn't succeed in making it visible. So I just remove the box-shadow and leave it: */
.leaflet-popup-tip-container {
   top: 0px !important;
}
.leaflet-popup-tip {
   box-shadow: none !important;
}
.leaflet-popup:before 
    {
    content: "";
    position: absolute;
    border: 13px solid transparent;
    border-bottom-color: white;
    bottom: 0px;
    margin-left: -13px;
}

이 JSFiddle에서 알 수 있듯이 두 마커를 모두 시도해도 다른 팝업 크기 (다른 너비, 다른 텍스트 높이)에는 문제가 없습니다.

대체로 항목을 변경하지 않을 것이므로 Leaflet의 업데이트에 대해 강력하게 보입니다.