Question

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

我基本上复制并粘贴了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>

有人可以帮忙吗？谢谢！

Answer 1

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

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>

Answer 2

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

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）那么上述线路究竟意味着什么？在加载完所有外部文件（包括图像，样式，脚本和其他依赖资源）之后，在加载并呈现DOM并准备好执行操作之后很长时间，windows.onload会终止。

这就是我们遇到问题的地方。在windows.onload调用附加

的loadScript函数之后

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

（顺便说一句您的查询字符串缺少查询变量之间的所有“＆amp; symbols” .... / js？v = 3＆amp; key = xyz＆amp; sensor = false＆amp; callback = initialize＆lt; --- format thats correct

5）期待已久的Google API。不。它只附加了API的加载器，尽管url在url本身中有单词api。打开并查看上面的文件，您将看到document.write和API的各个部分块，它们将根据您调用加载器的查询字符串参数进行有条件加载。

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

<强>解决方案

在这里查看doktormolle解决方案，它使用不同的方式加载初始函数 - ＆gt; http://jsfiddle.net/doktormolle/7cu2F/

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

谷歌地图API V3 - ReferenceError：未定义谷歌

2 个答案: