未捕获的引用错误:谷歌未定义

2024-04-21

我正在尝试将 geoJSON 文件中的标记加载到我的地图上,地图加载正常,但不断出现错误...

Uncaught ReferenceError: google is not defined

在这一行...

google.maps.event.addDomListener(window, 'load', initialize);

我读了a few https://stackoverflow.com/questions/33174540/uncaught-referenceerror-google-is-not-defined关于此的其他问题,其中大部分涉及如何在地图代码之前包含谷歌地图脚本。我尝试过将其包含在我的脑海中和地图容器的正上方,但没有成功。地图本身确实会加载,只是 JSON 文件中的标记不会加载。

HTML/JS 代码

<!DOCTYPE html>
<html>
<head>
    <title>Game Industry Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel=StyleSheet href="css/style.css" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div class="navbar navbar-defualt navbar-fixed-top">
    <a class="navbar-brand" href="#">Game Industry Map</a>
    <div class="input-group">
        <input type="text" class="form-control" placeholder="From Software, Naughty Dog, Bethesda Game Studios, BreakAway Games..." id="query" name="query" value="">
        <div class="input-group-btn">
            <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-search"></span></button>
        </div>
    </div>
</div>
<div class='content-container'>
    <div id="map"></div>
    <div id="company-info">
        <!--To do...-->
    </div>
</div>
<script type="text/javascript">
    var map;
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 34.029602, lng: -118.452416},
            zoom: 13
        });
        map.data.loadGeoJson('data.json');
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&callback=initMap"
        type="text/javascript"></script>
</body>
<footer>Created by <a href="#">My Name</a>.</footer>
</html>

geoJSON 文件

{ "type": "FeatureCollection",
  "features": [
    { "type": "Feature",
      "geometry": {"type": "Point", "coordinates": [34.019602, -118.452416]},
      "properties": {
        "company-logo": "images/activision.png",
        "company-name": "Activision Publishing Inc",
      }
    },

    { "type": "Feature",
      "geometry": {"type": "Point", "coordinates": [34.028230, -118.471270]},
      "properties": {
        "company-logo": "images/naughtydog.png",
        "company-name": "Naughty Dog Inc",
      }
    }
  ]
}

尝试在调用库的脚本之前包含 google 库:

<script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&callback=initMap"
    type="text/javascript"></script>

<script type="text/javascript">
    var map;
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 34.029602, lng: -118.452416},
            zoom: 13
        });
        map.data.loadGeoJson('data.json');
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

Edit

您在此处定义回调:/maps/api/js?key=API_KEY_HERE&callback=initMap

这将调用您的initMap()谷歌地图加载其所有组件后的方法。

但你正在打电话google.maps.event.addDomListener(window, 'load', initialize);在此函数之外,因此,当google尚未加载。

你应该尝试包括你的addDomListener打电话给你的initMap() call !

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

