javascript - 谷歌地图引用错误: google not defined

javascript - 谷歌地图引用错误: google not defined - jQuery Mobile

转载作者：行者123 更新时间：2023-12-03 01:08:37

25

4

我正在尝试创建一个简单的应用程序，其中包含一张带有大量校园位置的 map ，但在加载 map 时遇到问题。加载动画处于无限循环中。

我在控制台中收到此错误“引用错误:谷歌未定义”对此问题有什么想法吗？该代码只是从 jQuery 网站复制并粘贴。

这是我的 html 文档中的脚本

<script>
        /*
         * Google Maps documentation: http://code.google.com/apis/maps/documentation/javascript/basics.html
         * Geolocation documentation: http://dev.w3.org/geo/api/spec-source.html
         */
         $( document ).on( "pageinit", "#map-page", function() {
            var defaultLatLng = new google.maps.LatLng(34.0983425, -118.3267434);  // Default to Hollywood, CA when no geolocation support
            if ( navigator.geolocation ) {
                function success(pos) {
                    // Location found, show map with these coordinates
                    drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
                }
                function fail(error) {
                    drawMap(defaultLatLng);  // Failed to find location, show default map
                }
                // Find the users current position.  Cache the location for 5 minutes, timeout after 6 seconds
                navigator.geolocation.getCurrentPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 6000});
            } else {
                drawMap(defaultLatLng);  // No geolocation support, show default map
            }
            function drawMap(latlng) {
                var myOptions = {
                    zoom: 10,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
                // Add an overlay to the map of current lat/lng
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    title: "Greetings!"
                });
            }
        });
        </script>

这里是完整的 HTML 文档供引用

<!DOCTYPE html> 
<html>
<head>
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <!-- <link rel="stylesheet" href="styles.css" /> -->
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

    </head>

<body>
    <header>
          <div class="ui-body ui-body-a ui-corner-all">
                <h3>BCIT Campuses</h3>
                      <p>This app is designed to show you the various BCIT Campus locations</p>
                  </div>
            </header>
    <form>
        <div class="ui-field-contain">
            <label for="select-native-1">Basic:</label>
            <select name="select-native-1" id="select-native-1">
                <option value="1">The 1st Option</option>
                <option value="2">The 2nd Option</option>
                <option value="3">The 3rd Option</option>
                <option value="4">The 4th Option</option>
            </select>
        </div>
        </form>
        <div data-role="page" id="map-page" data-url="map-page">
                <div data-role="header" data-theme="a">
                <h1>Maps</h1>
                </div>
                <div role="main" class="ui-content" id="map-canvas">
                    <!-- map loads here... -->
                </div>
            </div>

        <footer>
                 <div class="ui-body ui-body-a ui-corner-all">
                        <h4>Wade Barrie</h4>
                          </div>
        </footer>
</body>
<script>
        /*
         * Google Maps documentation: http://code.google.com/apis/maps/documentation/javascript/basics.html
         * Geolocation documentation: http://dev.w3.org/geo/api/spec-source.html
         */
         $( document ).on( "pageinit", "#map-page", function() {
            var defaultLatLng = new google.maps.LatLng(34.0983425, -118.3267434);  // Default to Hollywood, CA when no geolocation support
            if ( navigator.geolocation ) {
                function success(pos) {
                    // Location found, show map with these coordinates
                    drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
                }
                function fail(error) {
                    drawMap(defaultLatLng);  // Failed to find location, show default map
                }
                // Find the users current position.  Cache the location for 5 minutes, timeout after 6 seconds
                navigator.geolocation.getCurrentPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 6000});
            } else {
                drawMap(defaultLatLng);  // No geolocation support, show default map
            }
            function drawMap(latlng) {
                var myOptions = {
                    zoom: 10,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
                // Add an overlay to the map of current lat/lng
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    title: "Greetings!"
                });
            }
        });
        </script>
</html>

最佳答案

您没有包含 Google map 脚本，因此它永远没有机会为您提供 google 对象。

添加

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"</script>

到文档的头部，不要忘记添加您的 API key !

关于javascript - 谷歌地图引用错误: google not defined - jQuery Mobile，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52285597/

25

4

0

文章推荐： javascript - 如何在 Jest 测试中重新模拟库？

文章推荐： javascript - Socket.IO双火

文章推荐： elasticsearch - 无需存储编码文件的Elasticsearch索引附件

