리플 렛 (Cloudmade) 팝업의 이미지 크기가 팝업 크기를 결정하지 못하는 것 같습니다.

Question

Mapbox지도에서 전단지의 라이브러리를 사용하면서 발견 한 문제를 해결하는 데 어려움을 겪고 있습니다. 특히, 팝업이 맵의 각 아이콘/마커에 바인딩되도록 코드를 작성했습니다. 각 팝업 안에는 다른 웹 사이트로 연결되는 이미지가 있습니다.

• 이미지가 팝업 (http://postimage.org/image/c7u0n5sx3/)
• 자동 이동 옵션보다 훨씬 더 큰 : 불행하게도이 이미지의 크기는 다음 consecuences을 가지고, 실제 팝업의 크기의 계산에 포함되지 않는 것 같다 당신은이에 대한 가능한 해결책의

  <?php 
      // Retrieves info from all correct rows in database to further input in javascript 
      while ($row = mysql_fetch_assoc($get_info)){ 
      $name = $row ['nombre']; 
      $lat = $row ['lat']; 
      $long = $row ['long']; 
  
      echo 
       "<script type=\"text/javascript\"> 
       var latlng = new L.LatLng(".$row ['lat'].", ".$row ['long']."); 
       var flyer = \"<a href='boliches/pdnws/".$row ['nombre'].".php'><img src='boliches/flyers/".$day."/".$row ['nombre'].".jpg'/></a>\"; 
       var MyIcon = L.Icon.extend({ 
         iconUrl: 'boliches/icons/".$row ['nombre'].".png', 
       shadowUrl: null, iconSize: new L.Point(50, 50), 
       shadowSize: null, 
       iconAnchor: new L.Point(25, 25), 
       popupAnchor: new L.Point(1, 1) 
       }); 
       var icon = new MyIcon();  
       var marker = new L.Marker(latlng, {icon: icon}); 
       map.addLayer(marker); 
       marker.bindPopup(flyer, {maxWidth:800, autoPan:true}); 
       </script>"; 
      } 
      ?> 
  

  생각할 수 :

내 코드는 다음과 같다 작업 does't? 프로그래밍에 관해서는 초보자 인 것 같지만, 너무 길어서이 코드를 해독 할 수 없었습니다. 도와 주셔서 정말 고맙습니다. 정말 고맙습니다!

Answer 1

만들기 돔을 통해 새로운 요소와 그것을 사용하여 bindPopup()에서 팝업의 내용으로 내가이 문제가 있었을 때 나를 위해 일했다.

소스 코드를 자세히 설명하지는 않았지만이 메서드는 마크 업이 포함 된 문자열 대신 DOM 노드를 내용으로 사용할 수 있음을 나타냅니다.

이 방법을 사용하면 클릭시 팝업의 크기가 올바르게 표시됩니다.

예 :

var divNode = document.createElement('DIV'); 
divNode.innerHTML = '<p>My custom HTML <img src="..." /></p>'; 
marker.bindPopup(divNode); 

Answer 2

저는 엽서 작성자입니다. 문제는 팝업 코드가 필요한 크기를 계산하는 순간 콘텐츠의 이미지 크기를 알 수 없다는 것입니다. 가장 좋은 방법은 팝업 수동 (<img width="100" ... />) 내부의 폭과 각 이미지의 높이를 지정하는 것입니다,하지만 당신은 크기를 결정할 수없는 경우, 다소 해키 솔루션은 다음과 같이 될 것이다 :

function onPopupImageLoad() { 
    marker._popup._update(); 
} 

var images = marker._popup._contentNode.getElementsByTagName('img'); 

for (var i = 0, len = images.length; i < len; i++) { 
    images[i].onload = onPopupImageLoad; 
} 

Answer 3

이에 보였다 정말로에서 찾을 나

.leaflet-popup-content { 
    width:auto !important; 
} 

의 트릭에 this link