Отображение объектов на Yandex карте

@hrutsik · Регистрация: 08.01.2015

Студворк — интернет-сервис помощи студентам

Есть такая задача:
на странице формируется выборка div-ов с классом .adress. в каждом div свое html содержимое(адреса);

HTML5
1
<span class="adress">г.Минск пр.Победителей 79</span><br>

скрипт при совпадении адреса добавляет метку на карту

JavaScript
1
2
3
4
5
6
7
8
9
10
11
var adress=$('.adress').html();
           if (adress=="г.Минск пр.Победителей 79"){
       
        var myPlacemark = new ymaps.Placemark(
            // Координаты метки
            [53.931122, 27.505776] ,{
                hintContent: 'Бэби клаб'
            });
 
        myMap.geoObjects.add(myPlacemark);
    };

для одного адреса работает, но их как и .adress будет много.

Предполагаю что надо создать массив: "адрес - координаты метки" и перебирать его на совпадение для каждого класса .adress ?;
как это реализовать подскажите пожалуйсто!

@sad67man · 07.05.2016, 22:50

А что обязательно координаты указывать в метке? можно же просто адрес писать. Но если использовать координаты Я бы сделал что-то типо такого

HTML5
1
<span class="address" data-placemark="53.931122,27.505776" data-hint="Бэби клаб">г.Минск пр.Победителей 79</span>

JavaScript
1
2
3
4
5
6
7
8
9
$(".address").each(function(){
var coords =  $(this).attr("data-placemark").split(',');
var hint = $(this).attr("data-hint");
  myMap.geoObjects.add(new ymaps.Placemark(
            // Координаты метки
           coords  ,{
                hintContent: hint
            }););
})

Код не проверял, но думаю идея понятна.

Добавлено через 19 минут
Хотя нет. Если просто нужно добавить метки при загрузки страницы, то
формируется массив в php c координатами и хинтом, потом через foreach просто выводите метки.

PHP
1
$arAddresses = array(array("COORDS" => "53.931122,27.505776", "HINT"=>"Бэби клаб"), array(...), и т.д.);

JavaScript
1
2
3
4
5
6
<?foreach($arAddresses as $arArddress):?>
myMap.geoObjects.add(new ymaps.Placemark(
  [<?=$arArddress["COORDS"]?>] ,{
                hintContent: '<?=$arArddress["HINT"]?>'
            }););
<?endforeach;?>

Или добавляете их в коллекцию потом все вместе выводите. Там сами смотрите.

@hrutsik · 08.05.2016, 14:57 **[ТС]**

sad67man, не просто добавить метки. тут поиск по параметрам, в зависимости от которых будут загружены .adress с определенными адресами(html содержимым). адресов с координатами много, но добавиться должны только те метки адреса которых загрузились. отсюда и условие

JavaScript
1
$('.adress').html()==("адрес")

.

Добавлено через 8 часов 29 минут
вот вариант с массивом и условием:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var groups=new Object();
    groups["г.Минск пр.Победителей 79"]="[53.931122, 27.505776]";
    groups["г Минск ул Сурганова д82"] ="[53.931201, 27.581666]";
     groups["г Минск ул.Свердлова д32а"] ="[53.890341, 27.557825]";
 
var adress=$('.adress').html();
       for(var x in groups){
           if (adress == x){
     myMap.geoObjects.add(new ymaps.Placemark(
            // Координаты метки
           groups[x]  ,{
                hintContent: 'Бэби клаб'
            }));
 
    }};

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

@sad67man · 08.05.2016, 15:50

Так у вас координаты просто строкой идут, а нужен массив.

JavaScript
1
groups["г.Минск пр.Победителей 79"]=[53.931122, 27.505776];

@hrutsik · 08.05.2016, 16:09 **[ТС]**

sad67man, все равно не ставит метки..

@sad67man · 08.05.2016, 16:24

А пишет в консоле какую-нибудь ошибку?

@hrutsik · 08.05.2016, 16:33 **[ТС]**

нет не пишет, console.log(groups[x]); срабатывает до if...

@sad67man · 08.05.2016, 16:59

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script src="http://api-maps.yandex.ru/2.1.35/?lang=ru_RU&load=package.full&mode=debug" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
    var targetCoords = [53.931122, 27.505776],
          mapMini;
    ymaps.ready(function () {    
        myMap = new ymaps.Map("myMap",{center: targetCoords,zoom: 10});
    })
    function addPlacemarks(){
    var groups=new Object();
       groups["г.Минск пр.Победителей 79"]=[53.931122, 27.505776];
       groups["г Минск ул Сурганова д82"] =[53.931201, 27.581666];
       groups["г Минск ул.Свердлова д32а"] =[53.890341, 27.557825];
 
    $('.adress').each(function(){
        var adress = $(this).text();
        for(var x in groups){
 
        if (adress == x){
            myMap.geoObjects.add(new ymaps.Placemark(groups[x]  ,{hintContent: 'Бэби клаб'}));
        }};
    })
       
}
</script>
<span class="adress">г.Минск пр.Победителей 79</span><br>
<span class="adress">г Минск ул Сурганова д82</span><br>
<button onclick="addPlacemarks()">Добавить метки</button>
<div id="myMap" style="width: 100%; height: 500px"></div>

