javascript 如何通过用户脚本/同步加载谷歌地图 api？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23456849/
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
How to load the google maps api via a userscript / synchronously?
提问by GJ.
I'm writing a userscript (greasemonkey script) that needs to add a google map to a page on a website that I don't control.
我正在编写一个用户脚本（greasemonkey 脚本），需要将谷歌地图添加到我无法控制的网站上的页面。
I tried to add the script like so (which works well when loading other scripts that I tried) :
我尝试像这样添加脚本（在加载我尝试过的其他脚本时效果很好）：
var my_script = document.createElement('script');
my_script.setAttribute('src',
'https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false');
document.head.appendChild(my_script);
But this fails with:
但这失败了：
Failed to execute 'write' on 'Document': It isn't possible to write into a
document from an asynchronously-loaded external script unless it is explicitly
opened.
How can I load and use the maps api from a userscript?
如何从用户脚本加载和使用地图 API？
回答by DoubleU23
according to the docs it's only possible to load the API per script
unless you provide the parameter callback
=> load Google Maps API asynchronously
根据文档，
除非您提供参数callback
=>异步加载 Google Maps API，否则只能按脚本加载 API
I don't have any experience in writing userscripts but i hope it helps.
我没有任何编写用户脚本的经验，但我希望它有所帮助。
ATTENTION:Don't forget to add the callback function into the global namespace.
(In plain JS you would add it to the window object.)
注意：不要忘记将回调函数添加到全局命名空间中。
（在普通 JS 中，您可以将其添加到 window 对象中。）
回答by Gonzalo
You have to add a callback function to the script loading. If you are using it in phonegap, you should check internet connection, and also if it is already loaded. Yuo can ask and I will give you the piece of code.
您必须在脚本加载中添加回调函数。如果您在 phonegap 中使用它，您应该检查互联网连接，以及它是否已经加载。你可以问，我会给你一段代码。
<!DOCTYPE html>
<html>
<head>
<title>Asynchronous Loading</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script>
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
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?v=3.exp&' +
'callback=initialize';
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
回答by abmd
you may try adding an 'async'attribute to my_script, like this:
您可以尝试向 中添加一个'async'属性my_script，如下所示：
my_script.setAttribute('async',true);
Also you can look this: https://developers.google.com/maps/documentation/javascript/tutorial?hl=en#asynch
你也可以看看这个：https: //developers.google.com/maps/documentation/javascript/tutorial?hl=en#asynch
