4


MapboxマップでLeafletのライブラリを使用しているときに遭遇した問題を回避するのに苦労しています。具体的には、ポップアップがマップ上の各アイコン/マーカーにバインドされるようにコードを記述しました。各ポップアップ内には、別のWebサイトにリンクする画像があります。残念ながら、この画像のサイズは実際のポップアップのサイズの計算にはカウントされないようで、次のような結果になります。

私のコードは次のとおりです。

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

これに対する可能な解決策を考えられますか？プログラミングに関してはかなり初心者だと思いますが、これを破ることができずに何日も経ちました。私は本当にあなたの助けに感謝します！どうもありがとう！

4

3 に答える 3

6

これは私にとって本当にトリックのようでした

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

このリンクで見つかりました

于 2014-05-22T21:18:39.467 に答える
4

Domを介して新しい要素を作成し、それをポップアップのコンテンツとして使用すると、bindPopup()問題が発生したときにうまくいきました。

文書化されていませんが、ソースコードを見ると、このメソッドは、マークアップを含む文字列ではなく、Domノードをコンテンツとして使用できることがわかります。

この方法を使用すると、クリックしたときにポップアップのサイズが正しくなりました。

例：

var divNode = document.createElement('DIV');
divNode.innerHTML = '<p>My custom HTML <img src="..." /></p>';
marker.bindPopup(divNode);
于 2012-10-10T14:01:39.730 に答える
3

私はリーフレットの作者です。問題は、ポップアップコードが必要なサイズを計算した瞬間に、コンテンツの画像サイズを認識しないことです。最善の解決策は、ポップアップ内の各画像の幅と高さを手動で指定することです（<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-22T21:38:06.973 に答える