gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 01:53:37 26 4
gpt4 key购买 nike

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

<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

一切正常:

streetview_1

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

enter image description here

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

最佳答案

类应该在 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>

关于css - 谷歌地图(街景)嵌入一个div,全屏坏了,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49775379/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com