Google街景黑屏

Question

我正在尝试使用 Bootstrap 5.

将 Google Streetview Panorama 实例放入 offcanvas 元素内的选项卡内如果默认选项卡是包含街景的选项卡，一切正常，如下所示：
https://codepen.io/taylormhicks90-the-bold/pen/OJxxqQN

如果我使用不同的选项卡作为默认选项卡，Streetview 最初是黑色的并且不起作用，除非您首先将其设为全屏，如下所示：
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=AIzaSyAoIwp-hHU0Hv-UIK3RycqxgxKb_QZNV2E&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,
            }
        )
    }

Answer 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 时才使用此选项。

参考：Bootstrap5tab events

Google街景黑屏

Google Street View Black Screen

javascript

twitter-bootstrap

google-maps

google-street-view