Question

我的地图是隐藏的div。当我尝试显示div时，它会显示地图的一半。 google.maps.event.trigger（地图，＆＃39;调整大小＆＃39;）;不适合我。

    $('nav li a').click(function(e){
     e.preventDefault();
      var id = $(this).attr('href');
       $(id).fadeIn(2000);
  });

// When the window has finished loading create our google map below
google.maps.event.addDomListener(window, 'load', init);


function init() {
    var iconBase = 'img/marker.png';

    var myOptions = {
        scrollwheel: false,
        zoom: 7,        
        center: new google.maps.LatLng(40.157885, -74.389343),
        mapTypeId: google.maps.MapTypeId.ROADMAP            
    };

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

    var point = new google.maps.LatLng(40.157885, -74.389343);
    var marker = new google.maps.Marker({
        position: point,
        icon: iconBase,
        map: map       
    });
}

Answer 1

由于我需要对地图对象的引用，我决定将它们放在数组中var maps = new Array();当我创建每个地图时，我只是将它推入该数组中。稍后在我的点击事件中，我得到了旧中心，称为调整大小，并重置中心。

$('a').click(function(e){
      e.preventDefault();
      var id = $(this).attr('href');
      $('#' + id).fadeIn(2000);

      var map = maps[id];
      var center = map.getCenter();
      google.maps.event.trigger(map, "resize");
      map.setCenter(center);

    });

这允许地图在显示后重绘（而不是仅显示四分之一）。

完整的工作示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head>
<body style="font-family: Arial;border: 0 none;">
<a href='0'  />reveal 1</a>
<a href='1'  />reveal 2</a>
<a href='2'  />reveal 3</a>
<div style='width:600px;'>
<div id="0" style="width: 200px; height: 200px; display:none; float:left;"></div>
<div id="1" style="width: 200px; height: 200px; display:none; float:left;"></div>
<div id="2" style="width: 200px; height: 200px; display:none; float:left;"></div>
</div>
  <script type="text/javascript">
    var maps = new Array();
    google.maps.event.addDomListener(window, 'load', init);

    function init() {
    var iconBase = 'img/marker.png';

    var myOptions = {
        scrollwheel: false,
        zoom: 7,
        center: new google.maps.LatLng(40.157885, -74.389343),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map1 = new google.maps.Map(document.getElementById('0'), myOptions);

    var point = new google.maps.LatLng(40.157885, -74.389343);
    var marker = new google.maps.Marker({
        position: point,
        icon: iconBase,
        map: map1
    });

    maps.push(map1);

    map2 = new google.maps.Map(document.getElementById('1'), myOptions);
    maps.push(map2);

    map3 = new google.maps.Map(document.getElementById('2'), myOptions);
    maps.push(map3);
}

$('a').click(
    function(e)
    {
      e.preventDefault();
      var id = $(this).attr('href');
      $('#' + id).fadeIn(2000);

      var map = maps[id];
      var center = map.getCenter();
      google.maps.event.trigger(map, "resize");
      map.setCenter(center);

    });

  </script>

</body>
</html>

隐藏div中的Google地图无法正常运行

1 个答案: