Leaflet перемещение CircleMarker - проблема:(

[lenny314156]

Добрый день. Нашел следующий пример:

Код: Выделить всё

var map = L.map('map').setView([44.635, 22.653], 11);
var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

var circle = L.circleMarker([44.63, 22.65], 8).addTo(map);

circle.on({
  mousedown: function () {
    map.on('mousemove', function(e) {
      circle.setLatLng(e.latlng);
    });
  },
  click: function () {
    map.removeEventListener();
  }
});

который замечательно работает в версиях leaflet ниже 1.0 бета-мастер и т.п. Т.е. кликаешь на маркер, и пока держишь кнопку мыши нажатой - circleMarker перемещается. Если же использовать leaflet версии 1.0 (всяческие беты) или master - circleMarker перемещается, только если после клика на нем, удерживая нажатой кнопку переместить карту. Карта перемещается, маркер остается на месте. Отпускаем кнопку мыши - маркер перемещается вслед за курсором, пока не сработает

Код: Выделить всё

  click: function () {
    map.removeEventListener();
  }

Как бы исправить?

[Sergik]

Попробуйте так:

Код: Выделить всё

	var map = L.map('map').setView([44.635, 22.653], 11);
	var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

	var circle = L.circleMarker([44.63, 22.65], 8).addTo(map),
		drag = new L.Draggable(circle.getElement());
	
	drag.enable();

[lenny314156]

Попробуйте так:

Код: Выделить всё

	var map = L.map('map').setView([44.635, 22.653], 11);
	var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

	var circle = L.circleMarker([44.63, 22.65], 8).addTo(map),
		drag = new L.Draggable(circle.getElement());
	
	drag.enable();

Да, это работает, спасибо. Самое интересное, что я пробовал сделать это через L.Draggable, но использовал просто circle, без .getElement(), поэтому ничего не получилось)

Спасибо за помощь)

[lenny314156]

Попробуйте так:

Код: Выделить всё

	var map = L.map('map').setView([44.635, 22.653], 11);
	var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

	var circle = L.circleMarker([44.63, 22.65], 8).addTo(map),
		drag = new L.Draggable(circle.getElement());
	
	drag.enable();

Да, это работает, спасибо. Самое интересное, что я пробовал сделать это через L.Draggable, но использовал просто circle, без .getElement(), поэтому ничего не получилось)

Спасибо за помощь)

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

[Sergik]

А что события у http://leafletjs.com/reference.html#draggable объекта не помогают?

[lenny314156]

А что события у http://leafletjs.com/reference.html#draggable объекта не помогают?

мне интересны географические координаты маркера, из которого сделали draggable-объект. А новый объект, как я понимаю, имеет координаты, привязанные к полотну svg.

[Vladimir_R]

Если я Вас правильно понял, то можно сделать так.

Код: Выделить всё

var map = L.map('map').setView([44.635, 22.653], 11);
osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map),
circle = L.circleMarker([44.63, 22.65], 8).addTo(map),
      drag = new L.Draggable(circle.getElement());
   drag.enable();
   drag.on('drag', function(e){
    console.log(map.mouseEventToLatLng(e.originalEvent));
   });

jsfiddle

[lenny314156]

Да, этот вариант работает, но для моей задачи не очень подходит, потому-что

Код: Выделить всё

map.mouseEventToLatLng(e.originalEvent)

зачастую не совпадает с координатами центра маркера-донора, но Вы подсказали мне выход - я создаю поверх моего circleMarker обычный маркер с divIcon и удаляю старый circleMarker.

Так что, в любом случае - спасибо.