Question

这是我第一次使用谷歌api，我完全按照说明操作，但地图不会加载我刚开始使用的灰色框，请提供帮助。

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

function apimap() {
        var uluru = {lat: -73.993439, lng: 40.750545};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }

Answer 1

您的实施似乎存在问题。您在加载请求的回调中使用 apimap（）作为初始化函数，您正在使用 initMap（）。你应该用apimap（）替换initMap（），反之亦然。这样，你的地图就可以了。

我已经复制了您的问题，该位置位于 Antartica 。您可以查看下面的演示。

      var map;
      function apimap() {
        var uluru = {lat: -73.993439, lng: 40.750545};
        map = new google.maps.Map(document.getElementById('map'), {
          center: uluru,
          zoom: 4
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }

      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzjs-bUR6iIl8yGLr60p6-zbdFtRpuXTQ&callback=apimap"
    async defer></script>

另外，请不要发布您的Google Maps API密钥，除非限制为防止滥用，并避免未经授权的应用程序使用您的API密钥。要了解有关API限制的详情，请查看 Restricting an API key 。

希望它对您的编码有所帮助和好运！

Google maps API不会加载灰色框

1 个答案: