10

これに関していろいろな例や問題点などを調べてみたのですが、何も見つからないようですので、最後に質問させていただきます。

私が持っている地図は、マーカーを中央に配置しておらず、表示さえしていません。左上隅がポイントです。こちらをご覧ください：http: //i.imgur.com/Cc1ZK.png

連絡先情報のタブシステムがあります。誰かがタブをクリックすると、マップと情報が下にスライドして適切なマーカー (4 つの個別のマップ) が表示されますが、最初のマーカーが機能しないため、コピー/貼り付けできません。

これが私のコードです：

脚本：

var latlng = new google.maps.LatLng(42.3535727, -83.0591444);
var options = {  
      zoom: 14,  
      center: latlng,  
      mapTypeId: google.maps.MapTypeId.ROADMAP,
    };
var map = new google.maps.Map(document.getElementById('detroit_map'), options);
marker1 = new google.maps.Marker({  
            position: new google.maps.LatLng(42.3535727, -83.0591444),
            map: map
          }); 
map.setCenter(latlng);

HTML:

<div id="detroit_map" style="width:270px;height:170px;"></div>

PS、クロム開発者ツールでエラーは発生しません。

うまくいけば、私が見落としていたのは本当に単純なことです。

ありがとう

将来の視聴者のための答えを見つけました：

結局のところ、ブロック間の表示を引き起こしているタブがあり、マップのロードを奇妙にしているものはありませんでした。それぞれの初期化関数を作成し、setTimout('functionName', 1000); を呼び出しました。ロードするマップを呼び出します。

マップ コードを少し変更しましたが、w3schools のチュートリアルですべてを見つけることができます。

4

2 に答える 2

3

タブをクリックした後、マップを初期化します。これは、タブ内で使用する場合、iframe Google マップでも機能します。

于 2013-09-23T09:40:07.430 に答える
2

マップのサイズを変更するように指示します..

google.maps.event.trigger(map, 'resize');

map は、によって返されるマップ インスタンスです。

map = new google.maps.Map(document.getElementById("map_canvas"), {
     mapTypeId: google.maps.MapTypeId.ROADMAP
});
于 2012-12-26T18:45:46.657 に答える