嵌入Div的Google Maps街景全屏功能异常问题求助

看起来你遇到了街景嵌入后全屏失效的问题，我结合你的代码场景梳理下常见原因和解决办法：

可能的故障诱因 #

• 街景容器(.street_view)的CSS样式限制了全屏展开的空间
• 初始化街景时未正确启用全屏控件，或控件被默认隐藏
• 街景服务(svs)的初始化参数缺失关键配置

具体修复步骤 #

1. 调整容器CSS样式 #

首先确保你的.street_view容器没有设置阻碍全屏的样式，比如固定的最大宽高或溢出隐藏：

.street_view {
  width: 100%;
  height: 400px; /* 保留初始高度，但不要设置max-width/max-height */
  /* 移除 overflow: hidden; 这类会限制全屏扩展的属性 */
}

2. 完善CoffeeScript初始化逻辑 #

你的代码里svs.getPanorama的参数和后续街景实例初始化不完整，需要明确启用全屏控件：

# 初始化Google街景
init_street_views = () ->
  # 确保实例正确初始化（如果全局未定义的话）
  geocoder = new google.maps.Geocoder()
  svs = new google.maps.StreetViewService()

  $(".street_view").each ->
    address = $(@).data('address')
    div = @
    geocoder.geocode { address: address }, (results, status) ->
      if status == google.maps.GeocoderStatus.OK
        ll = results[0].geometry.location
        # 完整调用街景服务并初始化全景实例
        svs.getPanorama { location: ll, radius: 50 }, (data, status) ->
          if status == google.maps.StreetViewStatus.OK
            # 明确启用全屏控件
            new google.maps.StreetViewPanorama(
              div,
              {
                position: ll,
                pov: { heading: 165, pitch: 0 },
                zoom: 1,
                fullscreenControl: true, # 强制开启全屏控件
                streetViewControl: true
              }
            )
          else
            console.log("无法获取街景数据: #{status}")
      else
        console.log("地理编码失败: #{status}")

3. 验证API加载完整性 #

确保加载Google Maps API时包含街景库，且密钥权限正常：

<script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&libraries=streetview"></script>

额外排查点 #

• 打开浏览器控制台查看是否有JS报错，比如svs或geocoder未定义的问题
• 如果街景嵌入在模态框或嵌套容器中，需确保全屏事件能穿透容器层级
• 测试不同浏览器，部分浏览器对全屏API的兼容性需要特殊处理

内容的提问来源于stack exchange，提问作者user1130176