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

时间:2015-08-16 21:41:40

标签: javascript google-maps-api-3

这一次,我会直截了当地说明:

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文件。

2 个答案:

答案 0 :(得分:10)

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

您不需要设置$(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当然如何工作:)

答案 1 :(得分:0)

  1. 保留.....&callback=initMap" async defer></script>原样
  2. 将Google的<script标记尽可能高
  3. 写入你的剧本

    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...
      }
    })
    
  4. 我的复杂答案是here