Question

我正在创建一个ASP.NET webforms页面，它将显示包含一系列标记的谷歌地图（通过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>

Answer 1

我已经尝试了你的例子，它只需要一个小的修改：它可能只是你的表单“缩小”大小所以地图是不可见的。我添加了以下样式（几乎取自this示例）：

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

希望这有帮助。

document.getElementById没有在ASP.NET窗体中查找元素

1 个答案: