谷歌地图 - 街景不起作用

Question

我想创建一个基于谷歌地图API的游戏。我想要两张谷歌地图，一张是街景，一张是世界地图（类似geoguessr游戏）。我的迷你地图没问题，但街景不起作用。 如何修复街景？

{ 
 
function createMap() { 
 
    const streetView = new google.maps.StreetViewPanorama(
 
    document.getElementById('game-map'), { 
 
     position: {lat: 37.869, lng: -122.255}, 
 
     pov: { 
 
     heading: 45, 
 
     pitch: 0 
 
     }, 
 
    disableDefaultUI: true, 
 
    scrollwheel: false 
 
    }); 
 
}; 
 
function createMiniMap() { 
 
    const miniMapPosition = {lat: 25, lng: 0}; 
 
    const miniMap = new google.maps.Map(document.getElementById('mini-map'), { 
 
    zoom: 1, 
 
    center: miniMapPosition, 
 
    disableDefaultUI: true, 
 
    }); 
 
} 
 
createMiniMap(); 
 
createMap(); 
 
}

* { 
 
    box-sizing: border-box; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.map-container { 
 
    width: 100%; 
 
    height: calc(100vh-50px); 
 
    background: transparent; 
 
    z-index: 2; 
 
} 
 
.mini-map-container { 
 
    height: 35vh; 
 
    width: 30%; 
 
    position: absolute; 
 
    top: 55%; 
 
    left: 65%; 
 
\t overflow: hidden; 
 
    border: 5px solid black; 
 
    z-index: 3; 
 
} 
 
.page-header { 
 
    height: 50px; 
 
\t background: rgba(0, 0, 0, 0.9); 
 
} 
 
.nav-list a { 
 
    text-decoration: none; 
 
\t color: #ffffff; \t \t 
 
} 
 
.nav-list { 
 
    display: flex; 
 
\t flex-direction: row; 
 
\t list-style: none; 
 
\t justify-content: flex-end; 
 
} 
 
.nav-list li { 
 
    padding: 0.5em; 
 
}

<header class="page-header"> 
 
\t <nav class="header-nav"> 
 
\t \t <ul class="nav-list"> 
 
\t \t \t <li><a href="#">New Game</a></li> 
 
\t \t \t <li><a href="#">Highscores</a></li> 
 
\t \t \t <li><a href="#">Login</a></li> 
 
\t \t </ul> 
 
\t </nav> 
 
</header> 
 
<main> 
 
    <div class="map-container" id="game-map"></div> 
 
    <div class="mini-map-container" id="mini-map"></div> 
 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
 
</main>

Answer 1

你使用id = “游戏地图” DIV没有大小。

{ 
 
    function createMap() { 
 
    const streetView = new google.maps.StreetViewPanorama(
 
     document.getElementById('game-map'), { 
 
     position: { 
 
      lat: 37.869, 
 
      lng: -122.255 
 
     }, 
 
     pov: { 
 
      heading: 45, 
 
      pitch: 0 
 
     }, 
 
     disableDefaultUI: true, 
 
     scrollwheel: false 
 
     }); 
 
    }; 
 

 
    function createMiniMap() { 
 
    const miniMapPosition = { 
 
     lat: 25, 
 
     lng: 0 
 
    }; 
 
    const miniMap = new google.maps.Map(document.getElementById('mini-map'), { 
 
     zoom: 1, 
 
     center: miniMapPosition, 
 
     disableDefaultUI: true, 
 
    }); 
 
    } 
 
    createMiniMap(); 
 
    createMap(); 
 
}

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
* { 
 
    box-sizing: border-box; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.map-container { 
 
    width: 100%; 
 
    height: 100%; 
 
    background: transparent; 
 
    z-index: 2; 
 
} 
 

 
.mini-map-container { 
 
    height: 35vh; 
 
    width: 30%; 
 
    position: absolute; 
 
    top: 55%; 
 
    left: 65%; 
 
    overflow: hidden; 
 
    border: 5px solid black; 
 
    z-index: 3; 
 
} 
 

 
.page-header { 
 
    height: 50px; 
 
    background: rgba(0, 0, 0, 0.9); 
 
} 
 

 
.nav-list a { 
 
    text-decoration: none; 
 
    color: #ffffff; 
 
} 
 

 
.nav-list { 
 
    display: flex; 
 
    flex-direction: row; 
 
    list-style: none; 
 
    justify-content: flex-end; 
 
} 
 

 
.nav-list li { 
 
    padding: 0.5em; 
 
}

<header class="page-header"> 
 
    <nav class="header-nav"> 
 
    <ul class="nav-list"> 
 
     <li><a href="#">New Game</a></li> 
 
     <li><a href="#">Highscores</a></li> 
 
     <li><a href="#">Login</a></li> 
 
    </ul> 
 
    </nav> 
 
</header> 
 
<main style="height: 100%; width:100%;"> 
 
    <div class="map-container" id="game-map"></div> 
 
    <div class="mini-map-container" id="mini-map"></div> 
 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
 
</main>