support clicking on map to set specified geographic location

src/components/common/MapView.vue

@@ -13,7 +13,8 @@ import { ref, computed, useTemplateRef } from 'vue';
 
 import { useI18n } from '@/locales/helpers.ts';
 
-import type { MapInstance, MapPosition } from '@/lib/map/base.ts';
+import type { MapPosition } from '@/core/map.ts';
+import type { MapInstance } from '@/lib/map/base.ts';
 import { createMapInstance } from '@/lib/map/index.ts';
 
 const props = defineProps<{
@@ -23,6 +24,10 @@ const props = defineProps<{
     geoLocation?: MapPosition;
 }>();
 
+const emit = defineEmits<{
+    (e: 'click', geoLocation: MapPosition): void;
+}>();
+
 const { tt, getCurrentLanguageInfo } = useI18n();
 
 const mapContainer = useTemplateRef<HTMLElement>('mapContainer');
@@ -86,6 +91,9 @@ function initMapView(): void {
             text: {
                 zoomIn: tt('Zoom in'),
                 zoomOut: tt('Zoom out'),
+            },
+            onClick: (geoLocation: MapPosition) => {
+                emit('click', geoLocation);
             }
         });
 
@@ -105,7 +113,18 @@ function initMapView(): void {
     }
 }
 
+function setMarkerPosition(geoLocation?: MapPosition): void {
+    if (!mapInstance.value) {
+        return;
+    }
+
+    if (geoLocation) {
+        mapInstance.value.setMapCenterMarker(geoLocation);
+    }
+}
+
 defineExpose({
-    initMapView
+    initMapView,
+    setMarkerPosition
 });
 </script>

src/components/mobile/MapSheet.vue

@@ -3,13 +3,16 @@
               :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
         <f7-toolbar>
             <div class="swipe-handler"></div>
-            <div class="left"></div>
+            <div class="left">
+                <f7-link :text="tt('Disable Click to Set Location')" @click="switchSetGeoLocationByClickMap(false)" v-if="isSupportGetGeoLocationByClick() && props.setGeoLocationByClickMap"></f7-link>
+                <f7-link :text="tt('Enable Click to Set Location')" @click="switchSetGeoLocationByClickMap(true)" v-if="isSupportGetGeoLocationByClick() && !props.setGeoLocationByClickMap"></f7-link>
+            </div>
             <div class="right">
                 <f7-link :text="tt('Done')" @click="save"></f7-link>
             </div>
         </f7-toolbar>
         <f7-page-content class="no-margin-vertical no-padding-vertical">
-            <map-view ref="map" height="400px" :geo-location="geoLocation">
+            <map-view ref="map" height="400px" :geo-location="geoLocation" @click="updateSpecifiedGeoLocation">
                 <template #error-title="{ mapSupported, mapDependencyLoaded }">
                     <div class="display-flex padding justify-content-space-between align-items-center">
                         <div class="ebk-sheet-title" v-if="!mapSupported"><b>{{ tt('Unsupported Map Provider') }}</b></div>
@@ -36,17 +39,21 @@ import MapView from '@/components/common/MapView.vue';
 
 import { useI18n } from '@/locales/helpers.ts';
 
-import type { MapPosition } from '@/lib/map/base.ts';
+import type { MapPosition } from '@/core/map.ts';
+
+import { isSupportGetGeoLocationByClick } from '@/lib/map/index.ts';
 
 type MapViewType = InstanceType<typeof MapView>;
 
 const props = defineProps<{
     modelValue?: MapPosition;
+    setGeoLocationByClickMap?: boolean;
     show: boolean;
 }>();
 
 const emit = defineEmits<{
     (e: 'update:modelValue', value: MapPosition | undefined): void;
+    (e: 'update:setGeoLocationByClickMap', value: boolean): void;
     (e: 'update:show', value: boolean): void;
 }>();
 
@@ -63,6 +70,17 @@ const geoLocation = computed<MapPosition | undefined>({
     }
 });
 
+function updateSpecifiedGeoLocation(mapPosition: MapPosition): void {
+    if (isSupportGetGeoLocationByClick() && props.setGeoLocationByClickMap) {
+        geoLocation.value = mapPosition;
+        map.value?.setMarkerPosition(mapPosition);
+    }
+}
+
+function switchSetGeoLocationByClickMap(value: boolean): void {
+    emit('update:setGeoLocationByClickMap', value);
+}
+
 function save(): void {
     emit('update:show', false);
 }