Клуб API Карт

Перетаскивание метки и её последующая фиксация

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

var placemark = new YMaps.Placemark(map.getCenter(), {draggable: true});
placemark.name = " №1";
placemark.description = "30 ";
map.addOverlay(placemark);

Так прописал перетаскивание метки. Метка перетаскивается. Но при открытии карты в другой раз,метка опять на старом месте.
Как реализовать ,что бы метка фиксировалась,там,куда я её перетащил ?

32 комментария

 

var placemark = new YMaps.Placemark(point), draggable: true ;

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

А не подставлять так, пальцем в небо.

Комментарий удалён

после перемещения метки нужно сохранять данные на сервере и при открытии новой карты брать координаты метки с сервера, если они есть.

сергей евглевский
28 января 2016, 01:34

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

Всеволод Шмыров
28 января 2016, 01:34
Эти операции уже не средствами API нужно реализовывать. Только получение координат.

Подписываетесь на событие dragend у геообъекта.
http://api.yandex.ru/maps/doc/jsapi/2.x/ref/reference/GeoObject.xml#event-dragend
В слушателе geoobject.geometry.getPixelGeometry().getCoordinates()
http://api.yandex.ru/maps/doc/jsapi/2.x/ref/reference/IPixelPointGeometry.xml#getCoordinates

Далее полученные данные сохраняете на своем сервере. К примеру, при помощи ajax'а. При следующей загрузке страницы или сразу при формировании страницы подставлять данные для метки, или тоже запрашивать ajax'ом.

А какая конечная цель? Вы можете сохранять позицию и в локальное хранилище webStorage, но работает это в современных браузерах.
http://caniuse.com/#feat=namevalue-storage

тут вроде про первое АПИ речь =)

Всеволод Шмыров
28 января 2016, 01:34
Точно. не обратил внимания.

Ну все тоже самое только событие
DragEnd
http://api.yandex.ru/maps/doc/jsapi/1.x/ref/reference/placemark.xml#event-DragEnd

и метод getCoordPoint
http://api.yandex.ru/maps/doc/jsapi/1.x/ref/reference/placemark.xml#getCoordPoint
сергей евглевский
28 января 2016, 01:34

Спасибо за отзывчивость. К сожалению я не понимаю как это можно реализовать кодом? Не хочется подставлять пальцем в небо. А то

 

var placemark = new YMaps.Placemark(map.getCenter(), {draggable: true});
placemark.name = " №1";
placemark.description = "30 ";
map.addOverlay(placemark);

И потом куда этот
DragEnd ?


Да, я уже недоволен потому что Вы пишете на старой версии. Кстати зачем Вам это? Уже как 2 года есть АПИ 2.0 и для него куча примеров понаписано. Есть всякие песочницы и прочие плюшки. 

сергей евглевский
28 января 2016, 01:34

Просто на нашем проекте есть интэрактивная собственная карта. Да. написана она старым кодом. А в новой версии метка фиксируется после передвижения ?

Фиксируется она в любой версии, и АПИ тут вообще непричем. Для этого нужно сохранять координаты метки на сервере, после ее перетаскивания,

а при открытии страницы загружать эти координаты с сервера и показывать по ним метку

сергей евглевский
28 января 2016, 01:34

А как их сохранить ? Или может как то можно код прописать,что бы метка показывала координаты ? А то каждый раз приходится в ручную каждую метку переписывать. и что бы поставить её правильно приходится координаты исправлять по несколько раз. И так по каждой метке.

Ну это как бы ваш сервер. Только Вы и знаете что и как на нем сохранять.

Мне про ваш сервер ничего не известно. Видимо надо написать код на чем то типа PHP.

Отправить на сервер координаты можно ввиде JSON, с помощью, например, jQuery.ajax

сергей евглевский
28 января 2016, 01:34

Наверное лече просто узнать координаты метки. Нашёл код var coords = geoResult.getGeoPoint();

 

Как правильно его вставить  ?

var placemark = new YMaps.Placemark(map.getCenter(), {draggable: true});
placemark.name = " №1";
placemark.description = "30 ";
map.addOverlay(placemark);
var coords = geoResult.getGeoPoint();

Или куда его вставить ?

 Как то так:

