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

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(使用前将#替换为@)

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

  • Ajax - 限制列表的加载,然后在滚动上加载其余部分

    我有一家商店 在一个页面上显示某个类别的所有产品 这是店主喜欢的方式 因此不能选择分页 为了缩短某些重类别的加载时间 我希望实现一个可以加载许多产品的脚本 li s然后在页面滚动上加载另一组 页面就是用这个结构生成的 div ul clas
  • Mapbox GL 中的 MaxBounds 和自定义非对称填充

    我有一个 Mapbox GL JS 应用程序 在地图上显示一些小部件 为了确保地图上的任何内容都不会被它们隐藏 我使用以下命令添加了一些填充map setPadding 这是一个不对称的 在我的例子中左边比右边大 它按预期工作 例如fitB
  • 我怎样才能让这个脚本在 WordPress 上运行?

    我有这个脚本 document ready function text1 click function this hide 代码html div class div1 p class text1 text to appear when th
  • API 使用令牌向 odoo 进行身份验证

    我想使用令牌从 Express 应用程序向 Odoo 进行身份验证 我在用odoo xmlrpc https www npmjs com package odoo xmlrpc连接 Odoo 的节点模块 我的快递应用程序 Odoo 要求 A
  • 如何禁用 body 元素的滚动?

    如何禁用正文滚动 body css overflow hidden 仅隐藏滚动条 但不会禁用滚动 我想禁用正文的滚动 但我想保持其他分区的滚动完好无损 试试这个 CSS 不需要 jQuery 评论后更新 尝试指定高度body too
  • .live() 或 .livequery()

    我有一个Ajaxed的网站 Ajax的内容来自其他页面 例如about html contact html ajax 从名为 main content 的 div 获取内容 但是在 ajax 调用之后 我的其余脚本就中断了 比如tinysc
  • karma/jasmine 控制台更详细的测试结果

    我使用 Karma 和 Jasmine 进行 javascript 单元测试 假设我有一个失败的测试 如下所示 expect objectA toEqual expectedObjectA 当失败时 我看到控制台上转储了两个对象 并显示一条
  • 检索 css3 缩放元素的宽度/高度

    我正在与 offsetWidth 属性的奇怪之处 我认为 作斗争 这是场景 比方说 我有一个span标签 在我的js中 在某个时刻我执行css3转换 对于这个元素 例如 el set styles transform scale scale
  • JavaScript中如何确保输入的值是数字而不是字符串?

    我创建了这个函数 function num var x prompt please enter your first number var y prompt please enter your second number if isNaN
  • 全局传递 xhr onload 函数的值

    在我正在创建的应用程序中 我有以下 XMLHttpRequest 并且我正在尝试传递结果data在 的里面xhr onload 到在同一父函数中创建的数组中 var url http api soundcloud com resolve j
  • 如何在 Web 服务器上设置 gzip 压缩?

    我有一个嵌入式网络服务器 总共有 2 兆空间 通常 您使用 gzip 文件对客户端有利 但这会节省我们在服务器上的空间 我读到你可以只 gzip js 文件并将其保存在服务器上 我在 IIS 上测试过 但没有任何运气 为了使这项工作成功 我
  • 如何通过 jQuery 中的类获取特定 html 元素的innerHTML?

    我有这样的 HTML 代码 div class a html value 1 div div class a html value 2 div 我怎样才能访问html value 1 and html value 2使用jquery 分别地
  • 如何将 Vue.js 作用域样式应用于通过视图路由器加载的组件?

    如何将 Vue js 作用域样式应用于通过以下方式加载的组件
  • 如何使用新的analytics.js跟踪多个帐户?

    我需要使用 Google 的新的analytics js 跟踪一个页面上两个帐户的综合浏览量 有大量教程和示例如何使用较旧的 ga js 进行操作 但我发现的只是这个分析文档页面 https developers google com an
  • Web组件中嵌套槽的内容不可见

    我有一个 Web 组件 它应该接受任意元素来包装其内容 虽然我可以在 Chrome 开发工具中看到插槽已正确分配 但 DOM 中什么也没有出现 以前有人见过这个问题吗 定义 class ExampleParent extends HTMLE
  • 如何为我的整个 Node.js 应用程序使用相同的 MySQL 连接?

    我有一个app js 我从那里运行我的整个应用程序 在 app js 内部 我require许多文件中都有代码 对于每个文件 我都这样做 var mysql require mysql var mclient mysql createCon
  • 如何在 webpack 中渲染嵌套的 SASS?

    采取以下CSS MyComponent color blue Button color red 以及以下 React 组件 import React from react import classes from MyComponent sc
  • 尝试使用 Javascript 解决对称差异

    我正在尝试找出对称的解决方案 使用 javascript 完成以下任务的差异 目标 接受未指定数量的数组作为参数 保留数组中数字的原始顺序 不删除单个数组中数字的重复项 删除数组中出现的重复项 因此 例如 如果输入是 1 1 2 6 2 3
  • Jwt 签名和前端登录身份验证

    我有这个特殊的 jwt sign 函数 Backend const token jwt sign id user id process env TOKEN SECRET expiresIn 1m res header auth token
  • 确定 Javascript 中的日期相等性

    我需要找出用户在 Javascript 中选择的两个日期是否相同 日期以字符串 xx xx xxxx 形式传递给该函数 这就是我需要的全部粒度 这是我的代码 var valid true var d1 new Date datein val

随机推荐

  • 解析器中的运算符优先级和结合性 (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