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

我认为问题出在试图改变地图视图（可能是通过默认情况下通过带有autoPan的openPopup，它是默认启用的）过于频繁的情况，通常是在循环中进行，而没有任何延迟，地图实际上不会在每次调用之间设置视图

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

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

在您的情况下，如果您一次只能打开1个弹出窗口，则这绝对是一个有效的解决方案：只需打开最后一个标记的弹出窗口即可。

如果您确实配置了地图以同时打开多个弹出窗口，并且确实要通过循环打开所有弹出窗口，那么请确保禁用autoPan（至少在循环过程中）。

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

1 个答案: