2

マップボックスマップを埋め込んでいます。添付の​​画像からわかるように、マップの中央に空白行が配置されていることがわかりました。

ここに画像の説明を入力してください

誰かが問題が何であるか知っていますか？

私もtwitter-bootstrapフレームワークを使用しています。

これは私が使用するマップdivhtml/ 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 変換を使用してタイルを配置し、OS とブラウザーの組み合わせによってはそれを適切に処理できないという事実に関連しています。

解決策は、実際のライブラリをロードする前に 3D 変換を無効にすることです。

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

これにより、Bootstrap/Mapbox アプリの Firefox での白い線の問題が解決されました

于 2013-11-25T15:25:02.253 に答える