重新初始化/重新启动Google Map Api

Question

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

google地图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);

如何检查我的google地图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);

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

Answer 1

您可以尝试仅在连接到internet时运行该脚本，而不是重新启动该脚本。

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

在你的主页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/