如何通过用户脚本/同步加载谷歌地图 api？
Posted
技术标签:
【中文标题】如何通过用户脚本/同步加载谷歌地图 api？【英文标题】：How to load the google maps api via a userscript / synchronously? 【发布时间】：2014-06-20 19:58:58 【问题描述】：我正在编写一个用户脚本（greasemonkey 脚本），它需要将谷歌地图添加到我无法控制的网站上的页面。
我尝试像这样添加脚本（在加载我尝试过的其他脚本时效果很好）：
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);
但这失败了：
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.
如何从用户脚本加载和使用地图 API？
【问题讨论】：
你确定你不是指asynchronously？ Asynchronously Loading the API
@geocodezip 是的，我确定 - 查看错误消息，它说“无法从异步 .. 写入 ..”，这意味着同步加载的脚本可能有效.为什么投反对票？
【参考方案1】：
根据文档，只能为每个脚本加载 API
除非您提供参数callback
=> load Google Maps API asynchronously
我没有任何编写用户脚本的经验，但我希望它能有所帮助。
注意：不要忘记将回调函数添加到全局命名空间中。 （在纯 JS 中，您可以将其添加到 window 对象中。）
【讨论】：
【参考方案2】：您必须在脚本加载中添加一个回调函数。如果您在 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>
【讨论】：
【参考方案3】：您可以尝试将'async' 属性添加到my_script，如下所示：
my_script.setAttribute('async',true);
你也可以看看这个：https://developers.google.com/maps/documentation/javascript/tutorial?hl=en#asynch
【讨论】：
以上是关于如何通过用户脚本/同步加载谷歌地图 api？的主要内容，如果未能解决你的问题，请参考以下文章
从 web api 加载谷歌地图所需的标记，并在相机移动时动态加载其他标记