Question

我有一个单独的label.js文件，我在其中定义了自定义叠加层。它使用google.maps.OverlayView作为其原型：

Label.prototype = new google.maps.OverlayView();

我不确定在我的index.html文件中将此js文件的脚本标记放在何处。如果我将脚本标记放在google maps加载标记下面，如下所示：

....
        <script async defer
            src="https://maps.googleapis.com/maps/api/js?...
        </script>
        <script src="js/label.js"></script>
    </body>
</html>

如果尚未加载maps api导致错误，则会立即加载label.js文件。

我目前通过在我的地图加载的回调中手动加载JS来解决这个问题：

function initMap() {
    gMap = new google.maps.Map(document.getElementById(strMapDivName), {
        center: {lat: 21, lng: 78},
        mapTypeId: google.maps.MapTypeId.HYBRID,
        zoom: 6,
        heading: 90,
        tilt: 0
    });

    // Load label.js afterwards so we can be sure that the google maps api has loaded
    var fileref=document.createElement('script')
    fileref.setAttribute("type","text/javascript")
    fileref.setAttribute("src", "js/label.js")

    document.getElementsByTagName("head")[0].appendChild(fileref)

}

这是解决这个问题的最佳方法吗？

Answer 1

我认为你这样做很好。如果您想确保地图对象已准备就绪，您还可以使用地图idle事件监听器。

google.maps.event.addListenerOnce(map, 'idle', function () {
    // map is ready
});

Answer 2

这是我制作并适合我的通用。

1）定义加载Google地图后要执行的功能

function ToExecuteAfterLoaded()
  {
  // Doing something here ///
  console.log("Executing this function"); // per example //
  }

2）等待功能

function WhenGoogleLoadedDo(fnt)
   {
   if(typeof google != 'undefined')
      fnt();
   else
      setTimeout(function()
         {(function(fnt)
            {
            WhenGoogleLoadedDo(fnt)
            })(fnt)}, 500); // You can set timer as you wish //
   }

3）在脚本

中调用ToExecuteAfterLoaded

WhenGoogleLoadedDo(ToExecuteAfterLoaded);

Answer 3

我知道为时已晚，但是我在下面使用了这段代码

var mapWaitCount = 0;
var mapWaitMax = 5;

function map_load(param1, param2, ...) { // if you need any param
    mapWaitCount++;
    // if api is loaded
    if(typeof google != 'undefined') {
        // your code here 
    }
    // try again if until maximum allowed attempt
    else if(mapWaitCount < mapWaitMax) {
        console.log('Waiting attempt #' + mapWaitCount); // just log
        setTimeout(function() { map_load(); }, 1000);
    }
    // if failed after maximum attempt, not mandatory
    else if(mapWaitCount >= mapWaitMax) {
        console.log('Failed to load google api');
    }
}

map_load(param1, param2, ...) { // if you need any param

它使用超时来等待加载，并且在尝试几次后将被停止

Answer 4

用DOMContentLoaded包装自定义标签怎么样？

print "alter system cancel user command userName process "  $1 ";"

参考： https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

Answer 5

更新一个旧问题；在React中，我使用了NPM模块：load-google-maps-api

在意识到这一点存在之前，我开始吠叫自己创建那棵树，这样可以节省一些时间。

它将以promise格式加载maps API，因此您可以为加载后提供回调函数。

loadGoogleMapsApi().then(function (googleMaps) {
  new googleMaps.Map(document.querySelector('.map'), {
    center: {
      lat: 40.7484405,
      lng: -73.9944191
    },
    zoom: 12
  })
}).catch(function (error) {
  console.error(error)
})

在加载google.maps.OverlayView派生类之前，如何等待谷歌地图API加载

5 个答案: