1

更新 wfのソリューションを実装しようとしましたが、エラーは引き続き発生します。ここで実際の例を見ることができます --> http://www.opohills.com/taipei-rentals/apollo_a.php

下にスクロールして [場所] タブをクリックします。

ブートストラップ タブ内に Google マップを読み込もうとしています。私はここで議論されているのと同じ問題に遭遇しており、SA で広範に -

https://github.com/twitter/bootstrap/issues/2330

修正は、タブがクリックされたときにコールバックを追加して、マップをロードすることです。これを実装しようとしていますが、成功していません。エラーは引き続き発生します (左上隅にマップの 1/8 しか表示されない場合)

以下は私のJavaScriptです。これは私の最初の実際の試みであるため、何か間違ったことをしていると確信しています-

  <script type="text/javascript">

    var map,
        marker = new google.maps.Marker({
                   position: new google.maps.LatLng(25.041483, 121.553984),
                   draggable: true,
                   title: 'Opo Apartment' }),
        infoWindow = new google.maps.InfoWindow({content: 'Apollo Apartment'});

        $('#location').on('show', function(e) {
          if( map == undefined) {  

            map =    new google.maps.Map(
                     document.getElementById('map-canvas'), 
                      { zoom: 14,
                        center: new google.maps.LatLng(25.041483, 121.553984),
                        mapTypeId: google.maps.MapTypeId.ROADMAP })
          }
          marker.setMap(map);
          infoWindow.open(map, marker);
        })

  </script>​

これについてどう思いますか？

4

3 に答える 3

5

私はそれを修正しましたが、タブから離れた別のdivに保持し、特定のタブがクリックされたときに表示します。同じサイトにアクセスしてコードを確認できます

$(document).ready(function(){

  var map,
      marker = new google.maps.Marker({
                 position: new google.maps.LatLng(25.041483, 121.553984),
                 draggable: true,
                 title: 'Opo Apartment' }),
      infoWindow = new google.maps.InfoWindow({content: 'Apollo Apartment'});



  $('#location').on('show', function(e) {
    if( map == undefined) {  

      map =    new google.maps.Map(
               document.getElementById('map-canvas'), 
                { zoom: 14,
                  center: new google.maps.LatLng(25.041483, 121.553984),
                  mapTypeId: google.maps.MapTypeId.ROADMAP })
    }
    document.getElementById("largemap").style.display="block";

    google.maps.event.trigger(map, 'resize');
            marker.setMap(map);
    infoWindow.open(map, marker);
  })
  $('.tabclick').on('show', function(e) {
    document.getElementById("largemap").style.display="none";

  })

})
于 2012-12-22T07:41:39.063 に答える
2

このようにしてみましたか？

$('#location').on('show', function(e) {
  if( map == undefined) {  

    map =    new google.maps.Map(
             document.getElementById('map-canvas'), 
              { zoom: 14,
                center: new google.maps.LatLng(25.041483, 121.553984),
                mapTypeId: google.maps.MapTypeId.ROADMAP })
  }
  marker.setMap(map);
  infoWindow.open(map, marker);

  google.maps.event.addListenerOnce(map, "bounds_changed", function() {
    google.maps.event.trigger(map, "resize");
  });
})
于 2012-12-17T08:31:12.493 に答える
-1

https://github.com/twbs/bootstrap/issues/2330の alexxB に感謝します。

Cake、Bootstrap 3.0、Jquery 1.11 を使用しています。最初に、jquery 関数が任意の関数でトリガーされ、javascript の問題を破棄することを確認してから、これを追加します。

  $('a[href="#my_id_tab_map"]').on('shown.bs.tab', function(e)
    {
        google.maps.event.trigger(map, 'resize');
    });
于 2014-03-25T22:00:05.640 に答える