Html InvalidStateError：“尝试使用不可用或不再可用的对象”在基本的 Google 地图教程示例中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17212508/
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
InvalidStateError: "An attempt was made to use an object that is not, or is no longer, usable" in basic Google Map tutorial example
提问by Herb
I have an XML, which is transformed to HTML via an XSLT. The XML is able to contain JavaScript, and it translates this correctly to HTML, as I do in many other pages as well. It just does not work with GoogleMaps, and I suspect, my JavaScript is faulty somewhere.
我有一个 XML，它通过 XSLT 转换为 HTML。XML 能够包含 JavaScript，并将其正确地转换为 HTML，正如我在许多其他页面中所做的那样。它只是不适用于 GoogleMaps，我怀疑，我的 JavaScript 在某处有问题。
The relevant sections of the resulting HTML look like posted below.
生成的 HTML 的相关部分如下所示。
What's happening in the HTML/in the Scripts:
HTML/脚本中发生了什么：
- The API is loaded from googleapis.com
- A div with the ID map_canvas is created.
- A function start() is defined, which is started via
<body onload="start();">. - In this function, a variable map_canvas is created and passed the reference to the div object named map_canvas.
- To control, that this step worked, I give the div the new background color red.
- It works.
- Next, I'd want to create the variable var_options and set initial values for center, zoom, and mapTypeId.
- To control, that this step worked, I give the div the new background color blue.
- This does not work, it stays red.
- Hence, this instruction was not executed.
- So I check if I can access the object
google.mapsat all. - if so, I give the div the new background color green.
- This works, so I can access this object.
- Cross check: If I comment out the statement loading the API, the color does not change.
- API 从 googleapis.com 加载
- 创建了一个 ID 为 map_canvas 的 div。
- 定义了一个函数 start()，它通过
<body onload="start();">. - 在这个函数中，创建了一个变量 map_canvas 并将引用传递给名为 map_canvas 的 div 对象。
- 为了控制这一步是否有效，我将新的背景色设置为红色。
- 有用。
- 接下来，我想创建变量 var_options 并设置 center、zoom 和 mapTypeId 的初始值。
- 为了控制这一步是否有效，我为 div 设置了新的背景颜色为蓝色。
- 这不起作用，它保持红色。
- 因此，这条指令没有被执行。
- 所以我检查我是否可以访问该对象
google.maps。 - 如果是这样，我给 div 新的背景颜色绿色。
- 这有效，所以我可以访问这个对象。
- 交叉检查：如果我注释掉加载 API 的语句，颜色不会改变。
To me, this looks like the following is faulty somewhere.
对我来说，这看起来像下面的某个地方是错误的。
var map_options = {
center: new google.maps.LatLng(44.54, -78.54),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
But after several hours I still cannot figure out what it is.
但几个小时后，我仍然无法弄清楚它是什么。
<html>
<head>
...
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript">
</script>
<script type="text/javascript">
function start()
{
var map_canvas = document.getElementById('map_canvas');
// If the element can be located, we make it green. Checked.
// If we give the function another name than start, it won't be executed. Checked.
map_canvas.style.backgroundColor = 'green';
if(typeof google.maps != 'undefined') {
// If the google.maps object exists, we make the canvas red. Checked.
// If the API was not loaded from googleapis (commented out), it will stay green.
map_canvas.style.backgroundColor = 'red';
}
// So why does the following not work?
var map_options = {
center: new google.maps.LatLng(44.54, -78.54),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// Not arriving here:
map_canvas.style.backgroundColor = 'blue';
// Before going on, I want to solve above problem, so this is commented out.
// var map = new google.maps.Map(map_canvas, map_options);
// map_canvas.style.backgroundColor = 'black';
}
</script>
</head>
<body onload="start();">
...
<div style="width: 400px; height: 224px;" id="map_canvas"></div>
...
</body>
</html>
采纳答案by Herb
I found this Google page. (Edit:As per 2017-Jun-16, the link is broken.) It seems undocumented, though. Click on the button. Works on both FF and IE. Check out the markup and the Javascript, it loads the map via a callback.
我找到了这个谷歌页面。（编辑：根据 2017 年 6 月 16 日，链接已损坏。）不过，它似乎没有记录。单击按钮。适用于 FF 和 IE。检查标记和 Javascript，它通过回调加载地图。
Thanks for putting me on the right track.
谢谢你让我走上正轨。
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Dynamic Loading</title>
<script type="text/javascript">
function handleApiReady() {
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function appendBootstrap() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=handleApiReady";
document.body.appendChild(script);
}
</script>
</head>
<body style="margin:0px; padding:0px;">
<input type="button" value="Load Bootstrap + API" onclick="appendBootstrap()">
<div id="map_canvas" style="width:400px; height:400px"></div>
</body>
</html>
回答by Peter Drinnan
I find the most common cause of this error is simply an invalid img src.
我发现此错误的最常见原因只是无效的 img src。
回答by Wietse
My error was something similar (which is why I found this post), but only in Internet Explorer (version 11):
我的错误是类似的（这就是我发现这篇文章的原因），但仅限于 Internet Explorer（版本 11）：
File: eval code (401), Line: 39, Column: 304
This was caused because I used svg-images as markers:
这是因为我使用 svg-images 作为标记：
var marker = map.addMarker({
lat: position.coords.latitude,
lng: position.coords.longitude,
icon : {
url : '/images/marker.svg'
}
});
Switching to png-images instead of svg solved my problem!
切换到 png-images 而不是 svg 解决了我的问题！
