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 应用程序中的白线问题