Клуб API Карт

«Перетащить» маркер на карту (drag&drop)

mapsapi
25 мая 2010, 14:15

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

Я нарисовал прекрасную иллюстрацию, поясняющую, что мне нужно.


Marker draggable



Drag & drop за пределами карты планирую реализовать с помощью  jQuery UI Draggable. У меня получается дотащить маркер до карты, но я не знаю, как отследить, где его бросили, и поставить там метку.


Подскажите, как лучше реализовать.


Спасибо.

 

5 комментариев
Подписаться на комментарии к посту
На момент зажатия мышки надо создавать объект внутри карты, и передавать ему координаты твоего визуального объекта, не релиз удалять перемещаемый объект и отображать сгенерированный. наверное как-то так.
Мне нужно будет сгененрированный отобразить именно в том месте на карте, где отпустил. А потом узнать его геокоординаты.
В настоящее время карта не пропускает через себя события, поэтому придется дополнительно слушать события карты MouseMove и MouseUp.

В итоге получается что-то в этом роде:
$("#marker").draggable();

var drag = false;
$("#marker").bind("dragstart", function () {
    map.addCursor(YMaps.Cursor.ARROW);
    drag = true;
});

$("#marker").bind("dragstop", function (e) {
    createPlacemark(map.converter.clientPixelsToCoordinates(new YMaps.Point(e.pageX, e.pageY)));
});

var placemark;
YMaps.Events.observe(map, map.Events.MouseMove, function (map, e) {
    if (drag) {
        var coords = map.converter.coordinatesToClientPixels(e.getGeoPoint());
        $("#marker").css({
            top : coords.getY(),
            left : coords.getX()
        });
    }
});

YMaps.Events.observe(map, map.Events.MouseUp, function (map, e) {
    if (drag) {
        createPlacemark(e.getGeoPoint());
    }
});

function createPlacemark (point) {
    map.removeCursor(YMaps.Cursor.ARROW);
    $("#marker").remove();
    drag = false;

    map.addOverlay(new YMaps.Placemark(point));
}
Подразумевается, что есть маркер, который вы двигаете:
http://api-maps.yandex.ru/i/0.4/micro/pmlbs.png" alt="" style="position:absolute;z-index:10000" />

В моем фрагменте кода не учитывается смещение метки, поэтому метка будет добавлятся на карту не совсем в то место, где остановились :)

Спасибо!

Ткпкрь попробую заставить это работать более-менее корректно. Сейчас маркер ставится совсем не туда, где остановились.

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

Для этого в конструкторе карты укажите параметр propagateEvents в значение true.
var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0], { propagateEvents : true });

Тогда маркер будет втаскиваться на карту без дополнительных обработчиков.

Но со смещением при создании метки придется побороться)