Question

我处于脑死亡模式。我试图使用谷歌地图，我刚开始使用我的虚拟html。以下代码有效，但如果我将map div放入容器或只是更改名称，则无法找到ID

<body>
<!--           
    <section id="container">
        <div id="map"></div>
    </section>
   --> 
    <div id="map"></div>

    <script> 
        function initMap() {
        'use strict';

        var myLatLng = {lat: 14.79445, lng: 120.271364};

        var map = new google.maps.Map(document.getElementById("map"), {
            zoom: 6,
            center: myLatLng
        });
        }
    </script>  

    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOURKEY&callback=initMap">
    </script>

</body>

如果我取出注释并使用容器div运行它，则getElementByID将失败。

如果我将id从map更改为map2（在两个地方），则getelement失败。

我知道我做了一件非常愚蠢的事情，但我只是没有看到它。

开发环境是括号，推动了Chrome浏览器。（我的密钥已从API调用中删除）

Answer 1

在Google示例中，您会发现需要将地图的高度设置为其容器的100％。这是他们自己的例子中的CSS：

html, body { 
  height: 100%; 
  margin: 0;
  padding: 0; 
} 
#map { 
  height: 100%;
}

通过将其包装在容器中，您导致地图100％为0，这是其父div（#container）的高度。最简单的解决方法是：

#container, #map {
  height: 100%;
}

这是一个工作小提琴：https://jsfiddle.net/5bg9gkL9/2/。

Answer 2

如果我将id从map更改为map2（在两个地方）

这是你的问题。

在任何DOM（HTML，SVG，XML等）中，id必须是唯一的。通过唯一，我的意思是只有一个元素必须具有特定的id。如果两个或多个元素具有相同的ID，则认为该错误。

HTML是一种非常宽松的语言，在开发人员犯错时不会抛出错误消息。相反，浏览器会自动尝试猜测你的意思。

如果有两个或更多相同的ID，则没有标准指定浏览器应该执行的操作。因此getElementById可以在这种情况下做任何事情。不同的浏览器可能会做不同的事情。

失败不是getElementById。失败是两个具有相同id的元素。

对于您要执行的操作，请改用class和getElementsByClassName。请注意：它是elementS的类名，复数。

是什么导致getElementbyID失败

2 个答案: