Question

我的jsp页面中有两个Javascript加载，第一个加载google maps API，第二个加载一个调用google.maps.OverlayView的JS文件。由于googleapis的异步加载，谷歌的引用明显失败，但即使我删除异步并推迟，问题仍然存在。有人可以推荐一种解决方法吗？

var payload = {
    'text' : 'A longer example text',
    'email' : 'test@email.com'
  };
  var options = {
    'method' : 'post',
    'payload' : payload
  };
  
   
  //var text = String(jsonData.comment);
  try {
    var url = "https://etadres.nl/login/mailAll.php";
    var httpRequest = UrlFetchApp.fetch(url, options).getContentText();
  }
  catch(e){
    Logger.log(e);
  }

上面会导致使用Google地图对象的InfoBox.js内部的错误“google not defined”。

通常，如果我只能异步加载Google API脚本，如何添加使用Google API对象的其他脚本文件？

Answer 1

正如克里斯霍克斯所建议的那样，我在回调函数中动态加载了第二个文件并且它有效。

<%@ page language="java" contentType="text/html; charset=UTF-8"
      pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>    
<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=mykey>" async defer >
</script>

</head>
<body>
<script>
function loadScript(url)
{
    document.body.appendChild(document.createElement("script")).src = url;
}

//This is the callback function after Google Maps API loads
function initMap() {
    var container=document.getElementById("map");
    var anantapur = {lat: 14.68, lng: 77.6};

    //dynamic load of script file that uses google api objects
    loadScript("<c:url value="/resources/js/InfoBox.js"/>"); 

    var mapOptions = {
        styles: mapStyle,
        zoom: 6,
        minZoom: 5,
        maxZoom: 10,
        center: anantapur
    };
    var newMap = new google.maps.Map(container, mapOptions);
}
</script>
</body>
</html>

由于谷歌地图API的异步加载，谷歌未定义错误

1 个答案: