Question

在这里，我的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);
       }
    }

Answer 1

如果有人还在努力解决这个问题，那么它似乎是传单中的错误：https://github.com/Leaflet/Leaflet/issues/2021

它已在最新版本中修复，但如果您无法更新，则可以通过设置超时来解决竞争条件：

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

Answer 2

你是如何尝试调试问题的？你的网络和js控制台说什么？

尝试缩小，也许fitBounds会过度缩放地图。我有这个问题。解决方案是在fitBounds中使用maxSize选项，请参阅传单文档。

Mapbox fitBounds，函数边界映射但不渲染切片

2 个答案: