Клуб API Карт

Метка, как получить адрес, и как двигая метку одновременно двигать карту?

tt-45
12 декабря 2012, 20:09

Поставил метку, которую пользователь должен передвинуть в нужное ему место (drug and drop). При отпускании мышкой метки, хочу чтобы в один див выводился адрес на котором стоит метка, а в другой gps координаты. Так же хочу чтобы когда передвигается метка, передвигалась и карта за меткой.

 

Как всё это сделать.

 

30 комментариев
Подписаться на комментарии к посту

для получения адреса по координатам нужно геокодировать эти координаты

ничего не понимаю в этом мануале(

 

А что не так? обычный справочник

можно посмотреть руководство разработчика или примеры посмотреть

я в этих скриптах не силён там нету такого, чтобы после отпускания метки можно было прописать в div на сайте текстом адрес )

С самого простого решил начать - срабатывания события при отпускании кнопки мыши с метки

 

myPlacemark.events.add('onMouseUp', function (e) {
                alert("ok");
                });

 

не работает

где Вы увидели такое событие "onMouseUp"?

просто в этих событиях не нашёл.

 

mouseup не работает.

 

// Создание метки
                var myPlacemark = new ymaps.Placemark(
                // Координаты метки
                [55.752305, 37.620483] , {
                    hintContent: 'Поставьте метку на точку поиска!'
                }, {
                    draggable: true // Метку можно перетаскивать, зажав левую кнопку мыши.
                });
                // Добавление метки на карту
                myMap.geoObjects.add(myPlacemark);
               
                //событие при отпускании мыши с плейсмарка
                myPlacemark.events.add('mouseup', function (e) {
                alert("ok");
                });

mouseup это не событие окончания перетаскивания метки,

вам нужен dragend

Спасибо! уже ближе к цели =)

 

Хочу еще изменение масштаба колесом мыши.Написал вот что

http://api.yandex.ru/maps/doc/jsapi/2.x/ref/reference/Map.xml#behaviors

 

Как вариант можно указать прямо при создании карты

см. первый пример

Ваш вариант сработал спасибо!

 

Я писал так

myMap.controls.add(
                new ymaps.control.addenableScrollZoom('true');
                );

по аналогу ZoomControl(). Потому что в мануале не написано как правильно писать.

 

А вот с получением координат уже прогресс, опять же, в мануале про это ничего нет, пришлось поискать в поиске, нашел в чужом примере.

myPlacemark.events.add('dragend', function (e) {
                alert(myPlacemark.geometry.getCoordinates());
                });

работает супер

 

а вот получение адреса по координатам выдаёт Object

var coords = e.get('coordPosition');
                 alert(ymaps.geocode(coords));

 

а вот получение адреса по координатам выдаёт Object

var coords = e.get('coordPosition');
                 alert(ymaps.geocode(coords));

Объект это экземпляр класса util.Promise

как с ним работать можно посмотреть в примерах геокодирования

Сделал как в примере геокодирования

 

var coords = e.get('coordPosition');
                // Отправим запрос на геокодирование
                ymaps.geocode(coords).then(function (res) {
                    var names = [];
                    // Переберём все найденные результаты и
                    // запишем имена найденный объектов в массив names
                    res.geoObjects.each(function (obj) {
                        names.push(obj.properties.get('name'));
                    });
                   
                    });

не пашет. Вывожу alert(obj.properties.get('name')); - молчит. И если alert("ok")  сразу после троки "ymaps.geocode(coords).then(function (res) {"

то тоже молчит

 

Про util.Promise почитал, ничего не понял )

 

ymaps.geocode(coords).then(function (res) {
    var first = res.geoObjects.get(0),

          name = first.properties.get('name');

    alert(name);
});


надо всё-таки хоть немного знать javascript

рекомендую почитать Флэнагана

var coords = e.get('coordPosition');
                ymaps.geocode(coords).then(function (res) {
                var first = res.geoObjects.get(0),
                name1 = first.properties.get('name');
                });
                alert(name1);

..ничего не выводит.

Поменял name на name1 потому что выводил 10402, видимо переменная с таким именем где-то используется.

 

Полный код 

      // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);

        function init () {
            // Создание экземпляра карты и его привязка к контейнеру с
            // заданным id ("map")
            var myMap = new ymaps.Map('map', {
                    // При инициализации карты, обязательно нужно указать
                    // ее центр и коэффициент масштабирования
                    center: [55.752305, 37.620483], //
                    zoom: 12,
                    behaviors: ['default', 'scrollZoom']
                });
            /*
                myMap.controls.add(
                   new ymaps.control.ZoomControl()
                );*/
                myMap.controls.add(new ymaps.control.MapTools());
                myMap.controls.add('typeSelector');
                /*
                myMap.controls.add(
                new ymaps.control.addenableScrollZoom('true');
                );*/
               
                // Создание метки
                var myPlacemark = new ymaps.Placemark(
                // Координаты метки
                [55.752305, 37.620483] , {
                    hintContent: 'Поставьте метку на точку поиска!'
                }, {
                    draggable: true // Метку можно перетаскивать, зажав левую кнопку мыши.
                });
                // Добавление метки на карту
                myMap.geoObjects.add(myPlacemark);
               
                //событие при отпускании мыши с плейсмарка
                myPlacemark.events.add('dragend', function (e) {
                $('#adres').text(myPlacemark.geometry.getCoordinates());
               
                var coords = e.get('coordPosition');
                ymaps.geocode(coords).then(function (res) {
                var first = res.geoObjects.get(0),
                name1 = first.properties.get('name');
                });
                alert(name1);
   
                });
               
        }

будет выводить только внутри обработчика then

    var coords = e.get('coordPosition');
                ymaps.geocode(coords).then(function (res) {
                var first = res.geoObjects.get(0),
                name1 = first.properties.get('name');
                alert(name1);
                });

уже так пробовал, не хочет он выводить

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

к сожалению, пока не могу засветить проект(

А у Вас работает?

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">

Пример Яндекс.Карта в модальном окне




 


вот на чистом документе

при drag-событиях координаты не приходят в coordPosition

а приходит только объект который драгают

так работает:

 

                //событие при отпускании мыши с плейсмарка                myPlacemark.events.add('dragend', function (e) {                    var coords = e.get('target').geometry.getCoordinates();                    ymaps.geocode(coords).then(function (res) {                        var first = res.geoObjects.get(0),                        name1 = first.properties.get('name');                        alert(name1);                                                                                                                                       });                });

Вы гуру яндекс карт. Спасибо огромное за оказанную помощь.

Могли бы дать ссылку, где почитать как сделать чтобы карта двигалась когда перемещаешь метку?

не очень понял задачу

нужно чтобы потянув за метку можно было двигать карту?

Да, это то что Вы мне предлагали в самом начале, для юзабилити

а.., это не очень простая задача.

я попробую на выходных ее решить и отпишу

1. В фаерфоксе двигается, но после того как отпускаешь метку - открывается картинка метки.

 

2.В хроме, ie9 и опере работает но после того как отпустил метку , метка не двигается.

 

 

 

 

1. В фаерфоксе двигается, но после того как отпускаешь метку - открывается картинка метки.

 

картинка всмысле балун?

 

2.В хроме, ie9 и опере работает но после того как отпустил метку , метка не двигается.

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

это событие отключает драг

я сделал для примера, возможно вам просто свое событие надо сделать

или всегда их оставлять двигающимися