5

私は JavaScript の初心者で、別の div 要素内にある div 要素に Google マップを設定する際に助けが必要です。div 要素がネストされていない場合に機能するコードは次のとおりです。

function initialize() {

var myOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

ただし、ネストされた div がある場合は機能しません。

<body onload="initialize()">
<div id="main">
    <div id="map_canvas" style="width:100%; height:100%"></div>
</div>
</body>

この問題を解決するにはどうすればよいですか?

4

2 に答える 2

5

id="main"少しテストした後、 divにも高さを設定する必要があると結論付けました

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

これはマップのコンテナであり、定義された高さがないと何も表示されないためです。カーテンを下ろすようなもので、マップ自体がカーテンを下ろすわけではありません。

マップはネストせずに機能するため、既に似たようなものがあると思いますが、もう一度言及します。

<style type="text/css">
  html, body {height:100%}
</style>
于 2012-05-23T02:02:41.750 に答える
1

Google マップには、キャンバスの静的な高さと幅が必要です。親 div に静的サイズがない場合は、高さと幅に % を使用しないでください。また、Google マップには非表示の div で読み込めないというバグがあります。（そうする場合は、いくつかのトリックが必要です）

于 2012-05-23T02:34:41.470 に答える