#javascript #html #vue.js #leaflet
Вопрос:
Я хочу перетащить маркер из меню, но @drop не влияет на элемент l-карты. Вот мой код
<l-map
v-if="showMap"
:center="center"
:options="mapOptions"
:CRS="CRS"
:minZoom="minZoom"
:maxZoom="maxZoom"
:zoom="zoom"
:max-bounds="imageBounds"
style="height: 100%; width: 100%"
@update:zoom="zoomUpdate"
@update:center="centerUpdate"
@mousemove="getMouseCords"
ref="map"
id="dragtarget"
@drop.prevent="drop"
@dragover.prevent="allowDrop"
@dragleave.prevent="dragEnd">
drop(event) {
this.dragOver = false;
const data = JSON.parse(event.dataTransfer.getData('object'));
const map = this.$refs.map.mapObject;
const coordsX = event.clientX,
coordsY = event.clientY,
point = L.point( coordsX - 100, coordsY - 100),
markerCoords = map.containerPointToLatLng(point);
const payload = {
name: data.name,
cords: {
x: markerCoords.lat,
y: markerCoords.lng,
}
}
this.$store.commit('addObject', payload);
},
<div
@drop.prevent="drop"
@dragover.prevent="allowDrop"
@dragleave.prevent="dragEnd"
style="height: 100%; width: 100%">
когда я обертываю элемент l-карты с помощью div и добавляю туда событие @drop, оно будет работать, но я не смогу затем запустить мышь. Обертывание с помощью div работает, но размещение маркера не является точным, и маркеры имеют смещения в месте падения.