Клуб API Карт

Как набросать на карту метки из списка, сохранив их корядок

loloshthebest
11 октября 2012, 20:33
Есть такая задача. Имеется на странице список адресов в виде параграфов, дивов и т.д., например:


<div><div>Адрес 1</div><div>Описание 1</div></div>
<div><div>Адрес 2</div><div>Описание 2</div></div>
<div><div>Адрес 3</div><div>Описание 3</div></div>
...


Эти дивы пронумерованы, т.е. на странице рядом с каждым адресом стоит цифра.

Нужно нанести на карту метки с номерами, т.е. чтобы метка по первому диву была с цифрой 1 и т.д. Для меток нужно сделать определённые баллуны, инфа в которых берётся также из контейнера с адресами.

Короче говоря нужно сделать так, как сделано на главной странице карт, например вот http://maps.yandex.ru/?text=yandex.

Я набросал код вот такого вида:

jQuery("селектор для элементов с адресами и описаниями").each(function() {
    // извлекаем адрес и описание
    addresses.push(адрес);
    balloons.push(описание);
});

for (var i = 0; i < addresses.length; i++) {
    var addr = ymaps.geocode(addresses[i], {results: 1});
    addr.then(function(res) {
        placemarks.push(res.geoObjects.get(0).geometry.getCoordinates());
    });
}

Потом написал вот такую функцию, которую вызываю по таймауту в 2-3 секунды:

function putPlacemarks(coords) {
    var myCollection = new ymaps.GeoObjectCollection();
    for (var i = 0, l = coords.length; i < l; i++) {
        var myPlacemark = new ymaps.Placemark(coords[i], {
            iconContent: i + 1,
            balloonContent: balloons[i]
        }, {
            preset: "twirl#lightblueIcon"
        });
        myCollection.add(myPlacemark);
    }
    myMap.geoObjects.add(myCollection);
}

Код, который берёт тексты и объявляет карту находится в ymaps.ready(). Сейчас код работает некорректно, номера меток проставляются неверно и всегда по-разному. Я так понимаю это связано с задержками и с тем, что геокод не возвращает координаты мгновенно.

Сейчас обратил внимание - страничка на локалхосте ошибок даёт сильно меньше, а вот выложенная на сайт - тупо рандомит. Как я понимаю, порядок возвращения координаты не совпадает с порядком вызова geocode, отсюда и проблема.

Никто не может подсказать, есть ли пример, как на яндекс-картах сделано? То есть не только, чтобы просто заданные адреса закинуть на карту, но ещё и чтобы при наведении на элемент в доме, метка узнавала об этом и меняла цвет или появлялся хинт и пр?

Большое спасибо за помощь.
9 комментариев
Подписаться на комментарии к посту

Мы публиковали статью в блоге в которой поделились классом, сохраняющим порядок координат при множественном геокодировании.

 

Шикарное дополнение, спасибо за ответ!
Кстати, сейчас я поставил задержку вызова putPlacemarks() 2 секунды, можно поступить как-нибудь более правильно?
Кроме того, может ли вообще быть пример с тем, как сделана главная страница яндекс-карт? То есть где реализована связь произвольных элементов на странице с метками на карте?

никаких задержек не надо ставить.

обработка данных должна производится сразу после их получения,

а не с использованием "на глазок" выставленных таймаутов

Честно говоря мне тоже так показалось, но как тогда добавить тому, что скрывается за res.geoObjects.get(i) текст метки и балун?

создать новую метку со своим контентом по координатам найденный геокодером

Так надо же дождаться, когда координаты будут готовы, нет? Сейчас then() у меня выглядит следующим образом:

mGeocoder.geocode(addresses).then(function(res) {
    for (var i = 0; i < addresses.length; i++) {
        placemarks.push(res.geoObjects.get(i).geometry.getCoordinates());
    }
});

Потом я этот placemarks хочу использовать, но сразу после этого кода поставить код, который будет добавлять метки я не могу - placemarks будет пустым. Или что-то не так?

Используйте placemarks после того как вызовется этот обработчик в then

не понимаю в чем проблема

Что-то я совсем плохой стал :D Добавил в then, теперь всё нормально.

(+1)