谷歌地图街景不工作 - 灰显答案

【问题标题】：Google Map Street View Not Working - grayed out谷歌地图街景不工作 - 灰显
【发布时间】：2015-05-13 06:22:25
【问题描述】：

www.bchomescondos.ca/properties/?city=Burnaby&id=261618646

www.bchomescondos.ca/properties/?city=Burnaby&id=261711367

这些只是出现问题的几个示例页面。我对 Google Map API 不是很精通，但仍然尝试将其整合到我的网站中。

我添加了三个选项卡——一个显示路线图，另一个显示街景，第三个显示步行分数。虽然路线图和步行评分运行良好，但街景却不行。

但我注意到的一件奇怪的事情是，如果页面被调整大小（只是出于任何奇怪的原因），街景地图就会出现。

如果有人帮助我解决这个问题，我将非常感激。

脚本

http://pastebin.com/zQTCxez2

<script src="https://maps.googleapis.com/maps/api/js?v=3.19&sensor=true_or_false"></script>

<script>
var geocoder;
var ws_wsid = 'afca921c9778417e8dc16a8236d1f079';
var ws_address = "<?php echo $row['address']; ?>,<?php echo $row['city']; ?>";
var ws_width = '100%';
var ws_height = '400';
var ws_layout = 'vertical';
var ws_commute = 'true';
var ws_transit_score = 'true';
var ws_map_modules = 'all';
var address = "<?php echo $row['address']; ?>,<?php echo $row['city']; ?>";

function initialize() {
    var fenway = new google.maps.LatLng( <? php echo $row['latitude']; ?> , <? php echo $row['longtitude']; ?> )
    var mapOptions = {
        center: fenway,
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    var contentString = '<a class="fancybox-inline" href="#request_form_pop">Request of showing this property</a>';
    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });

    var marker = new google.maps.Marker({
        position: fenway,
        map: map,
        title: ''

    });


    infowindow.open(map, marker);
    google.maps.event.addListener(marker, 'click', function() {});

    var panoramaOptions = {
        position: fenway,
        pov: {
            heading: 34,
            pitch: 10
        }
    };
    panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
    map.setStreetView(panorama);

}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

HTML

http://pastebin.com/fgDRR0MN

<div class="row">
        <div class="one columns"></div>

        <section class="ten columns tabs" style="margin: 20px 0;">         
            <ul class="tab-nav">
                <li class="active"><a href="#">Google Map</a></li>
                <li> <a href="#">Street View</a></li>
                <li><a href="#">Walk Score</a></li>
            </ul>
            <div class="tab-content active">
                <div id="map-canvas" style="height: 400px; border: 0.5px solid #000;">
                </div>
            </div>
           <div class="tab-content">
                <div id="pano" style="height: 400px; border: 0.5px solid #000;"></div>
            </div>
            <div class="tab-content">
                <div id="ws-walkscore-tile" style="height: 400px; border: 0.5px solid #000;"></div>
            </div>
            <script type='text/javascript' src='http://www.walkscore.com/tile/show-walkscore-tile.php'></script>            
        </section>

        <div class="one columns"></div>
</div>

我只是想在单击该特定选项卡时显示街景。

CSS 文件

[http://www.bchomescondos.ca/wp-content/themes/dgdon/css/gumby.css] [http://www.bchomescondos.ca/wp-content/themes/dgdon/css/style.css]

【问题讨论】：

感谢阿方索的编辑。实际上，由于这是我在 stackoverflow 上的第一篇文章，我不确定如何发布代码。 **关于代码不起作用 - 是的，代码将无法正常工作，因为纬度和经度来自数据库。在那个地方，您可以添加任何纬度和经度值。 ** 提示：- 从以上两页查看源代码会有帮助。
&sensor=true_or_false - 首先true_or_false 不是此参数的有效值。其次，反正也不需要再指定sensor参数了，去掉就行了。
还有一些额外的 CSS / JS 控制标签的显示/隐藏，对吧？您能否将其添加到您的问题中。我在过去使用 StreetView 时发现，我必须先让 div 可见才能加载它，然后立即隐藏它。
感谢邓肯的回复。实际上我没有添加任何额外的 CSS/JS 来处理标签的显示或隐藏。我已经简单地使用 Gumby（响应式框架）来创建这些选项卡。这两个 CSS 是 gumby.css 和 style.css。我将在主帖中添加指向这些 CSS 的链接。
你能不能让全景选项卡最初处于活动状态，以便加载街景，然后在加载后使用 JS 将其隐藏？

标签： javascript google-maps google-maps-api-3 google-street-view

【解决方案1】：

因此，可以推断地图api和它的脚本没有问题。问题在于如何处理 CSS 选项卡。感谢邓肯的帮助。我会提出一个关于解决这个 CSS 和 JS 问题的新问题。

【讨论】：