Меню по нескольким меткам


Первое что надо сделать - это добавить скипт с ключем, а потом добавить следующий скрипт

Код HTML
<script type="text/javascript">
    // Создаем карту и станции
    var map,
            stations = [{point: new YMaps.GeoPoint(37.579762, 55.775981), name:"Белорусский вокзал"},
                                    {point: new YMaps.GeoPoint(37.658032, 55.773732), name:"Казанский вокзал"},
                                    {point: new YMaps.GeoPoint(37.565632, 55.742767), name:"Киевский вокзал"},
                                    {point: new YMaps.GeoPoint(37.662722, 55.755327), name:"Курский вокзал"},
                                    {point: new YMaps.GeoPoint(37.653658, 55.778598), name:"Ленинградский вокзал"},
                                    {point: new YMaps.GeoPoint(37.640426, 55.728515), name:"Павелецкий вокзал"},
                                    {point: new YMaps.GeoPoint(37.632116, 55.793227), name:"Рижский вокзал"},
                                    {point: new YMaps.GeoPoint(37.588557,55.796101), name:"Савеловский вокзал"},
                                    {point: new YMaps.GeoPoint(37.656083, 55.778644), name:"Ярославский вокзал"}];

    // Создание обработчика для события window.onLoad
    YMaps.jQuery(function (){
        // Создание экземпляра карты и его привязка к созданному контейнеру
        var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);

        // Установка для карты ее центра и масштаба
        map.setCenter(new YMaps.GeoPoint(37.62, 55.763),15);

        // Добавление элементов управления
        var typeControl = new YMaps.TypeControl([YMaps.MapType.MAP, YMaps.MapType.SATELLITE, YMaps.MapType.HYBRID], [0,1,2]);
        map.addControl(typeControl)
        map.enableScrollZoom();
        map.addControl(new YMaps.SmallZoom());

        // Добавление оверлеев на карту
        for (var i = 0; i < stations.length; i++){
            map.addOverlay(createOverlay(stations[i])) // Добавление происходит через функцию createOverlay, которая написана ниже
        }
    });

    // Функция createOverlay для создания оверлея и ссылки на него
    function createOverlay (station){
        var link = YMaps.jQuery("<a href=\"#\">" + station.name + "</a>"), // Создание ссылки
        newOverlay = new SimpleOverlay(station.point, station.name, link); // Создание оверлея

        // Установка обработчика кликов по ссылке
        link
        .bind("click", function (){
            if (link.hasClass("active")) return;
            newOverlay.openBalloon();
            return false;
        })
        .appendTo(YMaps.jQuery("#links"))
        
        return newOverlay;
    }

    // Класс пользовательского оверлея, реализующего класс YMaps.IOverlay
    function SimpleOverlay (geoPoint, name, link){
        var map, _this = this, offset = new YMaps.Point(-10, -29);

        // Вызывается при добавления оверлея на карту
        this.onAddToMap = function (pMap, parentContainer){
            map = pMap;
            getElement().appendTo(parentContainer);
            this.onMapUpdate();
        };

        // Вызывается при удаление оверлея с карты
        this.onRemoveFromMap = function (){
            if (getElement().parent(){
                getElement().remove();
            }
        };

        // Вызывается при обновлении карты
        this.onMapUpdate = function (){
            
            // Смена позиции оверлея
            var position = map.converter.coordinatesToMapPixels(geoPoint).moveBy(offset);
            getElement().css({
                left : position.x,
                top :  position.y
            })
        };

        // Метод для открытия балуна
        this.openBalloon = function (){
            // Делаем ссылку, связанную с оверлеем, активной
            link.addClass("active"); // Приписываем этой ссылке class="active"

            // Скрываем оверлей
            getElement().css("display", "none");

            // Открываем балун и по закрытию балуна возвраем в первоначальный вид метки
            map.openBalloon(geoPoint, name, {onClose: function(){
                link.removeClass("active");
                getElement().css("display", "");
            }});
        };

        // Получить ссылку на DOM-ноду оверлея
        function getElement(){
            var element = YMaps.jQuery("<div class=\"overlay\"/>");

            // Устанавливаем z-index как у метки
            element.css("z-index", YMaps.ZIndex.Overlay);

            // При щелчке на оверлеи открывается балун
            element.bind("click", function(){
                _this.openBalloon();
            });

            // После первого вызова метода, он переопределяется,
            // чтобы дважды не создавать DOM-ноду
            return (getElement = function () {return element})();
        }
    }
</script>

Теперь пропишем стили для оверлея и для меню по объектам

Код HTML
<style>
    /* Внешний вид оверлея (начало) */
    .overlay {
        position: absolute;
        z-index: 1;
        width: 18px;
        height: 29px;
        background: url(http://api.yandex.ru/images/maps/ymapsml/examples/icon_station.png);
        cursor:pointer;
    }
    /* Внешний вид оверлея (конец) */

    /* Ссылки на оверлеи (начало) */
    #info {
    height:100px;
    width:660px;
    }
    #info a{ /*Вид ссылки на объект*/
        text-align:center;
        display:block;
        margin:5px;
        padding:10px;
        float:left;
        color:#000;
        background:#ffc;
    }
        #info a:hover{/*Вид ссылки на объект при наведении*/
        background:#000;
        color:#ffc;
    }
        #info a.active{/*Вид ссылки на объект, на который кликнули*/
        background:#000;
        color:#ffc;
    }
    /* Ссылки на оверлеи (начало) */
</style>

А сейчас добавляем два блока. Первый блок для самой карты, а второй блок для меню по объектам.

Код HTML
<div id="info">
    <div id="links">
        <h3>Вокзалы Москвы</h3>    
    </div>
</div>
<div id="YMapsID" style="width:660px;height:400px"></div>

Пример использования



Источник
Вверх