Google Map在FancyBox內無法正確顯示，我該如何改正它？

我目前需要在FancyBox內顯示Google地圖。本教程展示瞭如何通過使用「fancybox.iframe」CSS類以直接方式完成此操作，但是我需要我的FancyBox來顯示更多地圖，即。下面的表格。Google Map在FancyBox內無法正確顯示，我該如何改正它？

到目前爲止，這是我的代碼（很簡單）：

HTML

<div id="fancybox-container"></div>

CSS

#fancybox-container { 
    display: none; 
    width: 450px; 
    height: 500px; 
    border: 1px solid red; 
    padding: 3px; 
    overflow: hidden; 
}

最後一些CoffeeScript的：

$ -> 
    new FancyMap() 

class FancyMap 
    constructor: -> 
    @openMap() #once fancybox is open proceed to render the map inside of it 
    options = 
     center: new google.maps.LatLng(6.191556, -75.579716) 
     zoom: 14 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    @map = new google.maps.Map $('#fancybox-container')[0], options 

    openMap: -> 
    $('a[href=#fancybox-container]').fancybox 
     maxWidth: 500 
     maxHeight: 550 
     fitToView: false 
     autoSize: true 
     closeClick: false 
     openEffect: 'none' 
     closeEffect: 'none' 

window.FancyMap = FancyMap

的結果那幾乎就是我所知道的螞蟻除了渲染搞砸了，

fancybox+googlemaps

如果我裏面拖動地圖，結果是...是這樣的：

fancyboxdragged

所以，在最後，我」 m肯定缺少一個重要的屬性或配置，對嗎？你能幫我解決這個問題嗎？

無限在此先感謝，

注意。我已閱讀並嘗試過類似的問題，但我仍然不成功。所以我把我的問題簡化爲最簡單的版本。

來源

2012-02-10 jlstr

谷歌地圖不知道它最終會變得多大，例如，如果您在打開地圖之前將其分配給燈箱，則無法知道它需要的尺寸。

不是在構造函數中添加地圖，而是將其添加到回調函數中，該函數將在箱子打開時觸發。提供

代碼示例「萬畝太短」 http://goo.gl/t7SOm

來源

2012-02-10 19:50:49 ArthurGuy

這可能是一個非常難以理解的問題，但是......你在說哪種回調先生？ :) – jlstr 2012-02-10 19:53:29

我對CoffeeScript不熟悉，所以我不能特別評論，但大多數燈箱庫沒有能力得到通知或在完成打開時做某些事情。 Fancy box有配置選項onComplete，您可以爲其分配一個函數，該函數在打開方框時會被觸發。 – ArthurGuy 2012-02-10 20:01:39

@ user766388：像這樣的東西應該工作：http：//goo.gl/t7SOm（這只是一個瘋狂的長期coffeescript.org網址，不適合在評論框中，jsfiddle.net目前已關閉，或者我會用那）。 ArthurGuy：如果你願意，你可以把它粘貼到你的答案中，我不想通過添加我自己的答案來竊取你的反應。 – 2012-02-10 20:14:42

您也可以trigger的resize事件的Map得到地圖API來調整地圖的容器。

來源

2012-02-11 00:46:40

Google Map在FancyBox內無法正確顯示，我該如何改正它？

回答

相關問題