Клуб API Карт

Решаем задачку

Пост в архиве.

Всем привет! Я буквально вчера узнал о том, что простым смертным запрещено добавлять множество объектов на обычные карты, и решая эту задачку я наткнулся на Апи Яндекса. Штука конечно функциональная, но чайникам вроде меня установить и привести в порядок это сложновато, а должно быть как известно все предельно просто.

Я делаю вот такой вот ресурс - Зем.ли, это каталог коттеджных поселков Подмосковья. Соответственно Яндекс API Maps здесь будет очень к месту.
Я на 100% чайник в программировании и действую методом тыка. Итак на сегодняшний день есть следующее - система фильтров, которая привязана к проектам (поселкам), соответственно в идеале хочется, чтобы было меню, привязанное к проектам и объектам на карте. Только тогда портал будет действительно удобен в использовании. 

Я читал соответствующую шпаргалку от Яндекса по теме создания групп объектов и меню, тыкал так, тыкал сяк, ничего у меня честно не получилось. Если здесь есть добрые люди, которые кое что смыслят в этом, прошу отзовитесь

 

 

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

<!-- Logo -->
<div class="header_img"><href="" onfocus="this.blur()"><img src="http://rookery9.aviary.com.s3.amazonaws.com/11346500/11346981_02ea.pngheight="32" width="368"></a></div>


<!-- TAG MENU -->
<div class="nav_container horizontal"><div class="link_link" id="menu_2391653"><href="http://zem.li/#2391353/-target="" name="zemlia" id="p2391653">Карта поселков</a></div>
    <div class="link_link" id="menu_2383326"><href="http://zem.li/filter/Saletarget="" name="zemlia" id="p2383326">Акции и скидки</a></div>
    <div class="link_link" id="menu_2376286"><href="http://zem.li/filter/Коттеджиtarget="" name="zemlia" id="p2376286">Коттеджи на продажу</a></div>
    <div class="link_link" id="menu_2375807"><href="http://zem.li/filter/Viptarget="" name="zemlia" id="p2375807">VIP поселки</a></div>
    <div class="link_link" id="menu_2375822"><href="http://zem.li/filter/Премиумtarget="" name="zemlia" id="p2375822">Премиум поселки</a></div>
    <div class="link_link" id="menu_2375814"><href="http://zem.li/filter/Экономtarget="" name="zemlia" id="p2375814">Эконом поселки</a></div>
    <div class="link_link" id="menu_2375838"><href="http://zem.li/filter/До-40-кмtarget="" name="zemlia" id="p2375838">До 40 км от МКАД</a></div>
    <div class="link_link" id="menu_2375860"><href="http://zem.li/filter/До-80-кмtarget="" name="zemlia" id="p2375860">До 80 км от МКАД</a></div>
    <div class="link_link" id="menu_2375869"><href="http://zem.li/filter/До-120-кмtarget="" name="zemlia" id="p2375869">До 120 км от МКАД</a></div>
    <div class="link_link" id="menu_2375782"><href="http://zem.li/filter/Боровское-ш." target="" name="zemlia" id="p2375782">Боровское шоссе</a></div>
    <div class="link_link" id="menu_2375781"><href="http://zem.li/filter/Варшавское-ш." target="" name="zemlia" id="p2375781">Варшавское шоссе</a></div>
    <div class="link_link" id="menu_2375744"><href="http://zem.li/filter/Волоколамское-ш." target="" name="zemlia" id="p2375744">Волоколамское шоссе</a></div>
    <div class="link_link" id="menu_2375710"><href="http://zem.li/filter/Горьковское-ш." target="" name="zemlia" id="p2375710">Горьковское шоссе</a></div>
    <div class="link_link" id="menu_2375722"><href="http://zem.li/filter/Дмитровское-ш." target="" name="zemlia" id="p2375722">Дмитровское шоссе</a></div>
    <div class="link_link" id="menu_2375937"><href="http://zem.li/filter/Егорьевское-ш." target="" name="zemlia" id="p2375937">Егорьевское шоссе</a></div>
    <div class="link_link" id="menu_2110490"><href="http://www.zem.li/filter/Калужское-ш." target="" name="zemlia" id="p2110490">Калужское ш.</a></div>
    <div class="link_link" id="menu_2375704"><href="http://zem.li/filter/Каширское-ш." target="" name="zemlia" id="p2375704">Каширское шоссе</a></div>
    <div class="link_link" id="menu_2110242"><href="http://www.zem.li/filter/Киевское ш." target="" name="zemlia" id="p2110242">Киевское ш.</a></div>
    <div class="link_link" id="menu_2375729"><href="http://zem.li/filter/Ленинградское-ш." target="" name="zemlia" id="p2375729">Ленинградское шоссе</a></div>
    <div class="link_link" id="menu_2375776"><href="http://zem.li/filter/Минское-ш." target="" name="zemlia" id="p2375776">Минское шоссе</a></div>
    <div class="link_link" id="menu_2375763"><href="http://zem.li/filter/Можайское-ш." target="" name="zemlia" id="p2375763">Можайское шоссе</a></div>
    <div class="link_link" id="menu_2375695"><href="http://zem.li/filter/Новорижское-ш." target="" name="zemlia" id="p2375695">Новорижское шоссе</a></div>
    <div class="link_link" id="menu_2110224"><href="http://www.zem.li/filter/Новорязанское-ш." target="" name="zemlia" id="p2110224">Новорязанское ш.</a></div>
    <div class="link_link" id="menu_2375941"><href="http://zem.li/filter/Носовихинское-ш." target="" name="zemlia" id="p2375941">Носовихинское шоссе</a></div>
    <div class="link_link" id="menu_2375738"><href="http://zem.li/filter/Пятницкое-ш." target="" name="zemlia" id="p2375738">Пятницкое ш.</a></div>
    <div class="link_link" id="menu_2375750"><href="http://zem.li/filter/Рублево-Успенское-ш." target="" name="zemlia" id="p2375750">Рублево-Успенское...</a></div>
    <div class="link_link" id="menu_2110184"><href="http://zem.li/filter/Симферопольское-ш." target="" name="zemlia" id="p2110184">Симферопольское ш.</a></div>
    <div class="link_link" id="menu_2110515"><href="http://www.zem.li/filter/Щелковское-ш." target="" name="zemlia" id="p2110515">Щелковское ш.</a></div>
    <div class="link_link" id="menu_2375711"><href="http://zem.li/filter/Ярославское-ш." target="" name="zemlia" id="p2375711">Ярославское шоссе</a></div></div>
