2014-11-26 4 views
3

지도에 여러 개의 마커를 배치하고 팝업을 추가했습니다. 다음 코드는 루프에서 실행되며 정상적으로 작동합니다.마커 바닥에 열린 전단지 팝업

L.marker([ 
    item.Lat, 
    item.Long 
]).bindPopup(item.count + ' projects').addTo(map); 

클릭하면 마커가 표시되고 팝업됩니다. 그러나 팝업은 마커 상단에 항상 열립니다. 마커의 아래쪽 (또는 다른 쪽)에서 열 수있는 방법이 있습니까? 리플릿 문서에있는 popup-options은 옵션을 제공하지 않는 것 같습니다.

답변

2

아이콘에 맞춤 아이콘을 제공해야합니다. 동일한 이미지를 사용할 수 있지만이를 수행하려면 popupAnchor 속성을 조정해야합니다. 귀하의 경우에는 참조 http://leafletjs.com/reference.html#iconhttp://leafletjs.com/examples/custom-icons.html

를 참조하십시오 당신이해야 할 것이다

var yourIcon = L.icon({ popupAnchor: [0,0] }); 
var marker= L.marker([item.Lat, item.Long],{icon: yourIcon}) 

(25 X 41 픽셀을 기본 아이콘입니다 고려 iconAnchor를 12 X 40이 될 수 있음) 그리고 팝업이 열립니다 아이콘이 고정 된 위치의 정확히 같은 위치에 있습니다.

+0

이 팝업을하지 않습니다 당신이 마커의 클릭으로 후크 및 사용자 정의 코드를 사용하여 자신의 팝업을 그릴되어 무엇을 할 수 있는지 ...

는 화살표 여전히 아래쪽으로 가리키는 있나요? – WeSt

+0

예. @FranceImage로 연결된 플러그인처럼 구현해야합니까? – sabas

2

는 대한 옵션이 없습니다 ...

그러나, 당신의 목적은지도를 이동하지 않고 눈에 보이는 팝업을 표시하는 경우,이 리플릿 플러그인을 살펴 가질 수 있습니다 http://erictheise.github.io/rrose/

이 열립니다를 마커가 너무 북쪽 인 경우 마커에서 남쪽으로 팝업 ...

1

앵커를 변경할 수 있지만 내장 코드는지도의 보이는 창을 기반으로 팝업이 표시되는 위치를 결정합니다.

관련 문제