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

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

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

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

HTML5

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

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

Javascript

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

$(".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

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

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

<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

<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

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

<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, Вообще с коллекциями удобнее работать. Есть ряд преимуществ.

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

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

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

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

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

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

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

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

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

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

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

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

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

Решение