Google 地图在 FancyBox 中无法正确渲染，我该如何纠正？

发布于 2025-01-04 15:19:36 字数 1382 浏览 2 评论 0原文

我目前需要在 FancyBox 内显示 Google 地图。本教程展示了如何使用“fancybox.iframe”CSS 类以直接的方式执行此操作，但我需要 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

所以，总而言之，我肯定缺少一个重要的属性或配置，对吗？你能帮我解决这个问题吗？

提前无限感谢，

注意。我在这里阅读并尝试了类似的问题，但仍然不成功。所以我将这里的问题简化为最简单的版本。

原文

I have a present need to display a Google Map, inside a FancyBox. The tutorial shows how to do this in a straight-forward manner by using a "fancybox.iframe" CSS class, But I'll need my FancyBox to display more than just the map, ie. a form below.

So far, here's my code(very simple):

HTML

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

CSS

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

and finally some 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

The result of that, is almost what I want except that the rendering is messed up,

fancybox+googlemaps