如何使用 settimeout 函数检查谷歌地图 API 是否已完全加载？答案

【问题标题】：How to check google map API is fully loaded or not using setimeout function?如何使用 settimeout 函数检查谷歌地图 API 是否已完全加载？
【发布时间】：2020-10-13 18:20:36
【问题描述】：

首先我检查了没有 setTimeout 功能的谷歌地图 API 是否已完全加载或没有使用地图空闲功能。它工作正常。但我尝试在谷歌地图加载页面中使用 setTimeout 函数。地图加载成功。但地图空闲功能无法解决此问题。

代码.html

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple Markers</title>
    <style>
      /* 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;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
var map;
      function initMap() {
        var myLatLng = {lat: -25.363, lng: 131.044};

        setTimeout(function(){
          map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: myLatLng
        });
        },2000);

        google.maps.event.addListenerOnce(map, 'idle', function(){
          console.log('hi')
          var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: 'Hello World!'
        });
        })

        // var map = new google.maps.Map(document.getElementById('map'), {
        //   zoom: 4,
        //   center: myLatLng
        // });

        // var marker = new google.maps.Marker({
        //   position: myLatLng,
        //   map: map,
        //   title: 'Hello World!'
        // });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=***********&callback=initMap">
    </script>
  </body>
</html>

如何实现这个场景。

【问题讨论】：

标签： google-maps google-maps-api-3 google-maps-markers google-maps-api-2

【解决方案1】：

您可以使用 Maps Javascript API Events 的 tilesloaded 事件。 tilesloaded 用于检测地图何时已完全加载。下面是使用您当前实现的示例 POC。

 var map;
  function initMap() {
    var myLatLng = {lat: -25.363, lng: 131.044};
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 4,
        center: myLatLng
    });
    map.addListener('tilesloaded', function() {
        console.log('map is loaded');
    });        
    google.maps.event.addListenerOnce(map, 'idle', function(){
        console.log('map is idle')
        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: 'Hello World!'
        }); 
    });     
  }

如果这对您没有帮助，您还可以查看此 Stackoverflow 问题 How can I check whether Google Maps is fully loaded? 的答案。看来很多用户之前也遇到过这个问题。

希望这些信息对您有所帮助，并祝您申请成功！

【讨论】：

【解决方案2】：

使用 titesloaded 事件监听地图加载完毕。

【讨论】：