Яндекс API - Метки на карте

Тема в разделе "JavaScript", создана пользователем FUTURiTY, 21 ноя 2014.

Модераторы: ZiX
  1. FUTURiTY

    FUTURiTY Прохожие

    Добрый день!

    На странице сайта выводится несколько карт со своими координатами,
    ниже конструкция скрипта который находится в хайдере сайта:

    <script type="text/javascript">
    ymaps.ready(init);
    function init () {
    var myMap_1 = new ymaps.Map('map_1', {
    center: [xx.yy, xx.yy],
    zoom: 16
    }),
    myMap_2 = new ymaps.Map('map_2', {
    center: [xx.yy, xx.yy],
    zoom: 16
    });
    myMap_3 = new ymaps.Map('map_3', {
    center: [xx.yy, xx.yy],
    zoom: 16
    });
    myMap_4 = new ymaps.Map('map_4', {
    center: [xx.yy, xx.yy],
    zoom: 16
    });
    }
    </script>

    подскажите как мне поставить метки на конкретные объекты карты?

    https://tech.yandex.ru/maps/doc/jsapi/1.x/dg/tasks/how-to-add-placemark-docpage/
    кокой метод нужно применить из этой документации?
     
  2. BaBL

    BaBL

    Регистр.:
    13 ноя 2012
    Сообщения:
    166
    Симпатии:
    106
    Создавай placemark как обычно, а потом:

    Код:
    myMap_2.addOverlay(placemark);
    закидывай его в нужный тебе MAP объект.

    Только учти, что объект myMap_2 у тебя существует только в рамках функции init() и из другой ты его не вызовешь. Для этого var myMap_2 надо вынести за пределы функции и инициализировать переменную, к примеру, NULL'ом.
     
    FUTURiTY нравится это.
  3. FUTURiTY

    FUTURiTY Прохожие

    Спасибо.
    Не совсем понял, можно конкретно в коде это указать?
    Спасибо.
     
  4. BaBL

    BaBL

    Регистр.:
    13 ноя 2012
    Сообщения:
    166
    Симпатии:
    106
    Код:
    ymaps.ready(init);
    function init () {
      var myMap_1 = new ymaps.Map('map_1', {
       center: [xx.yy, xx.yy],
       zoom: 16
      }),
      myMap_2 = new ymaps.Map('map_2', {
        center: [xx.yy, xx.yy],
        zoom: 16
      });
    }
    
    function second() {
      // myMap_1 и myMap_2 работать не будут.
    }
    
    Код:
    ymaps.ready(init);
    var myMap_1 = null;
    var myMap_2 = null;
    
    function init () {
     myMap_1 = new ymaps.Map('map_1', {
       center: [xx.yy, xx.yy],
       zoom: 16
      });
      myMap_2 = new ymaps.Map('map_2', {
        center: [xx.yy, xx.yy],
        zoom: 16
      });
    }
    
    function second() {
      //myMap_1 и myMap_2 можно использовать.
      var placemark = new YMaps.Placemark(new YMaps.GeoPoint(37.609218,55.753559));
      placemark.name = "Москва";
      placemark.description = "Столица Российской Федерации";
    
      myMap_2.addOverlay(placemark);
    }
    
     
    FUTURiTY нравится это.
  5. FUTURiTY

    FUTURiTY Прохожие

    Не работает. :conf:
    Какие ещё варианты?
     
  6. TrueBit

    TrueBit Создатель

    Регистр.:
    23 ноя 2014
    Сообщения:
    47
    Симпатии:
    19
    Метка может быть создана двумя способами: с помощью класса GeoObject с указанным типом геометрии "точка" либо с помощью вспомогательного класса Placemark.

    При создании метки нужно указать координаты соответствущей точки. Также метке можно задать её свойства (например, текст значка) и опции (например, изображение значка).

    Метки можно объединять в коллекции, а также кластеры

     
    FUTURiTY нравится это.
  7. BaBL

    BaBL

    Регистр.:
    13 ноя 2012
    Сообщения:
    166
    Симпатии:
    106
    Все работает, у вас код баллуна был просто первой версии API, я не обратил внимания и скопировал:

    http://jsfiddle.net/ou399ko4/

    с отдельный Плейсмарком
    http://jsfiddle.net/ou399ko4/1/
     
    FUTURiTY нравится это.
  8. FUTURiTY

    FUTURiTY Прохожие

    Спасибо, всем за ответы.
    Решил сделать другой конструкцией с помощью конструктора карт:
    https://tech.yandex.ru/maps/tools/constructor/

    Вообще это неразбериха с Яндекс картами напрягает, одну и туже карту с метками можно сделать разными способами и по сути это не очень хорошо.

    TrueBit, это из инструкции по яндекс взято или это ваш личный опыт?
    не совсем понятно, везде по разному пишут и где правильно не понятно.
     
  9. Виталик78

    Виталик78 Создатель

    Регистр.:
    8 апр 2016
    Сообщения:
    49
    Симпатии:
    0
    Здравствуйте. Не получаеться задать ширину самого болуна. Балун отображаеться при открытии , тоесть зафексированный. Будте добры, подскажите. Как прописать ширину самого окошка балуна ?

    Код:
    var myMap;
    ymaps.ready(function () {
        myMap = new ymaps.Map('map', {
            zoom: 15,
            center: [53.21402707119357,50.22476249999997],
            controls: []
        }, {
            searchControlProvider: 'yandex#search'
        });
        var myPlacemark = new ymaps.Placemark([53.21402707119357,50.22476249999997], {
            balloonContentHeader: '<img  width = "150" height ="100" src="/imag.png" alt="" /> Компания » ',
                        balloonContentBody: ' Россия, Самара, ул. 22 Партсъезда, 16,<br>строение 10, 1 этаж, оф.№ 4',
                        balloonContentFooter: '+7 (927)000 00-69'
        }, {
            balloonPanelMaxMapArea: 0,
           
        });
        myMap.geoObjects.add(myPlacemark);
       
        observeEvents(myMap);
       
        myPlacemark.balloon.open();
    });
    function observeEvents (map) {
        var mapEventsGroup;
        map.geoObjects.each(function (geoObject) {
            geoObject.balloon.events
                // При открытии балуна начинаем слушать изменение центра карты.
                .add('open', function (e1) {
                    var placemark = e1.get('target');
                    // Вызываем функцию в двух случаях:
                    mapEventsGroup = map.events.group()
                        // 1) в начале движения (если балун во внешнем контейнере);
                        .add('actiontick', function (e2) {
                            if (placemark.options.get('balloonPane') == 'outerBalloon') {
                                setBalloonPane(map, placemark, e2.get('tick'));
                            }
                        })
                        // 2) в конце движения (если балун во внутреннем контейнере).
                        .add('actiontickcomplete', function (e2) {
                            if (placemark.options.get('balloonPane') != 'outerBalloon') {
                                setBalloonPane(map, placemark, e2.get('tick'));
                            }
                        });
                    // Вызываем функцию сразу после открытия.
                    setBalloonPane(map, placemark);
                })
                // При закрытии балуна удаляем слушатели.
                .add('close', function () {
                    mapEventsGroup.removeAll();
                });
        });
    }
    function setBalloonPane (map, placemark, mapData) {
        mapData = mapData || {
            globalPixelCenter: map.getGlobalPixelCenter(),
            zoom: map.getZoom()
        };
        var mapSize = map.container.getSize(),
            mapBounds = [
                [mapData.globalPixelCenter[0] - mapSize[0] / 2, mapData.globalPixelCenter[1] - mapSize[1] / 2],
                [mapData.globalPixelCenter[0] + mapSize[0] / 2, mapData.globalPixelCenter[1] + mapSize[1] / 2]
            ],
            balloonPosition = placemark.balloon.getPosition(),
        // Используется при изменении зума.
            zoomFactor = Math.pow(2, mapData.zoom - map.getZoom()),
        // Определяем, попадает ли точка привязки балуна в видимую область карты.
            pointInBounds = ymaps.util.pixelBounds.containsPoint(mapBounds, [
                balloonPosition[0] * zoomFactor,
                balloonPosition[1] * zoomFactor
            ]),
            isInOutersPane = placemark.options.get('balloonPane') == 'outerBalloon';
        // Если точка привязки не попадает в видимую область карты, переносим балун во внутренний контейнер
        if (!pointInBounds && isInOutersPane) {
            placemark.options.set({
                balloonPane: 'balloon',
                balloonShadowPane: 'shadows'
            });
            // и наоборот.
        } else if (pointInBounds && !isInOutersPane) {
            placemark.options.set({
                balloonPane: 'outerBalloon',
                balloonShadowPane: 'outerBalloon'
               
            });
        }
    }