未捕获的引用错误:谷歌未定义 的相关文章

  • 卸载/销毁 Angular 延迟加载组件

    我的设置与此处找到的帖子类似http ify io lazy loading in angularjs http ify io lazy loading in angularjs 处理 Angular 中我的应用程序的各种组件的延迟加载 我
  • Nodemailer:从未收到问候语

    当尝试使用 Nodemailer 在 Node 内发送电子邮件时 https github com nodemailer nodemailer https github com nodemailer nodemailer 调用sendMai
  • Typescript:如何在自定义过滤器中使用角度 $filter

    如何在自定义过滤器中使用 Angular filter 如何注入 filter依赖 module Filters export class CustomFilter public static Factory return function
  • JavaScript:从 JavaScript 调用锚标记的点击事件

    我有一个带有锚标记的页面 在我的 JavaScript 中 我设置HREF锚标记的属性基于一些 if else 条件动态变化 现在我想以编程方式调用锚标记的单击事件 我使用了下面的代码 但没有成功 var proxyImgSrc CostM
  • 如何将函数传递给 JavaScript Web Worker

    我想通过一个 或多个 函数传递postMessage 给网络工作者 因为我无法引用常规文件 为了启动 Web Worker 我将一个对象 URL 从 Blob 创建 传递给Worker构造函数 然后我传递一条消息 但到目前为止还没有在消息中
  • 从网站存储数据的最简单方法(在服务器端)

    我有一个非常简单的网站 实际上是单页 有一个输入字段和一个按钮 我需要将用户提交的数据存储在服务器端的某个位置 完美的方法可能是简单的文本文件 并在每次单击按钮后附加新行 日志文件也可以 据我了解 JavaScript 本身是不可能的 我在
  • 如何创建增量加载网页

    我正在编写一个处理大量数据的页面 它会永远持续到我的结果页面加载 几乎无限 因为返回的数据太大了 因此 我需要实现一个增量加载页面 例如 url 中的页面 http docs python org http docs python org
  • 浏览器默认区域设置 - Intl.DateTimeFormat 与 navigator.language

    在对网站进行编码并格式化日期时 我想使用用户在浏览器中设置的区域设置 例如 如果用户定制了他们的chrome settings languages在 Chrome 中设置为非默认值 这就是我想要使用的值 但是 当我在此类浏览器的控制台中运行
  • 由于固定导航,增加了 FancyBox v2 的顶部和底部边距

    我目前正在开发一个网站 该网站将来将具有响应能力 该网站主要由图像组成 单击这些图像会加载到 FancyBox 中 FancyBox v2 现在具有响应能力 因此可以在屏幕尺寸发生变化时重新调整图像等的大小 作为我设计的一部分 我有两个固定
  • (0, eval) () 的作用是什么? [复制]

    这个问题在这里已经有答案了 以下内容来自这个问题 https stackoverflow com questions 14119988 return this 0 evalthis 14120023 14120023 function q
  • 如何在 JavaScript 中对关联数组进行排序?

    我需要为我的一个项目通过 JS 对关联数组进行排序 我发现这个函数在 Firefox 中运行得很好 但不幸的是它在 IE8 OPERA CHROME 中不起作用 无法找到使其在其他浏览器中运行的方法 或者找到另一个适合该目的的函数 我真的很
  • 父指令属性更改时子指令不会更新

    这是对这两个问题的后续 在父指令和子指令之间传递参数 https stackoverflow com questions 42814530 pass argument between parent and child directives
  • Javascript:更改输入值时设置光标位置

    当您输入公式时 我试图在我的应用程序中重现类似于 Microsoft Excel Google Sheets 的用户体验 并且您可以使用不同的公式和变量来自动完成下拉菜单 为此 在验证自动完成功能后 我希望能够控制光标的位置 例如 如果我输
  • 如何使用 Jest 测试对象键和值的相等性?

    我有一个mapModule我在其中导入组件并导出它们 import ComponentName from components ComponentName export default name ComponentName 我该如何测试ma
  • 在 JSP 或 Javascript 中清除浏览器缓存中的图像

    我正在为一所大学开发JSP Web 应用程序 用户页面中显示人员图片 用户注销后如何从网络浏览器缓存中清除这张图片 使用 JSP 或 JavaScript 那是不可能的 最好的选择是完全禁用相关资源的缓存 创建一个filter https
  • 如何从配置加载套接字 io 事件监听器? [复制]

    这个问题在这里已经有答案了 我有使用套接字io 的nodejs 应用程序 我将存储在 config routes js 中的所有事件侦听器 module exports routes auth login controller auth a
  • 如何设置 Firebase 用户的显示名称?

    根据Firebase网站上的JS Auth文档 它只展示了如何获取 displayName 以及如何更新 displayName 所以我尝试更新它 但这有点不合逻辑 因为你怎么能在不创建某些东西的情况下更新它呢 所以我的问题是 如何设置注册
  • jquery:选择xpath或将xpath转换为css?

    我需要基于 xpath 选择 或者将 xpath 转换为 css 有插件或者内置功能吗 ex html body div a 4 each 并非所有 xpath 表达式都可以转换为类似 CSS 的选择器 或者不能有效地工作 您可以使用 eq
  • openssl_pkey_get_details($res) 不返回公共指数

    我在用着这个例子 https stackoverflow com a 12575951 2016196使用 php 生成的密钥进行 javascript 加密openssl图书馆 但是 details openssl pkey get de
  • NodeJS:如何获取服务器的端口?

    您经常会看到 Node 的示例 hello world 代码 它创建一个 Http Server 开始侦听端口 然后执行以下操作 console log Server is listening on port 8000 但理想情况下你会想要

