JavaScript：在不点击显示按钮的情况下显示街景地图答案

【问题标题】：JavaScript: Show Street View Map without Clicking Show buttonJavaScript：在不点击显示按钮的情况下显示街景地图
【发布时间】：2021-03-07 16:21:15
【问题描述】：

美好的一天。 我有这段代码显示基于纬度和经度的街道地图。

按钮点击

<a id="street-view" class="btn btn-outline-primary btn-lg m-1 px-3" href="javascript:;">
                                <i class="fa fa-map small mr-2"></i>
                                View Neighbourhood
                            </a>

此 ID 显示街景地图

<div id="street"></div>

CSS 代码

#map,
#street {
    display: none;
    height: 450px;
    width: 100%;
}

显示地图的Js代码

// Initialize and add street view map
function initStreetView() {
    // The location to load the street view at
    const gpFarms = { lat: 4.836824, lng: 7.0115864 };
    const streetDiv = document.getElementById("street");
    const panorama = new google.maps.StreetViewPanorama(streetDiv, {
        position: gpFarms,
    });
}

我希望无需点击按钮即可显示街景地图

【问题讨论】：

仍然希望生成答案
为您的问题使用适当的标签可能有助于引起注意。

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

【解决方案1】：

您只需要移除按钮并在页面加载时执行全景图。这是一个 JSFiddle 示例供您参考：https://jsfiddle.net/pintsik999/z81wx2ku/2/

你也可以只看下面的代码：

function initialize() {
  const gpFarms = {
    lat: 4.836824,
    lng: 7.0115864
  };
  const streetDiv = document.getElementById("street-view");
  const panorama = new google.maps.StreetViewPanorama(
    streetDiv, {
      position: gpFarms
    }
  );
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#street-view {
  height: 100%;
}

<div id="street-view"></div>

<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?&callback=initialize&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk" async></script>

【讨论】：