1

私は次のようにストリートビューを使用しました

/* Map html */
<div id="mapDiv" class="">
    <div id="map-holder">
    <div id="map_canvas" class="bigmap"></div>
    <div id="map_stv" class="minimap" style="display: none"></div>
    </div>
</div>

/* Css associated */
.bigmap{
    width:100%;
    height:100%;
}

.minimap{
    width:50%;
    height:100%;
}
#map_stv {
    position: absolute;
    top: 0;
    right: 0;
}
#map_stv img {
    border: none !important;
    max-width: none !important;
}

ストリートビューを表示する必要があるときはいつでも、ミニマップクラスをmap_canvasに追加し、map_stvを切り替えます。その正常に動作します。しかし、マップのサイズが768x1024の場合、次の問題が発生します

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

誰かがこれに直面しましたか？これに関するポインタはありますか？

4

1 に答える 1

1

私はあなたのためにフィドルを作りました！

問題は、マップが画像に対して伸びすぎているため、ストリートビュー画像の上部が切り取られていることです。

マップをレスポンシブにするために、次を追加しました。

style="width: 99%; height: 99%;

あなたの#map-holderdivに。

結論として、私の最善の策は、マップwidthとアスペクト比をほぼ均等にすることです。height

于 2013-03-26T11:37:25.693 に答える