当前位置: 首页 > 面试题库 >

仅当使用AJAX时,Google Maps API才会引发“ Uncaught ReferenceError:未定义google”

有宏邈
2023-03-14
问题内容

我有一个使用Google Maps API来显示地图的页面。当我直接加载页面时,地图出现。但是,当我尝试使用AJAX加载页面时,出现错误:

Uncaught ReferenceError: google is not defined

为什么是这样?

这是带有地图的页面:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = { zoom:7, mapTypeId: google.maps.MapTypeId.ROADMAP, center: chicago }
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  directionsDisplay.setMap(map);
}
$(document).ready(function(e) { initialize() });
</script>
<div id="map_canvas" style="height: 354px; width:713px;"></div>

这是带有AJAX调用的页面:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(e) {
    $('button').click(function(){
        $.ajax({
            type: 'GET', url: 'map-display',
            success: function(d) { $('#a').html(d); }
        })
    });
});
</script>
<button>Call</button>
<div id="a"></div>
</body>
</html>

谢谢你的帮助。


问题答案:

默认情况下,文档完成加载后无法加载该API,您需要异步加载该API。

用地图修改页面:

<div id="map_canvas" style="height: 354px; width:713px;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"></script>
<script>
var directionsDisplay,
    directionsService,
    map;

function initialize() {
  var directionsService = new google.maps.DirectionsService();
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = { zoom:7, mapTypeId: google.maps.MapTypeId.ROADMAP, center: chicago }
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  directionsDisplay.setMap(map);
}

</script>


 类似资料:
  • 是否可以在使用非预定义参数调用模拟时引发异常?有答案。返回\u SMART\u null,但这并不是我真正需要的,因为如果null是合法的返回值,它就不起作用,这不会导致NullPointerException,而是以后出错。 编辑:一些背景。因此,在Mockito中,当您定义一个mock时,您可以如下所示为每个调用指定返回值: 当<代码>myMock时。someMethod是用参数调用的,我在测

  • 问题内容: 仅在真正更改数据的情况下,才有可能使用“更新后”触发器。我知道“新旧”。但是使用它们时,我只能比较列。例如“ NEW.count <> OLD.count”。 但我想要类似的东西:如果“ NEW <> OLD”,则运行触发器 一个例子: 关键是,有一个更新,但是 什么都没有改变 。但是无论如何,触发器都在运行。恕我直言,应该有一个没有的方法。 我知道我可以使用 如果现在b <> OLD

  • 问题内容: 如何告诉Jenkins / Hudson仅针对Git树中特定项目的更改触发构建? 问题答案: Git插件有一个选项(排除的区域),可使用正则表达式根据提交中的文件是否与排除的区域正则表达式匹配来确定是否跳过构建。 不幸的是,当前的Git插件目前没有“包含区域”功能(1.15)。但是,有人在GitHub上发布了可在Jenkins和Hudson上运行的补丁,这些补丁实现了所需的功能。 构建

  • 我有一个小而烦人的问题。我真的不习惯使用Web。我尝试使用ajax jquery请求我的php文件。当我想检索从ajax发送的数据时,它返回未定义的索引。我不知道是什么问题,它让我花了很多时间来解决它。谢谢。 下面是我的阿贾克斯代码 当我在php文件中调用下面的代码时,结果是“未定义的索引:数据” //编辑So,当我尝试var_dump($_POST)时;,结果是array(0) {}。我错在哪里

  • 问题内容: 我正在尝试通过以下代码通过asp.net ajax调用Web服务 这是我正在渲染的aspx页面 这是我正在呼叫的网络服务 页面呈现得很好,但是每当我更改列表项的值时,它就会显示JavaScript运行时错误:’HRService’未定义。为什么是这样。 抱歉这么长的帖子.... 问题答案: 您可以尝试,只需添加和 在aspx中,像这样修改您的scriptManager 然后您可以通过这

  • 问题内容: 因此,我试图将cron作业设置为我创建的守护程序的一种看门狗。如果守护程序出错并失败,我希望cron作业定期重新启动它…我不确定这样做的可能性如何,但是我通读了一些cron教程,找不到任何可以做我的事情正在寻找… 我的守护程序是从Shell脚本开始的,所以我真的只是在寻找一种方法来运行cron作业,前提是该作业的先前运行仍未运行。 它确实为我试图使用锁定文件提供了解决方案,但我不确定是