added location picker to setting

pull/49/head
A1Gard 5 months ago
parent fd002df592
commit 08a2340965

@ -1,6 +1,9 @@
<template>
<div id="latlng">
<div ref="mapContainer" :style="'height: 300px;'+mapStyle"></div>
<template v-if="this.xname != 'NOTHING'">
<input type="hidden" :name="xname" :value="allData">
</template>
</div>
</template>
@ -21,9 +24,15 @@ export default {
zip: '',
lat: null,
lng: null,
firstMove: false,
currentZoom: 10,
}
},
props: {
xname: {
default: 'NOTHING',
type: String,
},
darkMode: {
type: Boolean,
default: false,
@ -36,7 +45,7 @@ export default {
type: Number,
default: 50.99155000,
},
izoom:{
izoom: {
type: Number,
default: 10,
},
@ -45,6 +54,7 @@ export default {
this.lat = this.ilat;
this.lng = this.ilng;
this.zoom = this.izoom;
this.currentZoom = this.izoom;
this.initMap();
},
computed: {
@ -53,7 +63,10 @@ export default {
return 'filter: invert(100%) hue-rotate(120deg) brightness(95%) contrast(90%);';
}
return '';
}
},
allData() {
return this.lat + ',' + this.lng + ',' + this.currentZoom;
},
},
methods: {
initMap() {
@ -67,6 +80,33 @@ export default {
this.map.on('click', this.onMapClick);
this.map.attributionControl.setPrefix('xShop');
if (this.marker) {
this.map.removeLayer(this.marker);
}
this.marker = L.marker({lat: this.lat, lng: this.lng}).addTo(this.map);
// You can emit the selected location or perform any other desired action here
// console.log('Selected location:', e.latlng);
this.map.on("moveend", () => {
if (!this.firstMove) {
this.map.invalidateSize();
this.firstMove = true;
}
});
this.map.on("zoomend", (e, x) => {
this.map.invalidateSize();
this.firstMove = true;
this.currentZoom = e.target._zoom;
});
try {
document.querySelector('#lat').value = this.lat;
document.querySelector('#lng').value = this.lng;
} catch (e) {
console.log(e.message);
}
},
onMapClick(e) {
if (this.marker) {
@ -82,7 +122,7 @@ export default {
try {
document.querySelector('#lat').value = this.lat;
document.querySelector('#lng').value = this.lng;
} catch(e) {
} catch (e) {
console.log(e.message);
}

@ -19,6 +19,10 @@
@case('ICON')
<remix-icon-picker xname="{{$setting->key}}" xvalue="{{old($setting->key, $setting->value)}}"></remix-icon-picker>
@break
@case('LOCATION')
@php($latlng = explode(',',old($setting->key, $setting->value)))
<lat-lng xname="{{$setting->key}}" :ilat="{{$latlng[0]}}" :ilng="{{$latlng[1]}}" :izoom="{{$latlng[2]}}" :dark-mode="true"></lat-lng>
@break
@case('EDITOR')
<textarea name="{{$setting->key}}" id="{{$setting->key}}"
class="form-control ckeditorx"

Loading…
Cancel
Save