【问题标题】:InvalidStateError: "An attempt was made to use an object that is not, or is no longer, usable" in basic Google Map tutorial exampleInvalidStateError:“尝试使用不可用或不再可用的对象”在基本 Google 地图教程示例中
【发布时间】:2013-06-17 05:49:59
【问题描述】:

我有一个 XML,它通过 XSLT 转换为 HTML。 XML 能够包含 JavaScript,并且它可以正确地将其转换为 HTML,就像我在许多其他页面中所做的那样。它只是不适用于 GoogleMaps,而且我怀疑我的 JavaScript 有问题。

生成的 HTML 的相关部分如下所示。

HTML/脚本中发生了什么:

  • API 是从 googleapis.com 加载的
  • 创建了一个 ID 为 map_canvas 的 div。
  • 定义了一个函数start(),通过<body onload="start();">启动。
  • 在此函数中,创建了一个变量 map_canvas 并将其传递给 引用名为 map_canvas 的 div 对象。
  • 为了控制这一步是否有效,我为 div 设置了新背景 红色。
  • 有效。
  • 接下来,我要创建变量 var_options 并设置初始值 center、zoom 和 mapTypeId 的值。
  • 为了控制这一步是否有效,我为 div 设置了新背景 蓝色。
  • 这不起作用,它保持红色。
  • 因此,该指令未执行。
  • 所以我检查我是否可以访问对象google.maps
  • 如果是这样,我给 div 赋予新的背景颜色绿色。
  • 这行得通,所以我可以访问这个对象。
  • 交叉检查:如果我注释掉加载 API 的语句,则 颜色不变。

对我来说,这看起来像是下面的某个地方有问题。

    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=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>

【问题讨论】:

  • 控制台出现什么错误?
  • 代码给了我错误,传感器必须是真或假。我进行了一些测试,并将您的 googleapis url 更改为 &lt;script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"&gt; 有帮助。至少它不会在它之后出现错误并且元素变成蓝色(如预期的那样?)。我从传感器参数的前面删除了amp;
  • 谢谢普斯基斯。这是一个复制粘贴的rmnant,最初我使用key=xxx,但后来我了解到,它不再需要了。 - 但是,我的代码仍然不起作用,即 div 保持红色。
  • @Bergi。它指的是加载的 js 的第 9 行,其内容为:'' type="text/javascript">');'。它说:[13:54:46.604] InvalidStateError:“试图使用一个不可用或不再可用的对象@maps.googleapis.com/maps/api/js?sensor=false:9
  • 您使用的是什么浏览器(版本)?看起来这是一个特定于浏览器的错误。

标签: javascript html google-maps firefox


【解决方案1】:

我找到了this Google page (webarchive)。不过,它似乎没有记录。点击按钮。适用于 FF 和 IE。查看标记和 Javascript,它通过回调加载地图。

感谢您让我走上正轨。

<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>

【讨论】:

    【解决方案2】:

    我发现这个错误的最常见原因仅仅是一个无效的 img src。

    【讨论】:

    • 就我而言。 +1。
    【解决方案3】:

    我的错误与此类似(这就是我发现这篇文章的原因),但仅限于 Internet Explorer(版本 11):

    File: eval code (401), Line: 39, Column: 304
    

    这是因为我使用了 svg-images 作为标记:

    var marker = map.addMarker({
        lat: position.coords.latitude,
        lng: position.coords.longitude,
        icon : {
            url : '/images/marker.svg'
        }
    });
    

    切换到 png-images 而不是 svg 解决了我的问题!

    【讨论】:

    • 尝试为您的 SVG 添加高度和宽度。查看更多信息:stackoverflow.com/questions/23923607/…
    • 感谢@Promo,这正是我所需要的。如果你问我,你的评论可能是一个单独的答案。
    猜你喜欢
    • 2016-04-30
    • 2019-03-05
    • 2014-05-21
    • 2013-12-08
    • 2014-05-19
    • 2013-09-24
    • 2013-10-08
    • 2022-08-18
    • 2013-12-01
    相关资源
    最近更新 更多