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

Question

我用

声明传单 map

<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，但我怀疑这是否起作用)循环从我的服务器获取一些数据，并将标记标记到 map 上:

$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()

整个 map 突然变成灰色 - 开发者控制台中没有报告任何问题。

如果我注释掉该行

    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.") ， map 就会显示，我可以单击标记来显示弹出窗口。但是当我尝试使用 .openPopup(); 以编程方式打开它时 map 全是灰色的。

[更新++] map 及其标记显示得很好，可以使用以下任何一个

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

但是对于两者来说， map 都是灰色的:-(

我做错了什么？

Answer 1

我认为问题来自于尝试过于频繁地更改 map View (可能通过带有 autoPan 的 openPopup，默认情况下处于启用状态)，通常是在循环中，而不会给 map 带来任何延迟以在每次调用之间实际设置 View .

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

通常，一个非常简单的修复方法就是删除循环中的 map View 更改，并仅保留最后一个。

就您而言，如果您的默认行为是一次仅打开 1 个弹出窗口，那么这肯定是一个有效的解决方案:只需打开最后一个标记的弹出窗口即可。

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