Google Maps API V3灰色区域

我安装了Google Maps API V3，但是我无法让resizefunction正常工作。 我已经把脚本显示在一个分区中，当点击一个链接时它会下降，但是，它会在两侧显示灰色区域。 我已经读过你必须在脚本中显示resizefunction的实例，从我可以理解的方面来看，但是我无法正确实现它。

这是导致除法（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里面的地图。

我已经整晚都在网站的其他部分工作，而且目前相当分散。 对不起，如果我忘记发布必要的东西来解决这个问题。

在此先感谢，Bc。

Answer 1

您需要在谷歌地图上手动抛出偶数resize。

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

参考 。

更新

然后您可以更改为以下代码：

 $(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'); }); }); }); 

Answer 2

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

 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(); }); 

使用名为“map”的页面div和名为“map-canvas”的地图div。

这似乎是在显示页面时初始化地图。 这可以通过在用户打开时加载地图来降低您的应用程序速度，但它可以避免由dom和诸如此类引起的错误。 这完全修复了我的phonegap + jquery mobile + google地图应用程序中的角落地图/灰色区域问题！