Google地图中的灰色区域

问题描述

我已经在我的应用（模式）中实施了Google地图，但是您可以在下面的图片中看到，有一个灰色区域，我当然希望摆脱。可以移动地图，使灰色区域消失，但不应该需要。

事情是地图显示在模态框内，包含很多在点击显示模式按钮时动态创建的内容。看起来问题可能是地图内容在加载模式之前未完全加载，但我不确定...

html ：

  ... 
 
< div class =modal-header> 
 < h3 id =myModalLabel>测试< / h3> 
< / div> 
< div id =modal-leftclass =modal-body left>< / div> 
< div class =modal-body right> 
< div id =map>< / div> 
< / div> 
< / div> 
 ... 
  

js：

 函数initializeMap（纬度，经度）{
 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）{//< ---通过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 +< / p>+ 
 data.zipcode ++ data.town +< / p> ;+ 
< p>< a href ='+ data.url +'>+ data.url +< / a>< / p>; 
 
 $（'＃myModalLabel'）。html（titel）; 
 $（'＃modal-left'）。html（content）; 
}）; 
}） ; 
  

图1：

图片2： / em>

解决方案

发生这种情况的常见原因是地图大小在地图初始化后发生了变化。如果由于某种原因改变了id =map的div的大小，你需要触发resize事件

  google.maps.event.trigger（地图，'resize'）; 
  

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

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

I have implemented Google maps in my app (in a modal), however as you can see on the images below there is a grey area that I of course want to get rid of. It is possible to move the map so that the grey area disappears, but that shouldn't be needed.

Thing is that the map is shown inside a modal box, which contains of a lot of content that's dynamically created when the button for showing the modal is clicked. It seems that the problem could be that the map content isn't fully loaded before the modal is loaded, but I'm not sure...

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

Image 1:

Image 2:

解决方案

The usual reason why this is happening is that the size of the map is changed after the map has been initialized. If you for some reason change the size of the div with id="map" you need to trigger the "resize" event

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

You could just try to trigger the event in your javascript console and see if it helps.

Please note that this answer is a guess since there is not really anything in the question to work with, so please let me know if it does not help.

这篇关于Google地图中的灰色区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！