传单地图完全灰色以编程方式打开弹出式 tofa 标记

Question

我用

声明一张传单地图

<div id="map"  class="map-div"></div>

用

结束初始化

    var map = L.map('map').setView([51.178882, -1.826215],16);
    $scope.map = map;

    // OSM Mapnik
    var osmUrl = "<a href='http://www.openstreetmap.org'>Open StreetMap</a>";

    L.tileLayer(
        'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; ' + osmUrl,
            maxZoom: 18,
        }).addTo(map);

我通过调用这个函数（它是 AngularJS，但我怀疑它是否起作用）循环地从我的服务器获取一些数据，并标记到地图：

$scope.AddMarkerToMap = function(companyData, index, array)
{
    var companyName = companyData.company_name;
    var latitude = companyData.latitude;
    var longitude = companyData.longitude;
    var cssClassname = 'comapny_has_no_present_workers';

    if (companyData['currentWorkers'] > 0)
        cssClassname = 'comapny_has_present_workers';

    var pubLatLng = L.latLng(latitude,longitude);

    // see https://leafletjs.com/reference-1.4.0.html#marker
    var marker = L.marker(pubLatLng,
        {
            // this is the tooltip hover stuff
            title: companyData['currentWorkers'] + ' current matches ' + companyData['previousWorkers'] + ' previous matches',

            // see https://leafletjs.com/reference-1.4.0.html#icon
            // this is a permanent label.
            icon: new L.DivIcon({
                className: cssClassname,
                ////html: '<img class="my-div-image" src="http://png-3.vector.me/files/images/4/0/402272/aiga_air_transportation_bg_thumb"/>'+
                ////    '<span class="my-div-span">RAF Banff Airfield</span>'
                html: '<span>' + companyName + '</span>'
            })
        }).addTo($scope.map);

    // see https://leafletjs.com/reference-1.4.0.html#popup
    marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();

};      // AddMarkerToMap()

整个地图突然变灰 - 在开发者控制台中没有报告任何问题。

如果我注释掉这一行

    marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();

然后一切都按预期显示。

根据the Leaflet documentation，代码似乎是正确的。

[Updtae] 我刚刚检查过，如果我只有marker.bindPopup("<b>Hello world!</b><br>I am a popup.")，地图会显示，我可以单击标记以显示弹出窗口。但是当我尝试使用.openPopup(); 以编程方式打开它时，地图全是灰色的。

[Update++] 地图及其标记显示得很好，任何一个

marker.bindPopup("<b>Hello world!</b><br>I am a popup.");
$scope.map.fitBounds(bounds, {padding: [50, 50]});

但是两者都有，地图是灰色的:-(

我做错了什么？

Answer 1

我认为问题出在尝试太频繁地更改地图视图（可能通过 openPopup 和 autoPan，默认情况下处于启用状态），通常是在循环中，而不会延迟地图在每次调用之间实际设置视图.

IIRC，这已被确定为 Leaflet 中的限制，但不幸的是，我在问题跟踪器中找不到确切的线程。

通常，一个非常简单的解决方法是删除循环中的地图视图更改，并只保留最后一个。

在您的情况下，如果您的默认行为是一次仅打开 1 个弹出窗口，那么这绝对是一个有效的解决方案：只需打开最后一个标记的弹出窗口。

如果您确实将地图配置为同时打开多个弹出窗口，并且确实希望通过循环打开所有弹出窗口，请确保禁用自动平移（至少在循环期间）。