Javascript: как найти содержимое заголовка h3 с идентификатором «карта»? - PullRequest
Новая
       22

Javascript: как найти содержимое заголовка h3 с идентификатором «карта»?

1 голос
/ 04 декабря 2010

У меня есть веб-страница с Google Map, которая работает хорошо. Вместо того, чтобы указывать название города в «Бохуме», я бы хотел найти заголовок 

<h3 id="city"><i>Bochum</i></h3>

и используйте это значение в моей функции init ().

Я, вероятно, пропускаю что-то незначительное в приведенном ниже коде. Пожалуйста, помогите мне и, пожалуйста, отошлите мне ссылку на API для такого "ребенка", мои навыки в Javascript очень ржавые

Также мне интересно, как я мог передать еще одно значение через заголовок h3, например, цвет для моего маркера?

Спасибо! Alex

alt text

<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>

Ответы [ 4 ]

5 голосов
/ 04 декабря 2010

Чтобы включить больше данных, вы можете использовать атрибуты: 

<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, дажеесли это библиотечный файл размером 26 КБ, с тех пор вы можете упростить его до следующего: 

var city = $("#city");
var name = city.text();
var color = city.data("citycolor");

Обратите внимание, что вы использовали "#city" в своем комментарии, а с помощью jQuery вы можете использовать эту точную строку в вашем комментарии.код.Это хорошая победа.Это также упрощает использование $ (". City") в будущем, если вы хотите, чтобы их было больше на одной странице.

1 голос
/ 04 декабря 2010

Атрибут id должен быть уникальным для страницы - другими словами, у вас не должно быть никаких других элементов с id = "city". Предполагая, что это так, вот пример того, что вы могли бы сделать: 

<html>
<script type="text/javascript">
    function init()
    {
        var node = document.getElementById("city");
        var cityName = node.childNodes[0].innerHTML;
        alert("Found city name: " + cityName);
    }
</script>

<body onload="init();">
    <h3 id="city"><i>Bochum</i></h3>
</body>
</html>

В качестве рекомендации я бы потерял теги и и вместо этого добавил бы правило стиля для вашего узла h3. В этом случае cityName будет просто node.innerHTML.

0 голосов
/ 04 декабря 2010

Предполагая, что идентификатор 'city' является уникальным (каким должен быть идентификатор): 

document.getElementById('city').getElementsByTagName('i')[0].firstChild.data
0 голосов
/ 04 декабря 2010

Ну, у h3 есть идентификатор, нет? 

var city = document.getElementById('city').innerText;

Или, используя jQuery: 

var city = $('#city').text();
...