如何检查Google Map 是否已满载？

9 回答

• 2

  如果您正在使用web components，那么他们将此作为示例：

  map.addEventListener('google-map-ready', function(e) {
     alert('Map loaded!');
  });
  

  回复于 2024-05-09T17:07:10+08:00
• 11

  GMap2::tilesloaded() 将是您正在寻找的活动 .

  有关参考，请参阅GMap2.tilesloaded .

  回复于 2024-05-09T17:07:10+08:00
• 0

  2018年：

  var map = new google.maps.Map(...)
  map.addListener('tilesloaded', function () { ... })
  

  https://developers.google.com/maps/documentation/javascript/events

  回复于 2024-05-09T17:07:10+08:00
• 4

  变量 map 是GMap2类型的对象：

  GEvent.addListener(map, "tilesloaded", function() {
        console.log("Map is fully loaded");
      });
  

  回复于 2024-05-09T17:07:10+08:00
• 562

  就我而言，在渲染图像之前触发了从远程URL加载的Tile Image和 tilesloaded 事件 .

  我用下面的方式解决了 .

  var tileCount = 0;
  var options = {
      getTileUrl: function(coord, zoom) {
          tileCount++;
          return "http://posnic.com/tiles/?param"+coord;
      },
      tileSize: new google.maps.Size(256, 256),
      opacity: 0.5,
      isPng: true
  };
  var MT = new google.maps.ImageMapType(options);
  map.overlayMapTypes.setAt(0, MT);
  google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
      var checkExist = setInterval(function() {
          if ($('#map_canvas > div > div > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div > div').length === tileCount) {
              callyourmethod();
              clearInterval(checkExist);
          }
      }, 100); // check every 100ms
  });
  

  回复于 2024-05-09T17:07:10+08:00
• 4

  您可以每隔 n 毫秒检查 GMap2.isLoaded() 方法，以查看是否已加载 Map 及其所有图块（ window.setTimeout() 或 window.setInterval() 是您的朋友） .

  虽然这不会为您提供加载完成的确切事件，但它应该足以触发您的Javascript .

  回复于 2024-05-09T17:07:10+08:00
• 14

  这对GMaps v3来说困扰了一段时间 .

  我找到了这样做的方法：

  google.maps.event.addListenerOnce(map, 'idle', function(){
      // do something only the first time the map is loaded
  });
  

  当 Map 进入空闲状态时会触发"idle"事件 - 所有内容都已加载（或无法加载） . 我发现它比tilesload / bounds_changed更可靠，并且使用 addListenerOnce 方法，闭包中的代码在第一次触发"idle"时执行，然后事件被分离 .

  另请参阅Google Map 参考中的events section .

  回复于 2024-05-09T17:07:10+08:00
• 53

  我正在创建html5移动应用程序，我注意到 idle ， bounds_changed 和 tilesloaded 事件在创建和渲染 Map 对象时触发（即使它不可见） .

  为了使我的 Map 在第一次显示时运行代码，我执行了以下操作：

  google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
      //this part runs when the mapobject is created and rendered
      google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
          //this part runs when the mapobject shown for the first time
      });
  });
  

  回复于 2024-05-09T17:07:10+08:00
• -3

  如果您使用的是Maps API v3，则会发生变化 .

  在版本3中，您基本上想要为 bounds_changed 事件设置一个侦听器，该事件将在映射加载时触发 . 触发后，删除侦听器，因为每次视口边界更改时都不希望被通知 .

  随着V3 API的发展，这可能会在未来发生变化:-)

  回复于 2024-05-09T17:07:10+08:00