如何确保谷歌地图被加载?[英] How to ensure that google map is loaded?

问题描述

我必须使用 phantomjs 制作谷歌地图的截图.我动态地将几个标记传递给幻象正在执行的网页,在地图上绘制它们,然后我调用 map.fitBounds(bounds) 以确保地图将覆盖所有标记.问题是我必须知道何时加载地图(所有图块?),以便我可以制作屏幕截图.我知道如何从幻像执行的页面与渲染脚本进行通信,但我不知道如何确保加载地图.这是我的代码:

      map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 0.0, lng: 0.0 },
        zoom: 8
      })

      showMarkers = function (markers) {
        markers = markers || []
        var bounds = new google.maps.LatLngBounds()
        for (var i = 0; i < markers.length; ++i) {
          var marker = new google.maps.Marker({
            position: markers[i].position,
            map: map,
            title: 'Hello World!'
          })
          bounds.extend(marker.getPosition())
        }
        map.fitBounds(bounds)

        // for now I set 1 sec timeout, but it is not always enough and I capture gray map with markers (no tiles loaded)
        setTimeout(function () {
          console.log('mapReady')
        }, 1000)
      }

推荐答案

正如@Timur 建议的'idle' 事件是我需要的,但是我必须添加一些额外的代码以使其在 PhantomJs 中正常工作:

        var fitBoundsExecuted = false
        google.maps.event.addListener(map, 'idle', function () {
          if (!fitBoundsExecuted) { return }
          fitBoundsExecuted = false
          setTimeout(function () {
            console.log('mapReady')
          }, 1)
        })
        map.fitBounds(bounds)
        fitBoundsExecuted = true

本文地址:https://www.itbaoku.cn/post/1740147.html