1

私はこれがここでよくある問題であることを知っています.私は解決策のためにここにあるすべてのトピックをすでに見ていますが、タブを変更するとこの問題を続けます.

ここに画像の説明を入力

私のjsコードを見てください：

  function initialize() {

//replace 0's on next line with latitude and longitude numbers from earlier on in tutorial.
var myLatlng = new google.maps.LatLng(40.654372, -7.914174);
var myLatlng1 = new google.maps.LatLng(43.654372, -7.914174);
    var myOptions = {
      zoom: 16,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var myOptions1 = {
      zoom: 16,
      center: myLatlng1,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

//here's where we call the marker.
//getElementById must be the same as the id you gave for the container of the map
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var map1 = new google.maps.Map(document.getElementById("map_canvas1"), myOptions1);
 //google.maps.event.trigger(map1, 'resize');
 //map1.setCenter(myLatlng1);

        var marker = new google.maps.Marker({
      position: myLatlng,
      title:"ADD TITLE OF YOUR MARKER HERE"
  });

        var marker1 = new google.maps.Marker({
      position: myLatlng1,
      title:"ADD TITLE OF YOUR MARKER HERE"
  });

        var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '<\/div>'+
    '<h2 id="firstHeading" class="firstHeading">ADD TITLE HERE<\/h2>'+
    '<div id="bodyContent">'+
    '<p style="font-size:1em">ADD DESCRIPTION HERE<\/p>'+
    '<\/div>'+
    '<\/div>';

var infowindow = new google.maps.InfoWindow({
    content: contentString
});

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});

google.maps.event.addListener(marker1, 'click', function() {
  infowindow.open(map1,marker1);
}); 

google.maps.event.addListener(map, "idle", function(){
    marker.setMap(map); 
});

google.maps.event.addListener(map, "idle", function(){
    marker1.setMap(map1);
});  


  // To add the marker to the map, call setMap();



  google.maps.event.addListenerOnce(map, 'idle', function() {
    google.maps.event.trigger(map, 'resize');
    map.setCenter(myLatlng); // be sure to reset the map center as well
});

google.maps.event.addListenerOnce(map1, 'idle', function() {
    google.maps.event.trigger(map1, 'resize');
    map1.setCenter(myLatlng1); // be sure to reset the map center as well
});


  }


  function loadScript() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
    document.body.appendChild(script);
  }

  window.onload = loadScript;

各タブに 1 つずつ、2 つのマップがあります。他の投稿からこれを使用して、中心点が左隅に隠れているという問題を解決できました。

    .ui-tabs .ui-tabs-hide { /* my_tabs-1 contains google map */
    display: block !important;
    position: absolute !important;
    left: -10000px !important;
    top: -10000px !important;
}

しかし、ここに記載されている問題は、ここで他のトピックを見ても運がありませんでした。

4

4 に答える 4

7

私はきれいな解決策を見つけました：

<script type="text/javascript">
         function showAddressMap(){
                var mapOptions = {    
                          zoom: 15,
                          mapTypeId: google.maps.MapTypeId.ROADMAP
                         }

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

                 geocoder = new google.maps.Geocoder();
            // searchQuery is the address I used this in a JSP so I called with $
                 geocoder.geocode( {'address': "${searchQuery}"}, function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                          map.setCenter(results[0].geometry.location);
                          var marker = new google.maps.Marker({
                              map: map,
                              position: results[0].geometry.location
                          });
                        } else {
                          alert("Geocode was not successful for the following reason: " + status);
                        }
                 });
                 google.maps.event.trigger(map, 'resize');

             //}
          }

          JQ(document).ready(function(){
            JQ('#tabs').tabs();
            JQ('#maptab').bind('click', function() {
                showAddressMap();
            });
          });
        </script>



    <div id="tabs">
        <li><a href="#tabs-1" id="maptab"><fmt:message key="fieldset.map"/></a></li>
    </div>
    <div id="tabs-1">
    <fieldset>
            <div id="map_canvas" style="height:500px; width:100%;"></div>
    </fieldset>
    </div>
于 2012-11-14T14:36:13.543 に答える
1

中心を設定し、サイズ変更イベントをトリガーする必要があります。

MyMap.setCenter(MyCenterCoords);
google.maps.event.trigger(MyMap, 'resize');
于 2012-09-28T14:24:31.927 に答える
0

このコード google.maps.event.trigger(map, 'resize') は、次のようにページに表示されます。

$('#map_result').live('pageshow',function(event){
    google.maps.event.trigger(map, 'resize');
});

ところで、これに対する解決策は見つかりましたか？私は実際にcssを使用して動作させます。

于 2013-03-22T04:16:30.130 に答える
0

エレガントなソリューションではないことはわかっていますが、各タブ内に iframe を追加するだけです。タブをクリックすると、マップが正しいサイズで読み込まれます。

于 2017-01-27T21:57:16.640 に答える