Google地图中的灰色区域

我已经在我的应用程序中实现了Google地图（在模式中），但正如您在下面的图片中看到的那样，我有一个灰色区域，当然我想摆脱它。可以移动地图，使灰色区域消失，但不应该需要。Google地图中的灰色区域

问题在于地图显示在模式框内，其中包含大量内容，当点击显示模式的按钮时，该模式会动态创建。看来，问题可能是装模态之前地图内容不满载，但我不知道......

HTML：

... 
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
     <h3 id="myModalLabel">Test</h3> 
    </div> 
    <div id="modal-left" class="modal-body left"></div> 
    <div class="modal-body right"> 
     <div id="map"></div> 
    </div> 
    </div> 
    ...

JS：

function initializeMap(latitude, longitude) { 
     var place = new google.maps.LatLng (latitude, longitude); 

     var myOptions = { 
      zoom: 10, 
      center: place, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 

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

     var marker = new google.maps.Marker({ 
      position: place, 
      map: map, 
      title: "" 
     }); 
    }; 

    $('.modal-btn').click(function(){ 
     var producerId = $(this).attr('id'); 

     GetProducer(producerId, function(data) { // <--- data retrieved through ajax 
      initializeMap(data.latitude, data.longitude); 

      var titel = data.name; 

      var content = "<p><img class='modal-img' src='" + data.imgurl + "' /></p>" + 
         "<p>" + data.name + ", " + data.address + "<br/>" + 
         data.zipcode + " " + data.town + "</p>" + 
         "<p><a href='" + data.url + "' >" + data.url + "</a></p>"; 

      $('#myModalLabel').html(titel); 
      $('#modal-left').html(content); 
     }); 
    });

图片1：

图片2：

来源

2012-12-16 holyredbeard

你确定它不是由连接不良造成的吗？ – zerkms

是的，我的连接完美地工作... – holyredbeard

你对灰色图像的疑问将很难排除故障，除非你可以告诉我们如何重现它（一个jsFiddle会很好）。我建议发布你的“如何居中标记？”因为它似乎不相关。 –

通常的原因为什么发生这种情况的是，地图已经被初始化后的地图的大小而改变。如果由于某种原因，更改ID为div的大小=“地图”，你需要触发“调整”事件

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

你可以只尝试触发事件在JavaScript控制台，看看是否有帮助。

请注意，这个答案是一个猜测，因为问题中没有任何东西需要处理，所以请让我知道，如果它没有帮助。

来源

2012-12-16 17:47:49 Nils

感谢您的回答。实际上我之前已经尝试过这一行代码，但它不能解决我的问题。请看看我现在更新的问题，希望能为问题带来更多亮点。 – holyredbeard

我一直在寻找解决方案一段时间。我有完全相同的问题，我不是唯一的问题。上面的代码行是不够的，但我注意到手动调整我的浏览器正在解决这个问题。如果它也解决了你的问题，那么下面是我如何解决我的问题：

1）在初始化地图的函数结尾添加它。它会添加一个监听器并在加载地图时调用该函数。它将基本上模拟调整大小。

google.maps.event.addListenerOnce(map, 'idle', function(){ 
    $(window).resize(); 
    map.setCenter(yourCoordinates); 
});

我不得不回到中心地图调整

2后）创建一个调整大小的监听器，调用谷歌地图调整这样的事件：

$(window).resize(function() { 
    if ($("#map_canvas").children().length > 0){  
     if (map) 
     google.maps.event.trigger(map, 'resize'); 
    }});

我也不得不把地图之外，我初始化函数... 我知道这不是最好的解决方案，但它现在起作用。不要担心resize（）调用。

它似乎与隐藏的div包含谷歌地图有关。我还在this website jfyi上找到了类似的解决方案。祝你好运！

来源

2013-02-28 23:57:23 Bruno

“不要担心resize（）调用。”其结果是：“ReferenceError：无法找到变量：调整大小” –

这为我工作：

var center = map.getCenter(); 
// . . . your code for changing the size of the map 
google.maps.event.trigger(map, "resize"); 
map.setCenter(center);

从链接采取

，即@Bruno提到

来源

2014-06-05 14:56:35 dav

认沽google.maps.event.trigger（地图， “调整”）;在setTimeout函数中，以便在事件触发后触发。

来源

2017-01-12 18:21:33 tanwill

这实际上帮了我。谢啦。 – vohrahul

不客气（我是女孩哈哈:) :) – tanwill

啊！谢谢女孩！ :) – vohrahul

Google地图中的灰色区域

回答

相关问题