2

Google Maps API v3 を動作させようとしていますが、うまくいきます! ただし、マップを表示する div を「map_canvas」の ID を持つように設定した場合のみです。そのIDは必要ですか？複数のマップを 1 ページに表示したい場合はどうすればよいでしょうか。

js と html マークアップの両方で ID を設定しています

次のように問題なく動作します。

JS

<script type="text/javascript" >
 function initialize() {
    var mapOptions = {
     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"), mapOptions);
 }
</script>

HTML

 <div style="width:300px; height:300px;">
  <div style="width:100% height:100%" id="map_canvas"></div>
 </div>

firebug に従ってマップをロードしますが、これを行うと何も表示されません。

JS

<script type="text/javascript" >
 function initialize() {
    var mapOptions = {
     center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("anyotherid"), mapOptions);
 }
</script>

HTML

 <div style="width:300px; height:300px;">
  <div style="width:100% height:100%" id="anyotherid"></div>
 </div>

アップデート

問題を再現するサンプル ページを次の場所にアップロードしました 。

私が気付いた特異な点の 1 つは、マップを表示する div の map_test から map_canvas に firebug で id 属性を編集すると、id がヘッドの JS で map_test として定義されているにもかかわらず、突然表示されることです。

4

2 に答える 2

2

そのIDは必要ですか？

いいえ。

複数のマップを 1 ページに表示したい場合はどうすればよいでしょうか。

div に複数の一意の ID を使用します。

「マップ」を使用するドキュメントの例を次に示します。これが機能しない場合は、何か問題があります。あなたが投稿したスニペットには表示されません。問題を示すライブリンクまたは jsfiddle はありますか?

于 2012-08-27T05:52:38.570 に答える
1

にセミコロンがありません

<div style="width:100% height:100%" id="anyotherid"></div>

そのはず

<div style="width:100%; height:100%" id="anyotherid"></div>

(width:100%; の後のセミコロン;)、しかし、そのセミコロンも map_canvas スニペットにないため、間違ってコピー/貼り付けしない限り、おそらく問題にはなりません。

于 2012-08-27T07:11:56.503 に答える