Mapbox fitBounds, mappa dei limiti di funzione ma non esegue il rendering delle tessere

Question

Qui, il mio codice javascript per eseguire il rendering dei marker sulla mappa e dopo i fitBound di quella mappa.

I limiti della mappa si adattano secondo geojson, ma il problema è che quando sulla mappa c'è un qualsiasi marker e io provo ad adattarlo, le immagini delle tessere della mappa non vengono visualizzate.

Nella mappa vengono visualizzati solo indicatori, nessuna immagine di tile.

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

Answer 1

Se qualcuno è ancora alle prese con questo, sembra essere un bug in Leaflet: https://github.com/Leaflet/Leaflet/issues/2021

E 'stato risolto nella versione più recente, ma se non è possibile aggiornare è possibile aggirare la condizione di competizione da parte impostazione di un timeout:

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

Answer 2

Come hai provato a risolvere il problema? Qual è il tuo network e console js che dice?

Provare a ridurre, forse adattareBounds ingrandisce troppo la mappa. Ho avuto questo problema. La soluzione utilizzava l'opzione maxSize in fitBounds, consulta i documenti del depliant.