4


我很难解决在 Mapbox 地图上使用 Leaflet 库时遇到的问题。具体来说，我编写了代码，以便将弹出窗口绑定到地图上的每个图标/标记。在每个弹出窗口中都有一个链接到不同网站的图像。不幸的是，该图像的大小似乎不计入实际弹出窗口大小的计算中，具有以下后果：

我的代码如下：

    <?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

bindPopup()当我遇到问题时，通过 Dom 创建一个新元素并将其用作弹出窗口的内容对我有用。

虽然没有记录，但查看源代码会发现此方法可以将 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

我是传单作者。问题是 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-22T21:38:06.973 回答