5

我正在通过学​​习谷歌的基本示例来学习创建谷歌地图。

我基本上复制并粘贴了 head 标签中的脚本，firebug 控制台返回以下错误：

ReferenceError: google is not defined

我在头部加载了以下几个脚本以及谷歌地图脚本。不知道为什么它会给我带来错误。

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

    <!-- nmr is used to write my own scripts -->
    <script>var nmr = jQuery.noConflict();</script>

    <!-- Google Map scripts -->
    <script>
        function initialize() {
            var mapOptions = {
                zoom: 13,
                center: new google.maps.LatLng(-34.397, 150.644),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
        };

        function loadScript() {
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyB7CgOuhFLDkh2VAGW1S2Y" + "sensor=false" + "callback=initialize";
            document.body.appendChild(script);
        }

        window.onload = loadScript;

    </script>

我也尝试在初始化函数之前添加它，但它不起作用。

<script> var google = jQuery.noConflict(); </script>

任何人都可以帮忙吗？谢谢！

4

2 回答 2

2

您的来源是错误的，我还建议您指定要加载的确切版本：

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
于 2013-07-04T22:40:44.667 回答
1

让我们看看代码中发生了什么。

1) 让我们忽略 ajax.googleapis.com，因为它无论如何都没有在发布的代码中使用。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

2）抛出错误的对象google由Google Maps 3 API本身定义，与jQuery无关，为此API v3不使用任何jQuery，所以下面的行需要是删除，因为它与我们面前的问题无关。

<script> var google = jQuery.noConflict(); </script>

3）现在，当浏览器点击页面时，从 javascript 调用的第一件事是

window.onload = loadScript;

4）那么上面的行实际上是什么意思？windows.onload 在加载所有外部文件（包括图像、样式、脚本和其他相关资源）之后以及在加载和渲染 DOM 并准备好执行操作之后很久才会触发 windows.onload。

这就是我们要解决的问题。在 windows.onload 调用 loadScript 函数后附加

 script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyB7CgOuhFLDkh2VAGW1S2Y" + "sensor=false" + "callback=initialize";

（顺便说一下，您的查询字符串缺少查询变量之间的所有“& 符号” .... /js?v=3&key=xyz&sensor=false&callback=initialize <--- 格式正确

5) 期待已久的 Google API。没有。尽管 url 在 url 本身中包含单词 api，但它仅附加 API 的加载程序。打开并查看上面的文件，您将看到一个 document.write 和一个 API 的各个部分的块，这些部分将根据您调用加载程序的查询字符串参数有条件地加载。

6）那么这一切是什么意思？您正在调用初始化函数，以为您正在获取 Google API，但您得到的只是 Google API Loader，它包含 API，而 API 又包含 google 对象的定义。所以回调是在 Maps API 被附加之前触发的，因此当 initialize() 回调函数被触发时 google 是未定义的。

解决方案

在此处查看使用不同方式加载初始函数的 doktormolle 解决方案 --> http://jsfiddle.net/doktormolle/7cu2F/

这里有一个解决方案，它实际上将谷歌地图加载器添加到您的页面，绕过中间人-> http://jsfiddle.net/doktormolle/zJ5em/

于 2014-07-12T06:32:11.360 回答