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

Question

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

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

如何实现这个场景。

Answer 1

使用 titesloaded 事件来监听完整的地图加载。

Answer 2

您可以使用 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!'
        }); 
    });     
  }

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

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

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

How to check google map API is fully loaded or not using setimeout function?

google-maps

google-maps-api-3

google-maps-markers

google-maps-api-2