npm 安装不起作用 | npm 错误!路径 | npm 错误!代码 | npm 错误!错误 | npm 错误!系统调用 | npm 错误!恩恩特
我已经使用 vue-cli 两个星期了，直到今天一切正常。我在本地建立这个项目。 https://drive.google.com/open?id=0BwGw1zyyKjW7S3RYWXRaX24tQ
python - pytesseract 错误 Windows 错误 [错误 2]
您好，我正在尝试使用 python 库 pytesseract 从图像中提取文本。请找到代码: from PIL import Image from pytesseract import image_
C 错误 TLS 错误
我的错误 /usr/bin/ld: errno: TLS definition in /lib/libc.so.6 section .tbss mismatches non-TLS reference
r - 错误 `contrasts' 错误
我已经训练了一个模型，我正在尝试使用 predict函数但它返回以下错误。 Error in contrasts<-(*tmp*, value = contr.funs[1 + isOF[nn]])
postgresql - PowerBI 直接查询连接到 PostgreSQL 错误。 OLE 或 ODBC 错误 : [Expression. 错误] 我们无法将表达式折叠到数据源
根据Microsoft DataConnectors的信息我想通过 this ODBC driver 创建一个从 PowerBi 到 PostgreSQL 的连接器使用直接查询。我重用了 Micros
java - Android MediaPlayer 错误(在状态 1 中开始调用；错误 (-38, 0)；错误 (-38,0))
我已经为 SoundManagement 创建了一个包，其中有一个扩展 MediaPlayer 的类。我希望全局控制这个变量。这是我的代码: package soundmanagement; impo
heroku - PG::错误:错误:Heroku的内存不足
我在Heroku上部署了一个应用程序。我正在使用免费服务。我经常收到以下错误消息。 PG::Error: ERROR: out of memory 如果刷新浏览器，就可以了。但是随后，它又随机发生
.htaccess - .htaccess 错误，错误 500
我正在运行 LAMP 服务器，这个 .htaccess 给我一个 500 错误。其作用是过滤关键字并重定向到相应的域名。 Options +FollowSymLinks RewriteEngine
robocopy 错误，错误 32 (0x00000020)
我有两个驱动器 A 和 B。使用 python 脚本，我在“A”驱动器中创建一些文件，并运行 powerscript，该脚本以 1 秒的间隔将驱动器 A 中的所有文件复制到驱动器 B。我在 powe
postgresql 错误 - 错误 : input is out of range
下面的函数一直返回这个错误信息。我认为可能是 double_precision 字段类型导致了这种情况，我尝试使用 CAST，但要么不是这样，要么我没有做对...帮助？这是错误: ERROR: i
mysql - 错误 1064 MySQL 错误
这个问题已经有答案了: Syntax error due to using a reserved word as a table or column name in MySQL (1 个回答) 已关闭
mysql - mysql 错误(错误 1136)
我的数据库有这个小问题。我创建了一个表“articoli”，其中包含商品的品牌、型号和价格。每篇文章都由一个 id (ID_ARTICOLO)` 定义，它是一个自动递增字段。好吧，现在当我尝试插
c++ - 错误 C2228、错误 C2275
我是新来的。我目前正在 DeVry 在线学习中级 C++ 编程。我们正在使用 C++ Primer Plus 这本书，到目前为止我一直做得很好。我的老师最近向我们扔了一个曲线球。我目前的任务是这样的:
c++ - 错误 LNK2019 错误 C++
这个问题在这里已经有了答案: What is an undefined reference/unresolved external symbol error and how do I fix it?
html - 奇怪的 IE7 错误/错误
我的网站中有一段代码有问题；此错误仅发生在 Internet Explorer 7 中。我没有在这里发布我所有的 HTML/CSS 标记，而是发布了网站的一个版本 here . 如您所见，我在列中有
node.js - 错误!错误 : EPERM,
如果尝试在 USB 设备上构建 node.js 应用程序时在我的树莓派上使用 npm 时遇到一些问题。 package.json 看起来像这样: { "name" : "node-todo",
python - 无 Python 错误/错误？
在 Python 中，您有 None单例，在某些情况下表现得很奇怪: >>> a = None >>> type(a) >>> isinstance(a,None) Traceback (most
java - Android Studio 错误 - 错误 :java. util.concurrent.ExecutionException : com. android.tools.aapt2.Aapt2Exception:AAPT 错误
这是我的 build.gradle (Module:app) 文件: apply plugin: 'com.android.application' android { compileSdkV
android - 任务 ':app:compileDebugJavaWithJavac' 执行失败。错误 :(2055, 52) 错误 : ';' expected Error:(2055, 59) 错误:<标识符> 预期
我是 android 的新手，我的项目刚才编译和运行正常，但在我尝试实现抽屉导航后，它给了我这个错误 FAILURE: Build failed with an exception. What wen
PHP 7.2.25 错误!= 错误？
谁能解释一下？我想我正在做一些非常愚蠢的事情，并且急切地等待着启蒙。我得到这个输出: phpversion() == 7.2.25-1+0~20191128.32+debian8~1.gbp108

首页

博学

6Ren·AI

商城

javascript - 谷歌地图引用错误: google not defined - jQuery Mobile