add map marker draggable

This commit is contained in:
sedum
2023-05-02 19:30:31 +02:00
parent 4765013898
commit 4584924175
3 changed files with 17 additions and 4 deletions

View File

@@ -13,7 +13,9 @@ client-only(placeholder='Loading...' )
:url="url"
:attribution="attribution")
LMarker(v-if="showMarker"
:lat-lng="marker.coordinates")
:lat-lng="marker.coordinates"
@update:lat-lng="updateCoords"
:draggable="draggable")
</template>
<script>
@@ -41,6 +43,8 @@ export default {
if (this.mapCenter.length)
return this.mapCenter
else {
this.place.latitude = isNaN(this.place.latitude) ? 0 : this.place.latitude
this.place.longitude = isNaN(this.place.longitude) ? 0 : this.place.longitude
return [this.place.latitude, this.place.longitude]
}
},
@@ -57,6 +61,7 @@ export default {
showMarker: { type: Boolean, default: true },
mapCenter: { type: Array, default: () => ([]) },
zoom: { type: Number, default: () => (16) },
draggable: { type: Boolean, default: false },
},
mounted() {
delete Icon.Default.prototype._getIconUrl;
@@ -71,6 +76,12 @@ export default {
this.$refs.leafletMap.mapObject.invalidateSize();
}
}, 200);
},
methods: {
updateCoords(v) {
this.place.latitude = Number.parseFloat(v.lat).toFixed(7)
this.place.longitude = Number.parseFloat(v.lng).toFixed(7)
}
}
}
</script>

View File

@@ -38,7 +38,8 @@ v-card
:rules="$validators.longitude")
p.mt-4(v-if='place.isNew' v-html="$t('event.address_geocoded_disclaimer')")
Map.mt-4(:place='place' v-if="(settings.allow_geolocation && place.name !== 'online' && place.latitude && place.longitude)" )
Map.mt-4(:place='place' draggable=true
v-if="(settings.allow_geolocation && place.name !== 'online' && place.latitude && place.longitude)" )
v-divider(v-if='settings.allow_online_event && showGeocoded')

View File

@@ -62,7 +62,8 @@ v-container
:label="$t('common.longitude')"
:rules="$validators.longitude")
Map.mt-4(:place.sync='place' :key="dialog" v-if="settings.allow_geolocation && place.name !== 'online' && place.latitude && place.longitude")
Map.mt-4(:place.sync='place' :key="dialog" draggable=true
v-if="settings.allow_geolocation && place.name !== 'online' && place.latitude && place.longitude")
v-card-actions
v-spacer
@@ -109,7 +110,7 @@ export default {
addressList: [],
address: '',
search: '',
place: { name: '', address: '', id: null },
place: { name: '', address: '', latitude: 0, longitude: 0, id: null },
headers: [
{ value: 'name', text: this.$t('common.name') },
{ value: 'address', text: this.$t('common.address') },