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

View File

@@ -38,7 +38,8 @@ v-card
:rules="$validators.longitude") :rules="$validators.longitude")
p.mt-4(v-if='place.isNew' v-html="$t('event.address_geocoded_disclaimer')") 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') v-divider(v-if='settings.allow_online_event && showGeocoded')

View File

@@ -62,7 +62,8 @@ v-container
:label="$t('common.longitude')" :label="$t('common.longitude')"
:rules="$validators.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-card-actions
v-spacer v-spacer
@@ -109,7 +110,7 @@ export default {
addressList: [], addressList: [],
address: '', address: '',
search: '', search: '',
place: { name: '', address: '', id: null }, place: { name: '', address: '', latitude: 0, longitude: 0, id: null },
headers: [ headers: [
{ value: 'name', text: this.$t('common.name') }, { value: 'name', text: this.$t('common.name') },
{ value: 'address', text: this.$t('common.address') }, { value: 'address', text: this.$t('common.address') },