<!-- TAG MENU КОНЕЦ --> 

<!-- ЯНДЕКС API MAPS -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Простой вызов карты.</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://api-maps.yandex.ru/1.1/index.xml?key=AHZr3U4BAAAA2PAADQIArG-eV1en1w0CBsn0qKzhQXMdD84AAAAAAAAAAAAg2uN7-0NTSZEVRJQ0yXP7cJlz8A==type="text/javascript"></script>
    <script type="text/javascript">
  
        
        
        // Создает обработчик события window.onLoad
        YMaps.jQuery(function ({
            // Создает экземпляр карты и привязывает его к созданному контейнеру
            var map new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
    
            
            
            
             // Создает метку Сатино Татарское
var placemark new YMaps.Placemark(new YMaps.GeoPoint(37.395541,55.345617){style:"default#houseIcon"});
            // Устанавливает содержимое балуна
            map.addOverlay(placemark);
            placemark.setBalloonContent('<div style="font-weight:normal;padding-bottom:5px;color:#000; text-align: left;"><b>Черничные поля</b><br/> 20 км от МКАД по Боровскому ш., земельные участки без подряда,<br/>все городские коммуникации. От 300 тыс. руб. за сотку.&nbsp;<a href="http://zem.li/#2405165/-">Подробнее...</a></div>');


            // Создает метку  Стольный
var placemark new YMaps.Placemark(new YMaps.GeoPoint(37.231647,55.375931){style:"default#houseIcon"});
            // Устанавливает содержимое балуна
            map.addOverlay(placemark);
            placemark.setBalloonContent('<div style="font-weight:normal;padding-bottom:5px;color:#000; text-align: left;"><b>Стольный</b><br/> 30 км от МКАД по Боровскому ш., земельные участки без подряда,<br/>все городские коммуникации. От 300 тыс. руб. за сотку.&nbsp;<a href="http://zem.li/#2237037/">Подробнее...</a></div>');
           
           
            
            // Создает элементы управления
            map.addControl(new YMaps.TypeControl());
map.addControl(new YMaps.ToolBar());
map.addControl(new YMaps.Zoom());
map.addControl(new YMaps.ScaleLine());
                                               
            // Устанавливает начальные параметры отображения карты: центр карты и коэффициент масштабирования
            map.setCenter(new YMaps.GeoPoint(37.6455.76)8);
        })
    </script>
</head>

    <!-- THIS DIV CODE SHOWS YANDEX MAPS API AT THE TOP OF MY WEBSITE, HOW CAN I PUT IT IN A PAGE?????? -->
<body>
    <br/><br/>
    <div id="YMapsID" class="" style="width:1140px;height:500px"></div>
</body>

</html>





5 комментариев

Вам надо связать объекты на карте с их представлением в DOM-дереве.

Это можно решить по-разному.

Например, можно сделать чтобы все данные приходили ввиде javascript-массива объектов, типа:

[

    { id : "2375729", name : "Пятницкое шоссе", lonlat : "37.231647,55.375931", style : "default#houseIcon"},

    { id : "2375729", name : "Горьковское шоссе", lonlat : "37.231647,55.375931", style : "default#otherIcon"},

...

]

а из него уже формировать DOM-структуру (ссылки в меню) и метки для АПИ.

Таким образом Вы сможете сделать так, чтобы при клике на каждый пункт меню

открывался балун у соответсвующей метки

чую фрилансеры ждут моих денежек :)

В любом случае спасибо!

я совсем не в теме, но как я понял сделать это все можно. 

Это трудоемкая работа? Сколько это может стоить навскидку.

Заранее спасибо.

не понял что вам нужно

консультация или сделать

пишите varz62@gmail.com обсудим

указывайте icq

 

В вашем случае оптимальным вариантом будет подгружать различные ymapsml файлы для различных пунктов меню.

У вас ведь за "До 80 км от МКАД" может быть ОЧЕНЬ много обьектов. К томуже пересекаться с фильтрами по направлениям.

Создать файлы описания(YML) этих обьектов - то что прийдется сделать в любом случае.

Посмотрите примеры к АПИ, там, в принципе, есть варианты которые вам подойдут для начала.