这一次,我会直截了当地说明:
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文件。
答案 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)
.....&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...
}
})
我的复杂答案是here