为什么document.getElementById(“id”)它不起作用
Why document.getElementById("id") it does not work?
我有以下代码(使用谷歌地图API V3绘制地图):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% ; width:100%;}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var previousPosition = null;
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 19,
center: new google.maps.LatLng(48.858565, 2.347198),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
if (navigator.geolocation)
var watchId = navigator.geolocation.watchPosition(successCallback, null, {enableHighAccuracy:true});
else
alert("Votre navigateur ne prend pas en compte la géolocalisation HTML5");
function successCallback(position){
map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
var marker = new google.maps.Marker({
position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
map: map
});
if (previousPosition){
var newLineCoordinates = [
new google.maps.LatLng(previousPosition.coords.latitude, previousPosition.coords.longitude),
new google.maps.LatLng(position.coords.latitude, position.coords.longitude)];
var newLine = new google.maps.Polyline({
path: newLineCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
newLine.setMap(map);
}
previousPosition = position;
};
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
它工作得很好(你可以测试它),但是当我把:
<div id="a">
<div id="map_canvas"></div>
</div>
而不是:
<div id="map_canvas"></div>
它不再起作用了...
为什么它在第二个版本中不起作用?
PS:我刚刚给出了一个简单的代码来代表我的真实代码(只是为了让你更容易理解)......
编辑:我真的不明白,我认为这是选择器的问题...正如迈克尔·哈伦所说。
我试图在我的代码中执行此操作,但是当我单击"单击我"时,它不起作用......
<!DOCTYPE html>
<html>
<head>
<style>
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
/*
#content,#right = #a,#map_canvas{..
*/
#content,#right { width:70%; height: 100%;margin-left:2%; box-shadow: 0px 5px 5px 5px #aaa; }
</style>
<title>Géolocalisation restreinte</title>
<%@include file="includes/head.html" %>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
function drawMap(){
var locTunisie= new google.maps.LatLng(33.858565, 10.347198);
map = new google.maps.Map(document.getElementById("right"), {
zoom: 6,
center:locTunisie,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
</script>
</head>
<body>
<!-- iclure le header-->
<%@include file="includes/header.html" %>
<!-- fin inclure -->
<div id="notification"><!-- zone de notification -->
</div>
<!-- Le contenu -->
<div id="content">
<form name="f">
<!-- draw the map Here -->
<div id="right">
</div>
<div id="left">
<a onclick="drawMap()">Click Here</a>
<input type="date" placeholder="Date debut jj-mm-aaaa" name="dateDeb" id="dateDeb">→<input type="date"placeholder="Date Fin jj-mm-aaaa" name="dateFin"id="dateFin">
<br/>
<br/>
<div class="scrollbar-b">
<table class="newspaper-a" summary="">
<caption>Liste des Automobile en lignes</caption>
<thead>
<tr>
<th scope="col">Type</th>
<th scope="col">Matriculation</th>
<th scope="col">Marque</th>
<th scope="col">Model</th>
</tr>
</thead>
<tbody id="onLine">
</tbody>
</table>
</div> <br/><br/>
<div class="scrollbar-b">
<table class="newspaper-a" summary="">
<caption>Liste des Automobile hors lignes</caption>
<thead>
<tr>
<th scope="col">Type</th>
<th scope="col">Matriculation</th>
<th scope="col">Marque</th>
<th scope="col">Model</th>
</tr>
</thead>
<tbody id="offline">
</tbody>
</table>
</div>
</div>
</form>
</div>
<!-- Fin contenu -->
<!-- iclure le footer-->
<%@include file="includes/footer.html" %>
<!-- fin iclure-->
</body>
</html>
问题是 100% 大小的地图容器最初以窗口作为根元素进行限制。但是当你把它嵌套在另一个div中时,它现在被那个div所包围,这个div要小得多(即0)。
您还需要使外部div更大:
#a, #map_canvas { height: 100% ; width:100%;}
^^^
相关文章:
- getDocument by id/get input text from button dons'不起作用
- 我的ID获取元素不起作用
- 悬停时函数在具有相同 id 的多个元素中不起作用
- 循环浏览页面上所有选中的复选框并将id拉入数组不起作用
- 为什么我的jquery代码在使用ID但使用Class时不起作用
- jQuery获取keyup上带有类的输入的ID不起作用
- 为什么$('#id').click函数不起作用
- JavaScript id 选择器不起作用?不知道出了什么问题
- 使用科尔多瓦在我的网络服务器上存储 GCM ID 不起作用
- jQuery 按 ID 名称删除 img 标签不起作用
- push 方法将元素添加到数组中不起作用,同时获取具有相同类的元素的 ID 和值
- 带有指令不起作用的 AngularJS 动态表单字段 ID
- 帧 ID 不断变化,imacros 脚本不起作用
- 两个元素的两个标签,具有相同的 id,但形式不同.为什么不起作用
- Yii2:Jquery 选择表格单元格的 id 不起作用
- 需要 document.getElementById 的解决方法,以便在多个 ID 可能性之间循环.类不起作用
- 具有 ID AND 类的 jQuery 选择器目标元素不起作用
- 铬错误或编码错误?目标页面中的锚/ID 链接不起作用
- Jquery 更改克隆元素子元素的 ID 不起作用
- 复制的文件不起作用 - ID在不同页面HTML JavaScript PHP中不起作用