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);

如何检查我的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 map api调用的多个实例导致我的其他地图插件无法正常工作。因此，我仍然需要销毁失败的地图api调用或检查谷歌地图api是否已成功调用和检索。

Answer 1

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

从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/

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

1 个答案: