Клуб API Карт

Как добавить несколько меток?

Пост в архиве.
ravon
31 августа 2011, 18:54

Здравствуйте, мы хотим отобразить на карте несколько меток. Одну показали с балуном, всё работает, но из-за нехватки знаний по java script, мы не знаем, как добавить вторую метку. Подскажите, пожалуйста.

Страница с картой

 


Код вывода карты:

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

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


   // Создания стиля для балуна
            var style = new YMaps.Style(
            style.balloonStyle = {template: new YMaps.LayoutTemplate(SampleBalloonLayout)};

            // Создание метки с созданным стилем и добавление ее на карту
           
           
            var placemark = new YMaps.Placemark(new YMaps.GeoPoint(92.922892,55.996112),{style: style}
            placemark.description = "<strong> Адрес зала:<br></strong> Вавилова, 19а <br><a target=\"blank\"href=\"http://iko24.ru/photo/zal_na_vavilova_19/2\">Фотографии зала</a>";
            map.addOverlay(placemark);
        }

        // Макет для балуна, реализующий интерфейс YMaps.IBalloonLayout
        function SampleBalloonLayout() {
            this.element = YMaps.jQuery(
                "<div class=\"b-simple-balloon-layout\">\
                    <div class=\"content\"></div>\
                    <div class=\"close\"></div>\
                    <div class=\"tail\"></div></div>");

            this.close = this.element.find(".close");
            this.content = this.element.find(".content");

            // Отключает кнопку закрытия балуна
            this.disableClose = function(){
                this.close.unbind("click").css("display", "none");
            };

            // Включает кнопку закрытия балуна
            this.enableClose = function(callback){
                this.close.bind("click", callback).css("display", "");
                return false;
            };

            // Добавляет макет на страницу
            this.onAddToParent = function (parentNode) {
                YMaps.jQuery(parentNode).append(this.element);
                this.update(
            };

            // Удаляет макет со страницы
            this.onRemoveFromParent = function () {
                this.element.remove(
            };

            // Устанавливает содержимое
            this.setContent = function (content) {
                content.onAddToParent(this.content[0]
            };

            // Обработка обновления
            this.update = function () {
                this.element.css("margin-top", this.getOffset().getY()
            };

            // Возвращает сдвиг макета балуна относительно его точки позиционирования
            this.getOffset = function () {
                return new YMaps.Point(0, -this.content.height() - 45);
            };

            // Устанавливает максимально допустимый размер содержимого балуна
            this.setMaxSize = function (maxWidth, maxHeight) {};
        };
    </script>

    <style type="text/css">
        /* Внешний вид балуна (начало)*/

            .b-simple-balloon-layout {
                position: relative;

                width: 150px;
                padding: 10px;
                margin-left: -10px;
               
                border: 1px solid #848877;
                background: #3d3d3d;
            }

        /* Внешний вид балуна (конец)*/



        /* Кнопка закрытия балуна (начало)*/

            .b-simple-balloon-layout .close {
                position: absolute;
                right: 0;
                top: 0;

                width: 13px;
                height: 13px;
                margin-right: 5px;
                margin-top: 5px;
               
                background: url("http://api-maps.yandex.ru/i/0.3/balloon/close.gif") no-repeat;
                cursor: pointer;
            }

        /* "Кнопка закрытия балуна (конец)*/
    </style>
 

 


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

Все повторить еще раз

Создаете новую точку например   
placemark2
 и добляете ее на карту

  map.addOverlay(placemark2);

А с какого места кода всё повторить? мы вставляли после


            var placemark = new YMaps.Placemark(new YMaps.GeoPoint(92.922892,55.996112),{style: style}
            placemark.description = " Адрес зала:
Вавилова, 19а
http://iko24.ru/photo/zal_na_vavilova_19/2\">Фотографии зала";
            map.addOverlay(placemark);
        }

 

Но карта вообще не грузилась.

надо вставлять до последней фигурной скобки

сразу после map.addOverlay(placemark);

 

Спасибо за подсказку, вот так?


var placemark = new YMaps.Placemark(new YMaps.GeoPoint(92.922892,55.996112),{style: style});

  placemark.description = " Адрес зала:
Вавилова, 19а
http://iko24.ru/photo/zal_na_vavilova_19/2\">Фотографии зала";map.addOverlay(placemark);

 

  var placemark = new YMaps.Placemark(new YMaps.GeoPoint(94.922892,55.996112),{style: style});

  placemark.description = " Адрес зала:
Вавилова, 19а
http://iko24.ru/photo/zal_na_vavilova_19/2\">Фотографии зала";map.addOverlay(placemark2);

  });


Но всё равно не работает, на карте видна только одна метка. Поправьте меня, пожалуйста.


Ну Вам уже написал Stas, вторую метку (переменную) надо назвать placemark2

иначе вы просто переопределили первую

var placemark2 = ...

placemark2.description = ...

Получилось, большое спасибо!