Question

我无法在显示器上看到谷歌地图，但是当我将所有代码放在一个单独的html文件中并使用脚本标签时，它就能正常工作。

Index.html文件是：

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIpWlWVDAqVEyW20SX6MfThL-iz9IWeQA&callback=initMap"
    ></script>
  </body>
</html>

Script.js文件是：

function initMap() {

    var map;
            map = new google.maps.Map(document.getElementById('map'), 
            {
              center: {  lat: -34.397, 
                         lng: 150.644
                      },
              zoom: 8
            }
            );
          }

style.css文件是：

* element that contains the map. */
  #map {
    height: 100%;
  }
  /* Optional: Makes the sample page fill the window. */
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }

Answer 1

#map { width:100%; height:200px;}

或填写整个窗口：

#map { width:100%; min-height:100%;}

如果它是第一个具有最小高度属性的孩子。 PS。你也可以尝试添加overflow：hidden;第二个例子。

Answer 2

当你执行script.js时，它会尝试找到id =“map”的div。但它还没有初始化。所以，你需要做两件事：

在您的<div id="map"></div>

页面加载后致电initMap() 。例如。像这样（最后）<script>initMap()</script>

Answer 3

我整合了您的HTML，它运行正常。出于某种原因，在单独的文件中，您的回调函数无效。

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
        #map {
        height: 100%;
    }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  <script>
  function initMap() {
    var map;
    map = new google.maps.Map(document.getElementById('map'), 
    {
      center: {  lat: -34.397,  lng: 150.644},
      zoom: 8
    }
    );
   }
  </script>
  </head>
  <body>
    <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIpWlWVDAqVEyW20SX6MfThL-iz9IWeQA&callback=initMap"
    ></script>
  </body>
</html>

Answer 4

根据文档：Google Maps APIs，只需将您的JavaScript（script.js）放在地图之后。

<div id="map"></div>
<script src="script.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIpWlWVDAqVEyW20SX6MfThL-iz9IWeQA&callback=initMap" async defer></script>

修改：不要忘记＆＃34; async defer ＆＃34;在第二个脚本的末尾。

Google地图未加载单独的文件

4 个答案: