0

これが私の問題に対するより焦点を絞った質問です。3 つのタブに 3 つのマップがあります。最初のマップは表示されますが、他の 2 つは表示されません。タブが呼び出されたときにマップのサイズを変更する必要があることに気付きました。しかし、サイズ変更コードをどこに配置すればよいかわかりません。現在、結果が得られていません。

 $('.nav-tabs a').click(function (e) {
      e.preventDefault();
      $(this).tab('show');
      createMap();

})


function createMap() {

    var mapOptions = {
      center: new google.maps.LatLng(30.30, -97.70),
      zoom: 12,
      mapTypeControlOptions: {
          mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
        }
    };

    var map = new google.maps.Map(document.getElementById('map_canvas'),
        mapOptions);

    var map2 = new google.maps.Map(document.getElementById('map_canvas2'),
    mapOptions);

    var map3 = new google.maps.Map(document.getElementById('map_canvas3'),
    mapOptions);

  google.maps.event.addDomListener(window, 'resize', function() {
  map2.setCenter(30.30, -97.70);
  });
  google.maps.event.addDomListener(window, 'resize', function() {
  map3.setCenter(30.30, -97.70);
  });

}

タブのクリックで機能と呼ばれていますが、機能していないようです。

4

3 に答える 3

0

このコードを試してください

$('a.location-map').on('click', function (e) {
            setTimeout(function(){  initialize();  
            google.maps.event.trigger(map, 'resize');},1000);
});
于 2015-07-04T08:06:31.223 に答える
0

新しいタブをクリックしたときにサイズ変更イベントをトリガーする必要があります。Google マップ オブジェクトのインスタンスをイベント トリガーに渡す必要があります。

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

https://developers.google.com/maps/documentation/javascript/reference#event

于 2013-02-13T20:06:40.060 に答える