7

我安装了 Google Maps API V3，但无法让调整大小功能正常工作。我已将脚本放在一个分区中显示地图，该分区在单击链接时会下拉，但是，它会在两侧显示灰色区域。据我所知，我已经阅读了必须在显示除法的脚本中具有调整大小功能的实例，但我无法正确实现它。

在此处输入图像描述

这是导致划分 (class="content") 显示的代码：

    $(function() {
$('.action').click(function() {          
    var name = $(this).attr("name");
    var content = $('.content[name=' + name + ']');
    $('.content').not(content).hide('fast');
    content.slideToggle('fast');
});

我在 id 为“map”的 div 中有地图。

  <div class="map">
      <div id="map_canvas""></div>
  </div>

我整晚都在网站的其他部分工作，目前相当杂乱无章。抱歉，如果我忘记发布解决此问题所需的内容。

在此先感谢，BC。

4

2 回答 2

8

您需要在谷歌地图上手动调整大小。

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

参考。

更新

<script type="text/javascript"> 
// Global Variable
var map;

// This is a global Function
function initialize() 
{ 
  // This variable is scoped only for the initialize function,
  // it is not available to other functions scoped globally
  var myOptions = 
  { 
    center: new google.maps.LatLng(-34.397, 150.644), 
    zoom: 8, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
  };

  // Instead of a function scoped map variable this should be global
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  google.maps.event.trigger(map, 'resize') 
} 
</script>

然后可以改成如下代码：

$(function() 
{
  $('.action').click(function() 
  {          
    var name = $(this).attr("name");
    var content = $('.content[name=' + name + ']');
    $('.content').not(content).hide('fast');
    // this uses the callback functionality
    // to only throw the trigger after the
    // animation finishes.
    content.slideToggle('fast',
      function() 
      {
        google.maps.event.trigger(map, 'resize');
      });
  });
});

于 2012-06-26T19:37:41.863 回答
0

嘿，我意识到一个快速简单的解决方法：

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(42.365885, -71.258658),
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    google.maps.event.trigger(map,'resize');
}

$(document).on("pageshow", "#map", function () {
    initialize();
});

页面 div 称为“map”，地图 div 称为“map-canvas”。

这似乎是在显示页面时初始化地图。通过在用户打开地图时加载地图，这会使您的应用程序变慢，但它避免了由 dom 和诸如此类的错误引起的错误。这完全解决了我的phonegap + jquery mobile + google map app上的角落地图/灰色区域问题！

于 2013-07-25T01:10:27.513 回答