feat(core): support search location

CofCat456 · Aug 12, 2023 · b102e5f · b102e5f
1 parent 18a1878
commit b102e5f
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 6 deletions.
diff --git a/packages/core/src/composables/useSearch.ts b/packages/core/src/composables/useSearch.ts
@@ -0,0 +1,73 @@
+import type { Ref } from 'vue';
+import { markRaw, onMounted, reactive, ref, toValue } from 'vue';
+import { useMap } from './useMap';
+
+export function useSearch(apiKey: string) {
+  const isLoading = ref(false);
+  const cGoogle = ref<typeof google>();
+  const cApi = ref<typeof google.maps>();
+  const cGeocoder = ref<google.maps.Geocoder>();
+  const coordinates = reactive<google.maps.LatLngLiteral>({
+    lat: 0,
+    lng: 0,
+  });
+
+  function resetCoordinates() {
+    Object.assign(coordinates, {
+      lat: 0,
+      lng: 0,
+    });
+  }
+
+  const getCoordinates = async (address: string | Ref<string>) => {
+    isLoading.value = true;
+
+    if (!cGeocoder.value)
+      return;
+
+    if (!address && !toValue(address))
+      return;
+
+    const request: google.maps.GeocoderRequest = {
+      address: toValue(address),
+    };
+
+    // NOTE: 使用地理編碼服務將地址轉換為地理座標
+    await cGeocoder.value.geocode(request, (results, status) => {
+      if (status === 'OK' && results && results.length > 0) {
+        const { location } = results[0].geometry;
+
+        if (!location)
+          return;
+
+        const { lat, lng } = location;
+
+        if (!lat || !lng)
+          return;
+
+        // 設置座標
+        Object.assign(coordinates, { lat: lat(), lng: lng() });
+
+        isLoading.value = false;
+      }
+      else {
+        resetCoordinates();
+
+        isLoading.value = false;
+      }
+    });
+  };
+
+  onMounted(async () => {
+    const { loader } = useMap(apiKey);
+    cGoogle.value = markRaw(await loader.load());
+    cApi.value = markRaw(cGoogle.value.maps);
+    cGeocoder.value = markRaw(new cApi.value.Geocoder());
+  });
+
+  return {
+    isLoading,
+    coordinates,
+    getCoordinates,
+  };
+}
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -1 +1,2 @@
 export * from './composables/useMap';
+export * from './composables/useSearch';
diff --git a/packages/map/src/components/GoogleMap/src/index.vue b/packages/map/src/components/GoogleMap/src/index.vue
@@ -5,7 +5,23 @@ import { apiSymbol, mapSymbol } from '@/utlis/symbol';
 import { taiwanRestriction } from '@/utlis/mapUtlis';
 import { hasChanged, transformCenter } from '@/utlis';
 import { mapEvents } from '@/utlis/events';
-import type { FullscreenControlOptions, IconMouseEvent, LatLng, LatLngLiteral, Map, MapMouseEvent, MapRestriction, MapTypeControlOptions, MapTypeStyle, PanControlOptions, RotateControlOptions, ScaleControlOptions, StreetViewControlOptions, StreetViewPanorama, ZoomControlOptions } from '@/types';
+import type {
+  FullscreenControlOptions,
+  IconMouseEvent,
+  LatLng,
+  LatLngLiteral,
+  Map,
+  MapMouseEvent,
+  MapRestriction,
+  MapTypeControlOptions,
+  MapTypeStyle,
+  PanControlOptions,
+  RotateControlOptions,
+  ScaleControlOptions,
+  StreetViewControlOptions,
+  StreetViewPanorama,
+  ZoomControlOptions,
+} from '@/types';
 
 interface CofMap {
   cGoogle: typeof google | undefined
@@ -196,6 +212,7 @@ defineExpose({
 </template>
 
 <style scoped>
+/* FIXME: error css */
 .map-container,
 #map {
   width: 100%;

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml