我正尝试使用Bootstrap 5将一个Google街景全景示例放在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
网页：

<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,
            }
        )
    }