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

问题描述

我安装了 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');});

我有一个 div 里面的地图，id 为map".

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

我整夜都在为网站的其他部分工作，目前我相当分散.抱歉，如果我忘记发布解决此问题所需的内容.

提前致谢，Bc.

解决方案

您需要在 google 地图上手动抛出均匀调整大小.

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');//这使用回调功能//只在触发之后触发//动画结束.content.slideToggle('快',功能(){google.maps.event.trigger(map, 'resize');});});});

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.

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

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.

Thanks in advance, Bc.

解决方案

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

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

Reference.

Update

<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>

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

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