Mapbox fitBounds, функция ограничивает карту, но не отображает плитки

здесь мой код javascript для отображения маркеров на карте и после этого fitBounds этой карты.

границы карты подходят в соответствии с geojson, но проблема в том, что когда есть какой-либо маркер на карте, и я пытаюсь соответствовать привязке, изображения плиток карты не получают рендеринга.

на карте отображаются только маркеры, нет изображений плитки.

var latLongCollection = [];
    var map;
    $(document).ready(function() {
    map();
    });


    function map() {
      map = L.mapbox.map('DivId', 'ProjectId');
      GetData();
     }

    function GetData() {
       $.ajax({
           type: "GET",
           url: someUrl,
           dataType: "json",
           contentType: "application/json; charset=utf-8",
           success: AjaxSuccess,
           error: function () {
           }
       });
    }

     function AjaxSuccess(data) {
      if (data == null || data.length == 0) {
          return;
      }

      var geoJson = {
          "type": "FeatureCollection",
          "features": []
      };

      $.each(data, function (index, value) {

          var latitude = parseFloat(value.Latitude),
              longitude = parseFloat(value.Longitude);

          if (latitude && longitude) {
              var dataJson = {
                  type: "Feature",
                  geometry: { type: "Point", coordinates: [longitude, latitude] },
                  properties: {
                      someProp: value.SomeProperty,
                      }
              };

              geoJson.features.push(vehicleJson);
          }
      });

      var markerLayer = L.mapbox.featureLayer(geoJson).addTo(map);

      markerLayer.eachLayer(function (marker) {
           var feature = marker.feature;
           var featureProperty = feature.properties;

           if (featureProperty.someProp) {
               marker.setIcon(L.divIcon({
                   html: 'htmlstring',
                   iconSize: [35, 75]
               }));
           }
           else {
               marker.setIcon(L.divIcon({
                   html: 'anotherhtmlstring',
                   iconSize: [35, 75]
               }));
           }

           latLongCollection.push(marker._latlng);
    });

     markerLayer.on('click', function (e) {
         map.panTo(e.layer.getLatLng());
     });

        if (latLongCollection.length > 0) {
           map.fitBounds(latLongCollection);
       }
    }

2 ответов


Если кто-то все еще борется с этим, это похоже на ошибку в листовке:https://github.com/Leaflet/Leaflet/issues/2021

Он был исправлен в последней версии, но если вы не можете обновить, вы можете обойти условие гонки, установив тайм-аут:

setTimeout(function () {
    map.fitBounds(latLongCollection);
}, 0);

Как вы пытались отладить проблему? Что говорит ваша сеть и консоль js?

попробуйте уменьшить, может fitBounds слишком много масштабирование карты. У меня была проблема. Решение использовало параметр maxSize в fitBounds, см. документы листовки.