Клуб API Карт

несколько ломаных на одной карте

yoyoyda
23 сентября 2010, 16:11

С помощью API и вредных полезных советов клуба получился код

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

 <script type="text/javascript">
YMaps.jQuery(function () {
 
            var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);

        map.setCenter(new YMaps.GeoPoint(37.628449,55.761036), 10, YMaps.MapType.MAP);
        map.addControl(new YMaps.Zoom());
        map.addControl(new YMaps.ToolBar());
        map.addControl(new YMaps.TypeControl());

        var a = new YMaps.Style();
        a.lineStyle = new YMaps.LineStyle();
        a.lineStyle.strokeColor = "fff";
        a.lineStyle.strokeWidth = 5;
        YMaps.Styles.add("line", a);

        var b = new YMaps.Style();
            b.iconStyle = new YMaps.IconStyle();
            b.iconStyle.href = "/point.png";
            b.iconStyle.size = new YMaps.Point(28, 27);
            YMaps.Styles.add("point", b); 

        var c = new YMaps.Style(n);
            c.balloonContentStyle = new YMaps.BalloonContentStyle(new YMaps.Template(
            "<b>$[name|объект]</b>\
            <div>$[description]</div>\"
             ));
            YMaps.Styles.add("point2", c);  

var
marshrut = new YMaps.Polyline([new
YMaps.GeoPoint(37.627076,55.757939)....new
YMaps.GeoPoint(37.621583,55.763359)], { style: "line", clickable: 0 });

var placemark1 = new YMaps.Placemark(new YMaps.GeoPoint(37.627076,55.757939), { style: "point2"});
            placemark1.name = "Точка 1";
            placemark.description = "Взять фотоаппарат";

var placemark2 = new YMaps.Placemark(new YMaps.GeoPoint(37.621583,55.763359), { style: "point2"})
            placemark2.name = "Точка 2";
            placemark2.description = "Сделать хорошие кадры";
var Group1 = new YMaps.GeoObjectCollection();
 Group1add(marshrut);
 Group1.add([(placemark1), (placemark2)]);

            YMaps.jQuery("#Toshka1")
                .bind("click", function () {
                    var link = YMaps.jQuery(this);
                    if (link.hasClass("active")) {
                        map.removeOverlay(Group1);
                    } else {
                        map.addOverlay(Group1);
                    }
                    link.toggleClass("active");

                    return false;
                })
           
                });


            window.onload = function () {
            var marshrutmapContainer = document.getElementById("Poleznoe1"),
            document.getElementById("Point1").onclick = function () {
            marshrutContainer.style.display = (marshrutContainer.style.display == "") ? "none" : "";
 };
}  
</script> 
<a class="title" href="#" onclick="showMarshrut();return false;" id="Toshka1">Показать весь путь</a>
<div id="YMapsID" style="width: 600px; height: 400px;">&nbsp;</div>
<a
title="описание точки 1"  id="Point1" href="#">Точка 1</a>
<a title="описание точки 2" id="Point2" href="#">Точка 2</a>
<div
id="Poleznoe1" style="width: 200px; display: none;"></div>
<div id="Poleznoe2" style="width: 200px; display:
none;"></div>
С этим кодом показывается один маршрут  с метаками какими надо, также открывается только один скрытый див

Что еще хотелось

1) Добавить на карту еще несколько маршрутов

2) Сделать возможность открывать из балуна скрытый див

3) Не знаю как сделать, чтобы открывались несколько скрытых дивов

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

Буду благодарен за помощь

5 комментариев
Подписаться на комментарии к посту
я как раз с этого примера пытался начать, но он даже простым капипастом не хочет работать, карта не загружается в CMS :-)
Попробуйте поискать ответ тут:
http://clubs.ya.ru/mapsapi/replies.xml?item_no=10235#cms
Ошибка была всего лишь при копипасте id=menu пропадало. Чтобы лишний раз не постить - небольшой баг в этом примере, ссылка битая

http://api.yandex.ru/maps/articles/tasks/overlays.xml#how-to-control-groups-from-menu этот пример взял за основу (код который выше), у меня возникла сложность в том, что, насколько я понимаю, в примере вывод ссылок идет в одном контейнере, а как правильно сделать так, чтобы ссылки можно вставлять в разных контейнерах (с разными id, классами и тп.), я не смог разобраться :-)
Ссылку на пример мы поправим, спасибо.
Создать ссылку на ломаную можно по аналогии с ссылкой на метку.