爲什麼我的谷歌地圖調整不起作用？

我想要做的是，默認情況下顯示一個小谷歌地圖，當用戶點擊一個按鈕時，它會顯示一個更大的地圖。爲什麼我的谷歌地圖調整不起作用？

因爲它是相同的位置，我不想再次加載地圖，我也無法想象如果有人濫用您的系統，反覆點擊按鈕，這將導致再次加載谷歌地圖和再次。

我使用colorbox加載較大的地圖。現在的問題是較大的地圖不能正確調整大小，它有一些灰色區域，而且標記不居中。我沒有足夠的聲望發佈圖片。圖片鏈接是http://postimg.org/image/g3i9pxns1/。感謝你們！

<script type='text/javascript'> 
    var goo = google.maps, mapcenter = new goo.LatLng(52.5498783, 13.425209099999961) 
    function initialize() { 
     mapOptions = { 
      zoom: 14, 
      center: mapcenter, 
      mapTypeId: goo.MapTypeId.ROADMAP, 
      disableDefaultUI: true 
     }, 
     map = new goo.Map(document.getElementById('map_canvas'), 
       mapOptions), 
     marker = new goo.Marker({ 
      map: map, 
      position: map.getCenter() 
     }); 

     $('#fancybutton').colorbox({ 
      inline: true, href: "#map_canvas", width: 800, 
      height: 600, 
      onOpen: function (a, z) { 
       goo.event.trigger(map, 'resize'); 
       map.setOptions({ 
        disableDefaultUI: false, 
        center: mapcenter 
       }) 
       map.setCenter(mapcenter); 
      }, 

      onLoad: function (a) { 
       goo.event.trigger(map, 'resize'); 
       map.setOptions({ 
        center: mapcenter 
       }) 
      }, 
      onClose: function() { 
       goo.event.trigger(map, 'resize'); 
      } 
     }); 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
</script>

HTML：

<div style="width:200px;height:200px"> 
    <div id="map_canvas" style="width:100%;height:100%"></div> 
</div> 
<input type="button" id="fancybutton" value="open fancybox" />

來源

2013-08-22 jellday

基於圖片，我認爲你的地圖已經調整大小，但沒有加載所有的瓷磚。您是否嘗試過拖動地圖或縮小地圖 –

您正在觸發onLoad事件中的調整大小事件。爲什麼不在onOpen？ –

嗯，我只是嘗試拖/放大，它仍然顯示整個地圖的四分之一。乍得，我把它放在onOpen上，結果是一樣的。另外，傢伙，地圖不居中。 – jellday

我也有類似的問題。希望別人將能更好的解決方案，以跳，但我加入這樣的事情resize事件解決了這個問題：再次

map.panBy(1,1); 
setTimeout(function(){map.panBy(-1,-1);},250);

它變爲一個像素的地圖，那麼，應該加載缺少瓷磚。

來源

2013-08-22 16:12:27 Huckleberry

感謝Huckleberry，不幸的是，它不適合我的情況。 – jellday

爲什麼我的谷歌地圖調整不起作用？

回答

相關問題