Клуб API Карт

Как проверить наличие метки на карте

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

Суть задачи.

1. По клику проверить наличие метки.

2. Если метки нет, ко клику добавить ее,и навесить обработчик события myPlacemark.events.add("dragend", function (e) {           
            coords = myPlacemark.geometry.getCoordinates(); ...

3. Если метка есть, просто переместить на новое место...

Добавляем метку по стандартному примеру:

            myPlacemark = new ymaps.Placemark([55.76, 37.64], { content: 'Москва!', balloonContent: 'Столица России'},
            {/* Опции метки: - флаг перетаскивания метки */draggable: true,
            /* - показывать значок метки при открытии балуна */hideIconOnBalloonOpen: true});        

myMap.geoObjects.add(myPlacemark); //а можно и myMap.geoObjects.add(myPlacemark, 'myPlace');

 

 

 myMap.events.add('click', function (e) {
            coords = e.get('coordPosition'); //определим позицию клика ...

......

 

myPlacemark.getOverlay().getData().geometry.setCoordinates(coords);// перемещаем объект на новое место

savecoordinats(); //сохраняем координаты (пользовательская функция) для записи в БД.

});

Вопрос: а как проверить наличие метки?

Я больше пишу на PHP, но приходится разбираться с JS, поэтому и вопросы, наверное простые...

 

Как подвесить событие на вновь созданную метку. Пример события ниже

myPlacemark.events.add("dragend", function (e) {           
            coords = myPlacemark.geometry.getCoordinates();

=============================

через пару часов...

вот так работает как надо, тем более, что данные формы (немного измененной) пойдут в БД... но все же, как отследить наличие объекта используя api, а не через одно место...:-)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Размещение интерактивной карты на странице</title>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
    <script src="http://api-maps.yandex.ru/2.0-stable/?load=package.standard&lang=ru-RU" type="text/javascript"></script>
    <script src="http://yandex.st/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var myMap, myPlacemark, coords, geoObject;
        ymaps.ready(init);

        function init(){
            myMap = new ymaps.Map ("map", {
                center: [55.76, 37.64],
                zoom: 8
            });
            var SearchControl = new ymaps.control.SearchControl({noPlacemark:true});

            // В метод add можно передаем строковый идентификатор элемента управления и его параметры.
            myMap.controls
                .add(SearchControl)
                // Кнопка изменения масштаба
                .add('zoomControl')
                // Список типов карты
                .add('typeSelector')
                // Кнопка изменения масштаба - компактный вариант
                // Расположим её справа
                .add('smallZoomControl', { right: 5, top: 75 })
                // Стандартный набор кнопок
                .add('mapTools')
            // Также в метод add можно передать экземпляр класса, реализующего определенный элемент управления, - линейка масштаба ('scaleLine')
                .add(new ymaps.control.ScaleLine())
                // В конструкторе элемента управления можно задавать расширенные параметры, например, тип карты в обзорной карте
                .add(new ymaps.control.MiniMap({type: 'yandex#publicMap'}));

    // Обработка события, возникающего при щелчке левой кнопкой мыши в любой точке карты.
    myMap.events.add('click', function (e) {
    coords = e.get('coordPosition'); //определим позицию клика
   
    if(document.getElementById("xposition").value != '') //если маркер метки есть, значит и метка есть
    {
    myMap.geoObjects.remove(myPlacemark);//удаляем старую метку
    document.getElementById("xposition").value = '';
    }
    if(document.getElementById("xposition").value == '') //если маркер метки нулевой, значит и метки нет, добавим ее
    {
            myPlacemark =   new ymaps.Placemark(coords, { content: 'Москва!', balloonContent: 'Столица России'},
            {draggable: true,/* Опции метки: - флаг перетаскивания метки */
            hideIconOnBalloonOpen: true});/* - показывать значок метки при открытии балуна*/           
               
            myMap.geoObjects.add(myPlacemark);
            //coords = myPlacemark.geometry.getCoordinates();               
            myPlacemark.events.add("dragend", function (e) {           
            coords = myPlacemark.geometry.getCoordinates();
            savecoordinats();
            }, myPlacemark);
               
            savecoordinats();
    }

                }); //закончили обработку клика
   
   
    // Устанавливаем центр и масштаб карты так, чтобы отобразить все геообъекты целиком.
    //myMap.setBounds(myMap.geoObjects.getBounds());
   
    //Отслеживаем событие выбора результата поиска
    SearchControl.events.add("resultselect", function (e) {
        coords = SearchControl.getResultsArray()[0].geometry.getCoordinates();
        savecoordinats();
    });
 
    //Ослеживаем событие изменения области просмотра карты - масштаб и центр карты
    myMap.events.add('boundschange', function (event) {
    if (event.get('newZoom') != event.get('oldZoom')) {       
        savecoordinats();
    }
      if (event.get('newCenter') != event.get('oldCenter')) {       
        savecoordinats();
    }
 
    });   
   
    //myMap.behaviors.enable(['scrollZoom']);

        }//закончили init
       
            //Функция для передачи полученных значений в форму
    function savecoordinats (){   
        var new_coords = [coords[0].toFixed(6), coords[1].toFixed(6)];   
        myPlacemark.getOverlay().getData().geometry.setCoordinates(new_coords);
        document.getElementById("xposition").value = new_coords;
        //document.getElementById("yposition").value = myPlacemark;
        //document.getElementById("mapzoom").value = myMap.getZoom(); //определение текущего зума
        var center = myMap.getCenter(); //получение центра карты
        var new_center = [center[0].toFixed(4), center[1].toFixed(4)];   
        document.getElementById("latlongcenter").value = new_center;   
    }
   
    function deletemyPlacemark () {
        if(document.getElementById("xposition").value != '')
        {
        myMap.geoObjects.remove(myPlacemark);//удаляем старую метку
        document.getElementById("xposition").value = '';
        }
    }
    </script>
</head>

<body>
    <div id="map" style="width: 600px; height: 400px"></div>
    <div><input name="xposition" id="xposition" type="text" readonly="readonly" /><input name="yposition" id="yposition" type="text" /><input name="latlongcenter" id="latlongcenter" type="text" />
      <label>
      <input type="submit" name="button" id="button" value="Убрать объект с карты" onclick="deletemyPlacemark ();" />
      </label>
    </div>
</body>

</html>

 

  

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

можно хранить ссылку на метку (переменную) в замыкании. проверять ее существование в обработчике клика, определена (не undefined) - просто перемещаете, не определена (undefined) создаете и присваиваете ее переменной

Спасибо!:-)

 

и

myPlacemark.getOverlay().getData().geometry.setCoordinates(coords);

замените на 

myPlacemark.geometry.setCoordinates(coords);

исправил, приятно общаться!

n.madibragimov@citimall.ru
11 октября 2017, 13:42
Как определить Id метки по координатам, если на карте много меток?
n.madibragimov@citimall.ru,
никак вообще говоря так делать не надо
Обновлено 11 октября 2017, 14:31