Листовка полностью серая, программно открывается маркер всплывающего окна

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

тогда все отображается как ожидалось.

Код кажется правильным, согласно документации Leaflet .

[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 всплывающее окно, открывающееся за раз, тогда это определенно будет правильным решением: просто откройте всплывающее окно вашего последнего маркера.

Если вы настроили свою карту так, чтобы несколько всплывающих окон были открыты одновременно, и вы хотите открыть все из них через цикл, то обязательно отключите автопан (по крайней мере, во время цикла).