@hrutsik · 08.05.2016, 17:01 **[ТС]**

sad67man, спасибо!!! изучаю

@sad67man · 08.05.2016, 17:12

А как у вас выборка div-ов делается, из БД или как? думаю лучше там покопаться, чем этот подход с массивом.

@hrutsik · 08.05.2016, 17:36 **[ТС]**

да из бд , за php еще не бралась думала на js проще сделать

@hrutsik · 14.06.2016, 20:09 **[ТС]**

добрый день, очень нужна помощь: скрипт приведенный выше работает по нажатию кнопки, нужно чтобы он метки добавлялись просто при загрузке страницы сразу.

@BANO · 14.06.2016, 20:55

hrutsik,

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script src="http://api-maps.yandex.ru/2.1.35/?lang=ru_RU&load=package.full&mode=debug" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
    var targetCoords = [53.931122, 27.505776],
          mapMini;
    ymaps.ready(function () {    
        myMap = new ymaps.Map("myMap",{center: targetCoords,zoom: 10});
    });
    var groups=new Object();
       groups["г.Минск пр.Победителей 79"]=[53.931122, 27.505776];
       groups["г Минск ул Сурганова д82"] =[53.931201, 27.581666];
       groups["г Минск ул.Свердлова д32а"] =[53.890341, 27.557825];
 
    $('.adress').each(function(){
        var adress = $(this).text();
        for(var x in groups){
 
        if (adress == x){
            myMap.geoObjects.add(new ymaps.Placemark(groups[x]  ,{hintContent: 'Бэби клаб'}));
        }};
    });
</script>
<span class="adress">г.Минск пр.Победителей 79</span><br>
<span class="adress">г Минск ул Сурганова д82</span><br>
<button onclick="addPlacemarks()">Добавить метки</button>
<div id="myMap" style="width: 100%; height: 500px"></div>

@hrutsik · 14.06.2016, 21:00 **[ТС]**

BANO, что-то воопще не отображает меток...я передаю в groups координаты из бд с пом php, при этом метки должны отразиться на карте..но не выходит((

@sad67man · 14.06.2016, 21:08

hrutsik, В консоле есть ошибки какие-нибудь?

Добавлено через 3 минуты
hrutsik, Если вы формируете координаты в php, то наверное уже перебирать на совпадение для каждого класса .adress не нужно уже?

@hrutsik · 14.06.2016, 21:23 **[ТС]**

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

@sad67man · 14.06.2016, 21:27

hrutsik, Если просто нужно поставить метки на карту, без всяких перебираний, то так..

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var targetCoords = [53.931122, 27.505776],
  myMap,
  myCollection;
ymaps.ready(function() {
  myMap = new ymaps.Map("myMap", {
    center: targetCoords,
    zoom: 10
  });
  // Создаем коллекцию геообъектов.
  myCollection = new ymaps.GeoObjectCollection();
  // Добавляем метки в коллекцию.
  myCollection.add(new ymaps.Placemark([53.931122, 27.505776]));
  myCollection.add(new ymaps.Placemark([53.931201, 27.581666]));
  myCollection.add(new ymaps.Placemark([53.890341, 27.557825]));
  // Добавляем коллекцию на карту.
  myMap.geoObjects.add(myCollection);
  // Устанавливаем карте центр и масштаб так, чтобы охватить коллекцию целиком.
  myMap.setBounds(myCollection.getBounds());
});

@BANO · 14.06.2016, 21:28

sad67man, ну конечно, вот я дебил

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script src="http://api-maps.yandex.ru/2.1.35/?lang=ru_RU&load=package.full&mode=debug" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    var targetCoords = [53.931122, 27.505776],
          mapMini;
    ymaps.ready(function () {    
        myMap = new ymaps.Map("myMap",{center: targetCoords,zoom: 10});
        $('.adress').each(function(){
            var adress = $(this).text();
            for(var x in groups){
     
            if (adress == x){
                myMap.geoObjects.add(new ymaps.Placemark(groups[x]  ,{hintContent: 'Бэби клаб'}));
            }};
        });
    });
    var groups=new Object();
       groups["г.Минск пр.Победителей 79"]=[53.931122, 27.505776];
       groups["г Минск ул Сурганова д82"] =[53.931201, 27.581666];
       groups["г Минск ул.Свердлова д32а"] =[53.890341, 27.557825];
 
    
});
</script>
<span class="adress">г.Минск пр.Победителей 79</span><br>
<span class="adress">г Минск ул Сурганова д82</span><br>
<button onclick="addPlacemarks()">Добавить метки</button>
<div id="myMap" style="width: 100%; height: 500px"></div>

