- Creazione "AbitareGliIblei"

- Mappa Interattiva con i markers

src/components/CMapEditAddressByCoord/CMapEditAddressByCoord.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="q-pa-sm">
+    <div class="q-gutter-sm">
+      <div class="row q-col-gutter-sm q-mb-sm items-center">
+        <div class="col">
+          <q-select
+            v-model="localAddressObj"
+            label="Indirizzo"
+            use-input
+            input-debounce="300"
+            :options="suggestions"
+            @filter="getAddressSuggestions"
+            filled
+            dense
+            hide-dropdown-icon
+            clearable
+          />
+        </div>
+        <div class="col-auto">
+          <q-btn @click="searchAddress" label="Cerca" color="primary" />
+        </div>
+      </div>
+      <div class="row q-col-gutter-sm q-mb-sm items-center no-wrap">
+        <q-col class="q-col-auto" style="width: 120px">
+          <q-input
+            v-model="localCoordinates.lat"
+            label="Latitudine:"
+            filled
+            :label-color="modificato ? 'negative' : 'primary'"
+            dense
+          />
+        </q-col>
+        <q-col class="q-col-auto" style="width: 120px">
+          <q-input
+            v-model="localCoordinates.lng"
+            label="Longitudine:"
+            filled
+            :label-color="modificato ? 'negative' : 'primary'"
+            dense
+          />
+        </q-col>
+        <q-col class="q-col-auto" style="width: 60px">
+          <q-btn
+            @click="getCurrentLocation"
+            label=""
+            color="primary"
+            icon="gps_fixed"
+          />
+        </q-col>
+        <q-col class="q-col-auto" style="width: 60px">
+          <q-btn
+            @click="mostraMappa = !mostraMappa"
+            :color="mostraMappa ? 'negative' : 'positive'"
+            class="q-ma-sm"
+            icon="fas fa-map"
+          />
+        </q-col>
+      </div>
+
+      <div v-if="modificato" class="row justify-center q-ma-sm">
+        <q-btn
+          @click="salvaCoordinate"
+          color="primary"
+          label="Salva"
+          :disable="!modificato"
+          class="q-ma-sm"
+        />
+        <q-btn
+          @click="annullaSalvataggio"
+          label="Annulla"
+          class="q-ma-sm"
+          :disable="!modificato"
+        />
+      </div>
+    </div>
+
+    <div
+      id="map"
+      ref="mapContainer"
+      v-show="mostraMappa"
+      :style="`height:${myheight}px; width:99%`"
+    ></div>
+  </div>
+</template>
+<script lang="ts" src="./CMapEditAddressByCoord.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CMapEditAddressByCoord.scss';
+</style>