2014-04-24 9 views
8

Tutaj, mój kod javascript do renderowania znaczników na mapie i po tym dopasowaniu granic tej mapy.Mapbox fitBounds, mapuje mapę funkcji, ale nie renderuje kafelków

Ograniczenia map są dopasowywane zgodnie z geojson, ale problem polega na tym, że gdy na mapie znajduje się jakiś znacznik , a ja próbuję dopasować oprawę, obrazy kafelków map nie są renderowane.

Na mapie wyświetla tylko znaczniki, brak obrazów płytek.

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

Odpowiedz

15

Jeśli ktoś nadal zmaga się z tym, wydaje się być błąd w PACJENTA: https://github.com/Leaflet/Leaflet/issues/2021

Został on rozwiązany w najnowszej wersji, ale jeśli nie można aktualizować można obejść przez wyścigu ustawianie limitu czasu:

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

później, próbuję tak samo jak ty. – 111

+1

Uaktualnienie ulotki do wersji v = 0.7.5 (najnowsza wersja) nie rozwiązuje tego problemu. –

0

W jaki sposób próbowałeś rozwiązać problem? Co mówi twoja sieć i konsola js?

Spróbuj pomniejszyć, może dopasowaćBounds powiększa mapę zbyt wiele. Miałem ten problem. Rozwiązanie wykorzystywało opcję maxSize w fitBounds, patrz dokumentacja ulotek.

+0

Nie, poziom powiększenia mapy nie jest maksymalny i nie nadchodzi błąd konsoli. Kiedy widzę sieć, mapbox js przerwał wszystkie żądania załadowania obrazów kafli. więc nie wyświetlają się obrazy płytek. – 111

Powiązane problemy