Mapbox - 层中奇怪的白线

Question

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

有谁知道问题出在哪里？

我也在使用 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 应用程序中出现白线的问题