重新初始化/重新启动谷歌地图API

Question

我有一个处理在线/离线情况的应用程序。现在，我有一些实例，其中应用程序首先脱机运行，并且 api 无法加载，这导致地图页面空白。

谷歌地图 API 的调用将是这样的。

<script src="http://maps.google.com/maps/api/js?key=APIKEY"></script>

我已经添加了一个处理在线/离线情况的事件侦听器，如下所示

document.addEventListener("offline", function()
{
    console.log("in offline event listener");
}, false);
document.addEventListener("online", function()
{
    console.log("in online event listener");
}, false);

如何检查我的谷歌地图 API 是否已初始化以及如何重新初始化它？

更新 1：我能够通过以下方式在运行时插入脚本，

var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", "http://maps.google.com/maps/api/js?key=APIKEY");
document.getElementsByTagName("body")[0].appendChild(script);

但这会导致谷歌地图 api 调用的多个实例，导致我的其他地图插件无法正常工作。因此，我仍然需要销毁失败的地图 api 调用或检查谷歌地图 api 是否已成功调用和检索。

Answer 1

您可以

尝试仅在有互联网连接时运行它，而不是重新启动脚本。

从索引中删除<script>...</script>元素.html

在您的主页 javascript：

key = "YOUR GOOGLE MAP API KEY"
GoogleMapInit(key);
function GoogleMapInit(key){
  if (key != null){
    apiKey = key;
  }
  loadGoogleMaps();
}
function loadGoogleMaps(){
  window.mapInit = function(){
    //Run any code that must be run after Google Map Api is done (E.g loading markers)
  }
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.id = "googleMaps";
  if (apiKey){
    script.src = 'http://maps.google.com/maps/api/js?key=' + apiKey + '&callback=mapInit';
  }
  else{
   script.src = 'http://maps.google.com/maps/api/js?callback=mapInit';
  }
  document.body.appendChild(script);
}

您还可以参考： https://www.joshmorony.com/part-3-advanced-google-maps-integration-with-ionic-and-remote-data/