javascript - 无效状态错误 : "An attempt was made to use an object that is not, or is no longer, usable" in basic Google Map tutorial example

标签 javascript html google-maps firefox

我有一个 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>

最佳答案

我发现导致此错误的最常见原因仅仅是无效的 img src。

关于javascript - 无效状态错误 : "An attempt was made to use an object that is not, or is no longer, usable" in basic Google Map tutorial example,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17212508/

相关文章:

php - 返回动态内容时尝试加载 "div"

javascript - jQuery 过早地向元素添加 css 属性

html - 使用xpath(python3)的href属性为空

python - 如何使用按钮将sqlite Flask后端的数据显示到前端?

javascript - 更改谷歌地图选项 jquery、center、zoom

javascript - 如何在 Vue.js Express MongoDB 应用程序中传递 props

javascript - 带有选定元素框的复选框

Javascript 正则表达式检测字符串中的 CSS 代码?

android - 谷歌地图安卓: Live update position of multiple markers

c# - 如何从 Google 静态 map API 获取图像