마커를 중심으로하지 않는 동적 내용이 포함 된 전단 팝업

Question

동적 내용으로 전단 팝업을 만들려고하지만 팝업 풍선이 마커와 정렬되지 않습니다.

다음은 캡쳐 버블이 마커 위에 가운데에 있지 않다는 것을 보여주는 스크린 샷입니다. 여기

또한 여기에 코드

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

L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', { 
     maxZoom: 18, 
     id: 'examples.map-i875mjb7' 
}).addTo(map); 


m = L.marker([51.5, -0.09]).addTo(map); 
m.bindPopup("<b>Hello world!</b><br />I am a popup<span id='a'></span>", {maxWidth: "none"}) 
m.openPopup(); 

$('#a').html('abcdefghijklmnopqrstuvwxyz') 

하는 문제에 대해 설명 최소한의 jsfiddle 예입니다 : 내가 이것을 어떻게 해결합니까 http://jsfiddle.net/nk93shkt/

은?

Answer 1

리플렛은 정보를 렌더링 할 때 정보 폭을 결정하는 것처럼 보입니다. 텍스트가 표시된 후에 텍스트를 추가하므로 전단지는 더 이상 실제 크기를 알 수 없으므로 제대로 배치 할 수 없습니다.

이 약간 장황한 예에서 documentation에서 setPopupContent() 방법을 시도해보십시오 위치는 초기에 설정됩니다

m = L.marker([51.5, -0.09]).addTo(map); 
m.bindPopup("<b>Hello world!</b><br />I am a popup<span></span>", {maxWidth: "none"}) 
m.openPopup(); 
var a = m.getPopup(); 
var b = a._content.replace("<span></span>","<span>asdasdasda</span>"); 
m.setPopupContent(b); 

JSFIDDLE

Answer 2

를 수동

m.openPopup(); 
adjustPopup('abcdefghijklmnopqrstuvwxyz<br>sdfsdfs<br>sdfsdfsdf'); 
function adjustPopup(html) 
{ 
    $('#a').html(html); 
    var $leaflet=$('#a').closest('div.leaflet-popup'); 
    var width=$leaflet.width(); 
    $leaflet.css({left:"-"+(width/2)+"px"}); 
} 

jQuery를

그것을 조정할 수 있도록

Answer 3

원본 답변을 선택한 후에 리플릿의 API에 추가되었는지는 잘 모르겠지만 pop-up의 내용을 변경 한 후에 update() 메소드를 사용하십시오.

http://leafletjs.com/reference.html#popup-update