css - 谷歌地图(街景)嵌入一个div，全屏坏了

Question

我有一个谷歌地图街景，效果很好:

<div class=\"street_view\" data-address = "30 Rockefeller Center" ></div>

我使用 google maps API 来定位和渲染 map (coffeescript)

# initialize google street view
  init_street_views = () ->
    $(".street_view").each ->
      address = $(@).data('address')
      div = @
      geocoder.geocode { address: address }, (results, status) ->
        if status == 'OK'
          ll = results[0].geometry.location
          svs.getPanorama {
            location: ll
            preference: 'nearest'
          }, (data, status) ->
            pos = data.location.latLng
            head = google.maps.geometry.spherical.computeHeading(pos, ll)
            panorama = new (google.maps.StreetViewPanorama)(div,
            pano: data.location.pano
            pov:
              heading: head
              pitch: 0)
            return
        return

一切正常:

但是，当我单击全屏按钮时，它并没有占据全屏，它似乎只占据了一个它的父容器:

我需要在父容器中使用 css 来让街景小部件占据整个页面吗？

Answer 1

类应该在 CSS 中这样声明:

.street_view{
background: red;
}

然后你像这样在你的 div 中使用它:

<div class="street_view">Your content</div>

所以我想你的问题是指你在 div 中的语法。整个全屏的东西都是从 JS 开始的，但是它的样式是在你的 CSS 类中声明的，所以这可能是你的问题:

<div class=\"street_view\"

另一个解决方案可能是仅在以下代码时检查您的 JS 代码:<div class=\"street_view\"提供给您的是 Google。

编辑:

我已经通过这个 Google's link 检查了包含 map 的 iframe

检查这里的代码，确保你的 map 是这样的:

<iframe width="425" height="240" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://developers.google.com/maps/documentation/javascript/examples/full/streetview-embed" allowfullscreen="">
</iframe>