Javascript:如何找到id为"map"的h3标题的内容？
Ale*_*ber 2 javascript dom google-maps
我有一个带有Google Map的网页,效果很好.我没有将城市名称硬编码到那里的"波鸿",而是想找到标题
<h3 id="city"><i>Bochum</i></h3>
并在我的init()函数中使用该值.
我可能在下面的代码中遗漏了一些小问题.请帮助我,请参考我对这样一个"孩子"的API参考,我的Javascript技能非常生疏.
我也想知道,我怎样才能通过我的h3标题再传递一个值,就像我的标记的颜色一样？
谢谢!亚历克斯
<html>
<head>
<style type="text/css">
h1,h2,h3,p { text-align: center; }
#map { width: 400; height: 200; margin-left: auto; margin-right: auto; }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function init() {
for (var child in document.body.childNodes) {
child = document.body.childNodes[child];
if (child.nodeName == "H3")
alert(child);
}
// use the #city value here instead
city = 'Bochum';
if (city.length > 1)
findCity(city);
}
function createMap(center) {
var opts = {
zoom: 9,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
return new google.maps.Map(document.getElementById("map"), opts);
}
function findCity(city) {
var gc = new google.maps.Geocoder();
gc.geocode( { "address": city}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var pos = results[0].geometry.location;
var map = createMap(pos);
var marker = new google.maps.Marker({
map: map,
title: city,
position: pos,
});
}
});
}
</script>
<head>
<body onload="init();">
<h3 id="city"><i>Bochum</i></h3>
<div id="map"></div>
</body>
</html>
要包含更多数据,您可以使用以下属性:
<h3 id="city" data-citycolor="red"><i>Bochum</i></h3>
把它们拿出来像这样:
var city = document.getElementById("city");
var name = city.textContent || city.innerText;
var color = city.getAttribute("data-citycolor");
我认为你最好使用jQuery,即使它是一个26kb的库文件,从那以后你可以简化它:
var city = $("#city");
var name = city.text();
var color = city.data("citycolor");
请注意,您在注释中使用了"#city",使用jQuery,您可以在代码中使用该完全字符串.这是一个很好的胜利.如果你想在一个页面上拥有更多这些内容,那么将来使用$(".city")也会变得微不足道.
| 归档时间： |
|
| 查看次数： |
12710 次 |
| 最近记录： |