Mapbox fitBounds, function bounds Karte, aber keine Kacheln

Question

Hier mein JavaScript-Code zum Rendern von Markierungen in map und danach fitBounds dieser Map.

Map Grenzen werden nach Geojson passen, aber das Problem ist, dass, wenn es einen Marker auf der Karte gibt und ich versuche, gebunden, Kartenkacheln Bilder werden nicht erhalten rendern.

In der Karte werden nur Marker angezeigt, keine Kachelbilder.

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

Wenn jemand noch kämpfen mit diesem, scheint es ein Fehler in Leaflet zu sein: https://github.com/Leaflet/Leaflet/issues/2021

Es ist in der neuesten Version wird behoben, aber wenn Sie nicht aktualisieren können, können Sie rund um die Race-Bedingung arbeiten, indem sie Einstellen eines Timeouts:

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

Answer 2

Wie haben Sie versucht, das Problem zu debuggen? Was sagt Ihr Netzwerk und Ihre Konsole?

Versuchen Sie herauszuzoomen, vielleicht fitBounds zoomt Ihre Karte zu viel. Ich hatte dieses Problem. Die Lösung verwendete die Option maxSize in fitBounds, siehe Faltblattdokumente.