@hrutsik · 14.06.2016, 21:46 **[ТС]**

sad67man, метки будут ставиться не статичные, в зависимости от выбранных объектов.
постойте, я уже в var groups=new Object(); передаю координаты...может с ним также можно сделать?

BANO, вроде сработало

Добавлено через 5 минут
Спасибо Огромное, добрые люди, пробую прикрутить)

Добавлено через 6 минут
И правда class="adress" уже не актуален сорри не поняла что на нем все завязано..,
вопщим просто передаю координаты в var groups=new Object() и потом их нужно вывести на карте как???

@sad67man · 14.06.2016, 21:48

hrutsik, Вообще с коллекциями удобнее работать. Есть ряд преимуществ.

Новые блоги и статьи Все статьи Все блоги /
Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .

@hrutsik 0 / 0 / 0 Регистрация: 08.01.2015 Сообщений: 62
	08.05.2016, 16:09 [ТС]
	sad67man, все равно не ставит метки.. 0

@sad67man 2603 / 1507 / 689 Регистрация: 23.08.2015 Сообщений: 3,815
	08.05.2016, 16:24
	А пишет в консоле какую-нибудь ошибку? 0

@hrutsik 0 / 0 / 0 Регистрация: 08.01.2015 Сообщений: 62
	08.05.2016, 16:33 [ТС]
	нет не пишет, console.log(groups[x]); срабатывает до if... 0

@hrutsik 0 / 0 / 0 Регистрация: 08.01.2015 Сообщений: 62
	08.05.2016, 17:01 [ТС]
	sad67man, спасибо!!! изучаю 0

@sad67man 2603 / 1507 / 689 Регистрация: 23.08.2015 Сообщений: 3,815
	08.05.2016, 17:12
	А как у вас выборка div-ов делается, из БД или как? думаю лучше там покопаться, чем этот подход с массивом. 0

@hrutsik 0 / 0 / 0 Регистрация: 08.01.2015 Сообщений: 62
	08.05.2016, 17:36 [ТС]
	да из бд , за php еще не бралась думала на js проще сделать 0

@hrutsik 0 / 0 / 0 Регистрация: 08.01.2015 Сообщений: 62
	14.06.2016, 20:09 [ТС]
	добрый день, очень нужна помощь: скрипт приведенный выше работает по нажатию кнопки, нужно чтобы он метки добавлялись просто при загрузке страницы сразу. 0

@hrutsik 0 / 0 / 0 Регистрация: 08.01.2015 Сообщений: 62
	14.06.2016, 21:00 [ТС]
	BANO, что-то воопще не отображает меток...я передаю в groups координаты из бд с пом php, при этом метки должны отразиться на карте..но не выходит(( 0

@sad67man 2603 / 1507 / 689 Регистрация: 23.08.2015 Сообщений: 3,815
	14.06.2016, 21:08
	hrutsik, В консоле есть ошибки какие-нибудь? Добавлено через 3 минуты hrutsik, Если вы формируете координаты в php, то наверное уже перебирать на совпадение для каждого класса .adress не нужно уже? 0

@hrutsik 0 / 0 / 0 Регистрация: 08.01.2015 Сообщений: 62
	14.06.2016, 21:23 [ТС]
	в консоли чисто, да проверять по идее уже не надо, но как их вывести если метка не одна? 0

@hrutsik 0 / 0 / 0 Регистрация: 08.01.2015 Сообщений: 62
	14.06.2016, 21:46 [ТС]
	sad67man, метки будут ставиться не статичные, в зависимости от выбранных объектов. постойте, я уже в var groups=new Object(); передаю координаты...может с ним также можно сделать? BANO, вроде сработало Добавлено через 5 минут Спасибо Огромное, добрые люди, пробую прикрутить) Добавлено через 6 минут И правда class="adress" уже не актуален сорри не поняла что на нем все завязано.., вопщим просто передаю координаты в var groups=new Object() и потом их нужно вывести на карте как??? 0

@sad67man 2603 / 1507 / 689 Регистрация: 23.08.2015 Сообщений: 3,815
	14.06.2016, 21:48
	hrutsik, Вообще с коллекциями удобнее работать. Есть ряд преимуществ. 0

Отображение объектов на Yandex карте

Решение