问题描述
按钮点击
<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%;
}
// 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,});
}
我希望街景地图无需点击按钮即可显示
解决方法
您只需要删除按钮并在页面加载时执行全景图。这是一个 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>