随机推荐

  • 解析器中的运算符优先级和结合性 (Haskell)

    我正在尝试扩展递归下降解析器来处理新运算符并使它们正确关联 最初只有四个运算符 并且它们都具有相同的优先级 我正在查看的函数是 parseExpRec 函数 parseExpRec Exp gt Token gt Exp Token par
  • MySQL - 选择最近 10 位作者的最新帖子

    我有一个包含许多不同作者的博客文章的表 我想做的是显示 10 位最新作者各自的最新帖子 每个作者的帖子只是按顺序添加到表中 这意味着单个作者可能会发布多篇帖子 我花了很多时间想出一个查询来做到这一点 这给了我最后 10 个唯一的作者 ID
  • 使用 Gradle,如何打印每个任务执行所需的时间?

    现在 对于频繁运行的 gradle 目标之一 输出如下所示 DataPlanner clean common clean server clean simulator clean util clean util compileJava ut
  • 美丽汤无法“获取”完整网页

    我正在使用 BeautifulSoup 来解析来自的一堆链接但它并没有提取我想要的所有链接 为了尝试找出原因 我将 html 下载到 web page html 并运行 soup BeautifulSoup open web page ht
  • 在 Flash AS3 中捕获未处理的 IOErrorEvent

    错误 2044 未处理的 IOErrorEvent text 错误 2036 从不加载 完全的 这就是我每次尝试使用加载器加载不存在的图像时看到的情况 我正在获取 URL 列表 但无法验证它们是否指向任何有用的内容 每当遇到 404 时 它
  • URL 重写破坏了 CSS 链接

    我使用以下设置进行网址重写 RewriteEngine On RewriteCond REQUEST FILENAME d RewriteCond REQUEST FILENAME f RewriteRule index php url 1
  • October CMS:如何扩展后端用户的角色范围

    我已经能够延长Backend Models User类并添加一个范围查询方法以仅检索超级用户 public function boot User extend function model model gt addDynamicMethod
  • 如何自动链接本地npm包?

    我正在构建两个相互依赖的私有 npm 包 说我有 project my commons package json name my commons version 0 0 1 my server package json dependenci
  • Beaglebone Black 上的 GPIO

    我目前遇到了 Beaglebone black GPIO 引脚的问题 我正在寻找一种正确的方法来读取 C 中的 GPIO 引脚 p8 4 的值 如果我理解正确的话 我尝试使用一个库 该库使用了在引入设备树之前不支持的旧方法 我尝试寻找其他解
  • 如果方法只需要 ajax 调用,会返回什么错误?

    如果操作期望仅通过 AJAX 使用 但在没有正确的 ajax 标头的情况下调用 则操作应返回什么 HTTP 状态 我觉得我应该指出一些错误 但我真的找不到合适的错误 我想最好是 405 Method not allowed 但是如果例如 a
  • PowerShell 中的“net use”不指定驱动器

    通过 net use 您可以执行以下操作 net use server user domian username 然后 它会提示输入密码 并且使用任何程序 cmd Explorer Word 等 与该服务器建立的任何进一步 CIFS 连接都
  • 验证 TextBox 中的文本更改

    我已经在 WinForm 中的文本框上实现了验证规则 并且效果很好 但是 只有当我跳出该字段时 它才会检查验证 我希望它在框中输入任何内容以及每次内容发生变化时立即进行检查 我还希望它在 WinForm 打开后立即检查验证 我记得最近通过设
  • 一页上有多个夏季笔记 div

    我正在尝试获取特定夏季笔记 div 的代码 其中单个页面上有多个笔记 div 我的暑假笔记是用 php 从数据库创建的 如下所示 div class tab content div class tab pane div class summ
  • 如何在大窗口上优化窗口聚合?

    我在 Spark 2 4 4 中使用带有大窗口的窗口函数 例如 Window partitionBy id orderBy timestamp 在我的测试中 我有大约 70 个不同的 ID 但我可能有大约 200 000 行 ID 如果没有
  • 检索 AR 模型的所有关联属性?

    您认为检索 AR 模型所有关联的所有属性的最佳方法是什么 即 假设我们有模型Target class Target lt ActiveRecord Base has many countries has many cities has ma
  • 使用推断的 (?) 类型克隆 std::iter::Map

    我在以紧凑的方式克隆地图时遇到问题 extern crate itertools num use itertools num linspace fn main 440Hz as wave frequency middle A let fre
  • 没有 GameKit 的 iOS 蓝牙

    我已经知道使用 GameKit 我只能连接到运行相同应用程序的其他 iOS 设备 但我想连接到 Parallaz EasyBluetooth 芯片来发送和接收命令 因此我需要不同的解决方案 我想有一些针对越狱设备的库 但我不知道 你能给我一
  • 我什么时候知道 GeoFire 已完成加载,因为它是基于事件的触发器

    因此 我使用 GeoFire 和 AngularFire 来填充我的 ng repeat 项目列表 有一个离子拉动来刷新列表 因此 用户拉动它并获取当前更新的位置并刷新列表 调用 GeoFire 来重新填充列表 scope doRefres
  • 未捕获的类型错误:无法读取未定义的属性(读取“isBatchingLegacy”)

    我正在尝试使用 jest 测试反应打字稿项目 但它给出了一个令人困惑的错误 错误图像 https i stack imgur com gdWQp png 这是我的 package json dependencies testing libr
  • 未捕获的引用错误:谷歌未定义

    我正在尝试将 geoJSON 文件中的标记加载到我的地图上 地图加载正常 但不断出现错误 Uncaught ReferenceError google is not defined 在这一行 google maps event addDom