谷歌地图API V3灰色地带 [英] Google Maps API V3 Gray Areas

问题描述

我安装了谷歌地图API V3，但我遇到了麻烦调整大小功能正常工作。我已经把脚本显示点击一个链接时滴下来师地图，但是，它显示了双方的灰色地带。我读过，你必须有显示的分工，从我能理解剧本的调整大小功能的情况下，但我有正确实现它的麻烦。

I installed the Google Maps API V3, but I'm having trouble getting the resize function to work properly. I've put the script to display the map in a division that drops down when a link is clicked, however, it shows gray areas on the sides. I've read instances where you have to have the resize function in the script that displays the division, from what I can understand, but I'm having trouble implementing it properly.

这里的code，导致分工（类=内容），以透露：

Here's the code that causes the division (class="content") to be revealed:

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

我有地图id为地图。

I have the map inside of a div with the id "map".

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

我一直通宵在网站上的其它部分工作，目前是相当丢三落四。对不起，如果我忘了张贴必要的行动来解决这一点。

I've been up all night working on other portions of the site and am fairly scatterbrained at the moment. sorry if I forgot to post something necessary to resolve this.

在此先感谢，BC。

推荐答案

您需要手动抛出，即使调整谷歌地图上。

You need to manually throw the even resize on the google map.

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>

然后就可以更改为以下code：

Then you can change to the following code:

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

这篇关于谷歌地图API V3灰色地带的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！