谷歌街景黑屏答案

【问题标题】：Google Street View Black Screen谷歌街景黑屏
【发布时间】：2022-09-26 16:18:12
【问题描述】：

我正在尝试使用 Bootstrap 5 将 Google Streetview Panorama 实例放在 offcanvas 元素内的选项卡内。

如果默认选项卡是包含街景的选项卡，则一切正常，如下所示：
https://codepen.io/taylormhicks90-the-bold/pen/OJxxqQN

如果我使用不同的选项卡作为默认选项卡，则街景最初是黑色的，除非您首先将其设为全屏，否则将无法正常工作，如下所示：
https://codepen.io/taylormhicks90-the-bold/pen/Yzrrgro

虽然我有一个使用街景选项卡作为默认选项卡的解决方法，但这并不是所需的功能。我花了几个小时挖掘谷歌文档并尝试不同的解决方法。只是跳跃某人可以帮助解释为什么会发生这种情况，以及我可以做些什么来让它正常运行，或者至少为我指明正确的方向。

我什至尝试过在街景选项卡是默认选项卡时加载街景视图，然后在街景视图加载后将选项卡更改为图片选项卡，但它不起作用。
https://codepen.io/taylormhicks90-the-bold/pen/RwLLdeP

html:

<div class=\'container\'>
  <div class=\'row\'>
    <div class=\'col-12\'>
      <h1>My Page</h1>
      <button class=\'btn btn-primary\' data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvas\" >Click Here For Off Canvas</button>
    </div>
  </div>
</div>
<!--Off Canvas-->
<div class=\"offcanvas offcanvas-bottom\" tabindex=\"-1\" id=\"offcanvas\" data-bs-backdrop=\"false\">
    <div class=\"offcanvas-header\">
        <ul class=\"nav nav-tabs\" id=\"myTab\" role=\"tablist\">
            <li class=\"nav-item\" role=\"presentation\">
                <button class=\"nav-link active\" id=\"pictures-tab\" data-bs-toggle=\"tab\" data-bs-target=\"#pictures\"
                        type=\"button\" role=\"tab\" aria-controls=\"pictures\" aria-selected=\"true\">Pictures
                </button>
            </li>
            <li class=\"nav-item\" role=\"presentation\">
                <button class=\"nav-link\" id=\"streetview-tab\" data-bs-toggle=\"tab\" data-bs-target=\"#streetview\"
                        type=\"button\" role=\"tab\" aria-controls=\"streetview\" aria-selected=\"false\">Street View
                </button>
            </li>
            <li class=\"nav-item\" role=\"presentation\">
                <button class=\"nav-link\" id=\"map-tab\" data-bs-toggle=\"tab\" data-bs-target=\"#map\" type=\"button\"
                        role=\"tab\" aria-controls=\"map\" aria-selected=\"false\">Map
                </button>
            </li>
        </ul>
        <button type=\"button\" class=\"btn-close text-reset\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close\"></button>
    </div>
    <div class=\"offcanvas-body\">
        <div class=\"tab-content h-100\" id=\"myTabContent\">
            <div class=\"tab-pane fade  show active\" id=\"pictures\" role=\"tabpanel\" aria-labelledby=\"home-tab\">
                <div class=\"row\">
                    <div class=\'col-12\'>
                      <p> My Pictures Go Here </p>
                    </div>
                </div>
            </div>
            <div class=\"tab-pane fade h-100\" id=\"streetview\" role=\"tabpanel\" aria-labelledby=\"profile-tab\">
                <div id=\"streetviewContainer\" class=\"h-100 w-75 mx-auto\"></div>
            </div>
            <div class=\"tab-pane fade h-100\" id=\"map\" role=\"tabpanel\" aria-labelledby=\"contact-tab\">
                <div id=\"mapContainer\" class=\"h-100 w-75 mx-auto\"></div>
            </div>
        </div>
    </div>
</div>
<script
        src=\"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMaps&v=weekly\"
        async
></script>

Javascript：

    let map,streetView;
    function initMaps() {
        const location = { lat: 42.345573, lng: -71.098326 };
        map = new google.maps.Map(document.getElementById(\"mapContainer\"), {
            center: location,
            zoom: 19,
        });
        new google.maps.Marker({
            position: location,
            map,
        });
        streetView = new google.maps.StreetViewPanorama(
            document.getElementById(\"streetviewContainer\"),
            {
                position: location,
                zoom: 0,
            }
        )
    }

标签： javascript twitter-bootstrap google-maps google-street-view

【解决方案1】：

移动StreetView 调用 (new google.maps.StreetViewPanorama) 到函数中，然后仅在选项卡处于活动状态时激活此函数。

function loadStreetView() {
    streetView = new google.maps.StreetViewPanorama(
        document.getElementById("streetviewContainer"),
        {
            position: location,
            zoom: 0,
        }
    );
}


// listen to street view tab button only.
let streetviewTab = document.querySelector('#streetview-tab');
// listen to on shown.
streetviewTab.addEventListener('shown.bs.tab', function (event) {
  loadStreetView();
});

仅当默认选项卡不是 StreetView 时才使用此选项。

参考：Bootstrap 5 tab events

【讨论】：

谢谢你这个作品。我确实对其进行了修改，以便事件侦听器自行删除它，以便仅在第一次显示选项卡时加载街景。不确定这会有所作为，但对我来说似乎是正确的方法。