InvalidStateError：“尝试使用不是或不再可用的对象”在基本的Google Map教程示例中 [英] InvalidStateError: "An attempt was made to use an object that is not, or is no longer, usable" in basic Google Map tutorial example
问题描述
我有一个XML，通过XSLT转换为HTML。 XML能够包含JavaScript，并将其正确地转换为HTML，就像我在其他许多页面中一样。它只是不工作与GoogleMaps，我怀疑，我的JavaScript是有问题的。
结果HTML的相关部分看起来像下面张贴。 b
$ b
HTML /脚本中发生了什么： 对我来说，这看起来像下面的错误的地方。
< ; body 。
onload =start（）;>
引用名为map_canvas的div对象。
红色的颜色。
值。
颜色蓝色。
google。如果是的话，我给新的背景颜色绿色。
颜色不会改变。
var map_options = {
center：new google.maps.LatLng（44.54，-78.54），
zoom：8，
mapTypeId：google.maps.MapTypeId.ROADMAP
}
但几个小时后，我仍然无法弄清楚它是什么。
< html>
< head>
...
< script src =http://maps.googleapis.com/maps/api/js?sensor=falsetype =text / javascript>
< / script>
< script type =text / javascript>
函数start（）
{
var map_canvas = document.getElementById（'map_canvas'）;
//如果元素可以被定位，我们使它变成绿色。经过。
//如果我们给这个函数另外一个名字而不是start，它将不会被执行。经过。
map_canvas.style.backgroundColor ='green';
$ b $ if（typeof google.maps！='undefined'）{
//如果google.maps对象存在，我们将画布变成红色。经过。
//如果API没有从googleapis（注释掉）加载，它将保持绿色。
map_canvas.style.backgroundColor ='red';
}
//所以为什么下面的不行？
var map_options = {
center：new google.maps.LatLng（44.54，-78.54），
zoom：8，
mapTypeId：google.maps.MapTypeId.ROADMAP
}
//未到达：
map_canvas.style.backgroundColor ='blue';
//在开始之前，我想解决上面的问题，所以这个被注释掉了。
// 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>
我发现这个Google页面。 （编辑：）按照2017年6月16日的链接，该链接已被打破。）但似乎没有记录。点击按钮。适用于FF和IE。检查标记和Javascript，它通过回调加载地图。
感谢您使我处于正确的轨道。
< html>
< head>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/>
< meta http-equiv =content-typecontent =text / html; charset = UTF-8/>
< title> Google Maps JavaScript API v3示例：动态加载< / title>
< script type =text / javascript>
函数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）;
函数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 =buttonvalue =Load Bootstrap + APIonclick =appendBootstrap（）>
< div id =map_canvasstyle =width：400px; height：400px>< / div>
< / body>
< / html>
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.
The relevant sections of the resulting HTML look like posted below.
What's happening in the HTML/in the Scripts:
- 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.
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>
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.
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>
这篇关于InvalidStateError：“尝试使用不是或不再可用的对象”在基本的Google Map教程示例中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
