Question

这一次，我会直截了当地说明：

HTML：

if (n%2)

Code.js：

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="code.js"></script>
</head>

<body>
    <div id="map"></div>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=*snip*&callback=initMap">
    </script>
</body>

</html>

结果：

$(document).ready(function () {
    var map;

    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: {
                lat: -34.397,
                lng: 150.644
            },
            zoom: 10
        });
    }
});

提示？

另外，想知道这部分是否：

Uncaught TypeError: window.initMap is not a function.

可以移动到相同的code.js文件。

Answer 1

更新：亲爱的朋友们，这是一个糟糕的答案。一个非常糟糕的答案。
嗯，解决方案很好，解释不是。这是我羞耻的罢工：）

您不需要设置$(document).ready()，因为这会告诉浏览器在文档准备就绪时调用initMap();但是您的goolemaps脚本中有异步和延迟，这意味着当你尝试执行你的启动时，你会遗漏一些事情。

更新答案： 您只需要javascript文件中的initMap()函数。如果将函数包装在$(document).ready()函数（闭包，闭包，闭包人员）中，则此函数（initMap）在$(document).ready()之外不可用。

e.g：这不起作用并返回错误'Uncaught ReferenceError：myfunc not defined'

     $(document).ready(function(){
        myfunc = function(){
          console.log('myfunc');
        }
     })
     myfunc();

这将有效：

    $(document).ready(function(){
        myfunc = function(){
            console.log('myfunc');
        }
        myfunc();
    })

这将有效：

    myfunc = function(){
        console.log('myfunc');
    }
    $(document).ready(function(){
        myfunc();
    })

为什么这么说？因为javascript scope and closures当然如何工作：）

Answer 2

保留.....&callback=initMap" async defer></script>原样
将Google的<script标记尽可能高

写入你的剧本

function initMap() {}; // now it IS a function, lol, and it is in global

$(() => { // jquery on load
  initMap = function() {
    // your code like...
    var map = new google.maps.Map(document.getElementById('map'), {...});
    // and other stuff...
  }
})

我的复杂答案是here

将谷歌地图api代码移动到单独的文件+ jquery

2 个答案: