谷歌地图 - 街景不起作用

Question

我想创建一个基于谷歌地图api的游戏。我想要两个谷歌地图，一个有街景，一个有世界地图（比如geoguessr游戏）。我的迷你地图还可以，但街景不起作用。 如何修复街景？

＆＃13;

＆＃13;

{
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();
}

＆＃13;

* {
  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%;
	 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;
}

＆＃13;

<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>
  <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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

id =“game-map”的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>