Mapbox - 层中奇怪的白线

Question

我正在嵌入一个地图集地图 - 我发现在地图中间放置了一个空白行，正如您可以从附图中看到的那样。

有谁知道问题是什么？

我也在使用twitter-bootstrap框架。

这是我用的地图div html / css：

<div class="map"></div>

    .map{
        max-width:none !important;
        width:100% !important;
        height:250px !important;
        max-height:250px;
        position: relative;
        margin:0 auto !important;
    }

这是我的js：

var map = mapbox.map(_element);
map.addLayer(mapbox.layer().id('examples.map-uh4ustwo'));

// Create an empty markers layer
var markerLayer = mapbox.markers.layer();

// Add interaction to this marker layer. This
// binds tooltips to each marker that has title
// and description defined.
mapbox.markers.interaction(markerLayer);
map.addLayer(markerLayer);

map.zoom(3).center({ lat: _json.lat, lon: _json.lon });

// Add a single feature to the markers layer.
// You can use .features() to add multiple features.
markerLayer.add_feature({
    geometry: {
        coordinates: [_json.lon, _json.lat]
    },
    properties: {
        'marker-color': '#F96363',
        'marker-symbol': 'circle-stroked',
        /*title: 'Example Marker',
        description: 'This is a single marker.'
        */
    }
});

感谢。

Answer 1

首先，检查您是否没有打开任何“响应式图像”内容，这会混淆地图图像的大小。

然后，尽量不要使用!important。

最后，检查您的浏览器是否放大或缩小。在Chrome中，点击⌘0。

Answer 2

问题与以下事实有关：默认情况下，leaflet.js使用CSS3 3D转换来定位切片，而操作系统和浏览器的某些组合无法正确处理。

解决方案是在加载实际库之前禁用3D变换：

<script>L_DISABLE_3D = true;</script>
<script src="mapbox.js"></script>

这解决了我在Firefox for Bootstrap / Mapbox应用程序中的白线问题