傳單中的圖片大小（Cloudmade）彈出窗口似乎不計算以確定彈出窗口的大小

我很難解決在Mapbox地圖上使用Leaflet庫時遇到的問題。具體來說，我編寫了代碼，以便彈出窗口綁定到地圖上的每個圖標/標記。在每個彈出窗口中都有一個鏈接到不同網站的圖像。不幸的是，似乎這個圖像的大小不計入實際彈出窗口的大小計算，具有以下consecuences：傳單中的圖片大小（Cloudmade）彈出窗口似乎不計算以確定彈出窗口的大小

圖像比彈出（http://postimage.org/image/c7u0n5sx3/）
的AUTOPAN選項更大簡化版，工作

我的代碼如下：

<?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>"; 
    } 
    ?>

你能想到一個可能的解決這個嗎？在編程方面，我恐怕還是個初學者，但是如果沒有能夠破解這個的話，那已經太多了。我非常感謝你的幫助！非常感謝！

來源

2012-06-04 jav baldrich

創建當我遇到問題時，通過Dom創建一個新元素並使用它作爲bindPopup()中彈出窗口的內容。

雖然沒有記錄，但看看源代碼後發現，此方法可以將Dom節點作爲內容，而不是包含標記的字符串。

使用此方法會導致彈出窗口在單擊時大小正確。

例子：

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

來源

2012-10-10 14:01:39

我是單張作者。問題是Popup代碼在計算所需大小的時刻並不知道其內容的圖像大小。最好的解決辦法是指定彈出手動（<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; 
}

來源

2012-06-22 21:38:06 Mourner

所以，解決的辦法是：給與圖像的寬度（或youtube iframe），並將bindPopup中的maxWidth設置爲足夠高的值。 – erik

它應該是marker._popup.update（）; – JRT

這似乎真的到了把戲對我來說

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

在找到this link

來源

2014-05-22 21:18:39 snowgage

是的，似乎真的有效的唯一解決方案（傳單指令）。此外，合乎邏輯的解決方案，接受的答案似乎指的是正確的行爲，或者可能是舊版本中已刪除的功能。 – davidkonrad

傳單中的圖片大小（Cloudmade）彈出窗口似乎不計算以確定彈出窗口的大小

回答

相關問題