YMaps.Events.observe(placemark, placemark.Events.DragEnd,    function (obj) {        var coords = obj.getGeoPoint();        // тут отправляем эти координаты на сервер.    });

 

сергей евглевский
28 января 2016, 01:34

Написал так :

var placemark = new YMaps.Placemark(map.getCenter(), {draggable: true});
placemark.name = " №1";
placemark.description = "30 ";
map.addOverlay(placemark);
YMaps.Events.observe(placemark, placemark.Events.DragEnd,    function (obj) {        var coords = obj.getGeoPoint();        // тут отправляем эти координаты на сервер.    });
Ну ничего не происходит. Не показывает координаты.

а где он должен их показывать?

сергей евглевский
28 января 2016, 01:34

Ну где то должен показать координаты. Вот например здесь показывает же Пример Нашёл похожую тему http://clubs.ya.ru/mapsapi/replies.xml?item_no=41274 .

 

Попробовал написать код

myMap.events.add("click", function (e) {

    console.log(e.get("coordPosition"));

});

 

Тоже ни где и ничего не показывает.

myMap.events.add("click", function (e) {

это из второй версии.

в первой этот код работать не будет

сергей евглевский
28 января 2016, 01:34

Проверил. Не работает.Этот вариант мне подошёл бы

31 июля, 17:48

Определить координаты можно с помощью этого инструмента.

Если хотите отображать их в балуне, при создании метки

var myPlacemark = new ymaps.Placemark(_coords_, {

    url: '...',

    balloonContentBody: myPlacemark.geometry.getCoordinates()

}, {});

 

Как мне переписать код на 2 версию ?

 

 

сергей евглевский
28 января 2016, 01:34

Перевёл карту на 2.0 Теперь не могу найти скрипт для меток на 2.0 Скрипт старый для меток 1.0 не работает в этой новой карте. Метка не показывается

что за скрипт?

сергей евглевский
28 января 2016, 01:34

Скрипт для метки

var placemark = new YMaps.Placemark(map.getCenter(), {draggable: true});
placemark.name = " №1";
placemark.description = "30 ";
map.addOverlay(placemark);
сергей евглевский
28 января 2016, 01:34

                layerMinZoom: 4,
                layerMaxZoom: 6           
            };
        ymaps.ready(function () {
            // Передаем его в конструктор класса TilerConverter и получаем ссылку на карту.
            var myMap = (new TilerConverter(options)).getMap();});

var placemark = new YMaps.Placemark(map.getCenter(), {draggable: true});
placemark.name = " №1";
placemark.description = "30 ";
map.addOverlay(placemark);

   
   
   


   
       
           

Карта Тактик - API Яндекс.Карт 2.x


           
       
   

Вставьте его сразу после getMap();

И перед });

и надо его на второе АПИ переписать

и карта у вас myMap называется, а не map

сергей евглевский
28 января 2016, 01:34

Так в том то и дело,что в поисковике не могу найти пример для второго апи. Я ведь перешёл на вторую версию ради кода этого :

var myPlacemark = new ymaps.Placemark(_coords_, {

    url: '...',

 balloonContentBody: myPlacemark.geometry.getCoordinates()

}, {});

var center = myMap.getCenter(),

    myPlacemark = new ymaps.Placemark(center, {

 balloonContentBody: center

}, {

    draggable: true

});

myMap.geoObjects.add(myPlacemark);

сергей евглевский
28 января 2016, 01:34

Спасибо огромное. Так метка появилась и показывает координаты.Но  когда я её перемещаю,то координаты не меняются. Как сделать,что бы они менялись ? Ведь центр карты я и так знаю. А мне нужно знать те координаты,куда я перетащу метку.

myPlacemark.events.add('dragend', function (e) {

    var target = e.get('target');

 

    target.properties.set('balloonContentBody', target.geometry.getCoordinates());

});

сергей евглевский
28 января 2016, 01:34

Что то не работает. Может код я не правильно совместил ?

            var myMap = (new TilerConverter(options)).getMap();
var center = myMap.getCenter(),
myPlacemark = new ymaps.Placemark(center, {
balloonContentBody: center
}, {
draggable: true
});
myMap.geoObjects.add(myPlacemark);
});
myPlacemark.events.add('dragend', function (e) {
var target = e.get('target');
target.properties.set('balloonContentBody', target.geometry.getCoordinates());
});
 

Неправильно

обработчик события нужно тоже внутрь обработчика ymaps.ready поместить

сергей евглевский
28 января 2016, 01:34

});
myPlacemark.events.add('dragend', function (e) {
var target = e.get('target');
target.properties.set('balloonContentBody', target.geometry.getCoordinates());
});
myMap.geoObjects.add(myPlacemark);
});

Написал так. БОЛЬШОЕ, ВАМ СПАСИБО !!! Всё работает теперь. Вы очень облегчили мне работу ! Очень вам благодарен !