document.getElementById 在 ASP.NET 表单中找不到元素答案

【问题标题】：document.getElementById not finding element in ASP.NET formdocument.getElementById 在 ASP.NET 表单中找不到元素
【发布时间】：2014-01-21 05:40:23
【问题描述】：

我正在制作一个 ASP.NET 网络表单页面，该页面将显示一个包含一系列标记的谷歌地图（通过 Google Maps JavaScript API）。

如果我 DON"T 将 <div id="map-canvas"> 放在 <form> 标记内，它会完美运行。

但如果我将<div id="map-canvas"> 移动到<form> 内，我只会得到一个空白页（没有错误）。

查看检查器中的空白页面，似乎<div id="map-canvas"> 填充了一些基本元素以显示地图（标记除外），但页面根本不显示任何内容。

这可能是由于document.getElementById 因在<form id="form1" runat="server"> 上动态创建的 ID 而导致在 DOM 中出现问题而导致的吗？

注意：提供的代码只是一个测试页面。一旦我对其进行排序，它将使用 ASP.NET MasterPage。

CSS

<style type="text/css">
    html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px;
}

脚本

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
    function initialize() {  
        var latlngCenter = new google.maps.LatLng(30.000000, -100.000000);
        var mapOptions = { zoom: 3, center: latlngCenter }
        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        var latlngPlaceOne = new google.maps.LatLng(-30.000000, 150.000000);
        var markerPlaceOne = new google.maps.Marker({
            position: latlngPlaceOne,
            map: map,
            title: 'Place One'
        });
     } 
     google.maps.event.addDomListener(window, 'load', initialize);
</script>

HTML

<body>
    <form id="form1" runat="server">
        <div id="map-canvas"></div>
    </form>
</body>

【问题讨论】：

您可以发布呈现的 HTML 而不是 ASP 源代码吗？
您可以添加 ClientIDMode="Static" 以便表单的服务器端和客户端的 ID 相同。但是使用您的代码，div 不是服务器控件，因此不会有问题。
@KrishnanunniJeevan 我不想使用 ClientIDMode=Static，因为该表单将位于母版页上并用于大约 150 个其他页面。
@Schien 渲染的 HTML 中是否有任何特别有用的部分？我宁愿不只是在这里倾倒所有东西。 Maps API 将大量标记转储到目标 div 中。
渲染“地图画布”前后各 5 行。还要寻找具有重复 ID 的元素。

标签： javascript asp.net google-maps

【解决方案1】：

我已经尝试了您的示例，它只需稍作修改即可工作：可能只是您的表单尺寸“缩小”了，因此地图不可见。我添加了以下样式（几乎取自 this 示例）：

<style>
  html, body, form, #map-canvas {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>

希望这会有所帮助。

【讨论】：

抱歉，我的页面上已经有该 CSS，但尚未在问题中发布。
@DavidHAust 那么我认为它与document.getElementById 没有任何关系 - 我刚刚将您的代码复制粘贴到新创建的页面中（干净的 ASP.NET WebForms 项目）和它像魅力一样工作！
DOH，对此感到抱歉。完全错过了那里的“表格”。感谢您的耐心等待。