javascript 将 google maps api 代码移动到单独的文件 + jquery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32040213/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Moving google maps api code to separate file + jquery
提问by Gabriel A. Zorrilla
This time, i'll go right to the point:
这一次，我将切入正题：
HTML:
HTML：
<!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>
Code.js:
代码.js：
$(document).ready(function () {
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 10
});
}
});
Result:
结果：
Uncaught TypeError: window.initMap is not a function.
Tips?
尖端？
Also, wonder if this part:
另外，想知道这部分是否：
<script async defer src="https://maps.googleapis.com/maps/api/js?key=*snip*&callback=initMap">
Can be moved to the same code.js file.
可以移动到相同的 code.js 文件中。
回答by codegaze
Update:Dear friends, this was an awful answer. A really really awful answer.
Well, the solution was fine, the explanation not. This is my strike-through of shame :)
更新：亲爱的朋友们，这是一个糟糕的答案。一个非常非常糟糕的答案。
嗯，解决方案很好，解释不是。这是我的耻辱：）
You don't need to set a $(document).ready()because this tells to the browser to call initMap();when the document is ready but you have async and defer in your goolemaps script which means that when you try to execute your initiation you are missing some things.
您不需要设置 a ， $(document).ready()因为这会告诉浏览器initMap();在文档准备好时调用，但是您的 goolemaps 脚本中有 async 和 defer 这意味着当您尝试执行启动时，您会遗漏一些东西。
Updated Answer:You need just the initMap()function in your javascript file.
If you wrap your function inside a $(document).ready()function (closures, closures, closures people), then this function(initMap) isn't available outside the $(document).ready().
更新的答案：您只需要initMap()javascript 文件中的函数。如果您将函数包装在一个$(document).ready()函数内（闭包、闭包、闭包人），那么该函数（initMap）在$(document).ready().
e.g: This doesn't work and returns error 'Uncaught ReferenceError: myfunc is not defined'
例如：这不起作用并返回错误“Uncaught ReferenceError: myfunc is not defined”
$(document).ready(function(){
myfunc = function(){
console.log('myfunc');
}
})
myfunc();
This will work:
这将起作用：
$(document).ready(function(){
myfunc = function(){
console.log('myfunc');
}
myfunc();
})
and this will work:
这将起作用：
myfunc = function(){
console.log('myfunc');
}
$(document).ready(function(){
myfunc();
})
Why you say? Because of how javascript scope and closureswork of course :)
为什么你说？由于 javascript作用域和闭包的工作原理：)
回答by Andrey Kudriavtsev
- leave
.....&callback=initMap" async defer></script>as it is - put google's
<scripttag as higher as possible write in your 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... } })
.....&callback=initMap" async defer></script>原样离开- 把谷歌的
<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... } })
my complex answer is here
我的复杂答案在这里
