2

我正在嵌入一个 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.'
        */
    }
});

谢谢。

4

2 回答 2

7

首先，检查您没有打开任何“响应式图像”的东西，这会弄乱地图图像的大小。

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

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

于 2013-01-08T16:50:37.840 回答
4

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

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

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

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

于 2013-11-25T15:25:02.253 回答