@heycar/heycars-map 0.3.0 → 0.3.1

package/src/hooks/useMapAutoComplete.ts

@@ -1,15 +1,17 @@
 import { ref, watch } from "vue-demi";
 import type { AutoCompletePlace, City } from "../types/interface";
+import { MapLogProps, useMapLogVariable } from "./useMapLog";
 import { useMapSupplier } from "./useMapSupplier";
 import { useUpdate } from "./useUdate";
 
-export interface UseMapAutoCompleteProps {
+export interface UseMapAutoCompleteProps extends MapLogProps {
   city: City;
 }
 
 export const useAmapAutoComplete = (props: UseMapAutoCompleteProps) => {
   const { city } = props;
   const cityRef = ref(city);
+  useMapLogVariable(props, "useAmapAutoComplete", cityRef, "cityRef");
   const { readyPromise } = useMapSupplier();
   const keywordRef = ref("");
   const autoCompletePlacesRef = ref<AutoCompletePlace[]>([]);

package/src/hooks/useMapLog.ts

@@ -4,9 +4,21 @@ export interface MapLogProps {
   log?: boolean;
 }
 
-export const useMapLog = <P extends MapLogProps>(props: P, name: string) => {
+export const useMapLog = <P extends MapLogProps>(props: P, prefix: string) => {
   watchEffect(() => {
     if (!props.log) return;
-    console.log(`log ${name} props = `, { ...props });
+    console.log(`log ${prefix} props = `, { ...props });
+  });
+};
+
+export const useMapLogVariable = <P extends MapLogProps>(
+  props: P,
+  prefix: string,
+  variable: any,
+  name: string
+) => {
+  watchEffect(() => {
+    if (!props.log) return;
+    console.log(`log ${prefix} ${name} = `, { ...variable });
   });
 };

package/src/hooks/useMapPlace.ts

@@ -34,12 +34,14 @@ export const useAmapPlace = (props: UseMapPlaceProps) => {
               ? addressComponent.city
               : addressComponent.province;
             const countryName = addressComponent.country;
+            const cityParentName = addressComponent.province;
             place.name = name;
             place.lng = lng;
             place.lat = lat;
             place.cityName = cityName;
+            place.cityParentName = cityParentName;
             place.countryName = countryName;
-            onChange?.({ lng, lat, name, cityName, countryName });
+            onChange?.({ lng, lat, name, cityName, cityParentName, countryName });
             return;
           }
 
@@ -70,13 +72,15 @@ export const useGmapPlace = (props: UseMapPlaceProps) => {
       const { results } = await geocoder.geocode({ language: LANGUAGE, location: { lng, lat } });
       const name = results[0].formatted_address;
       const cityName = geocoderResult2cityName(results[0]);
+      const cityParentName = results.slice(-2)[0].address_components[0].long_name;
       const countryName = results.slice(-1)[0].address_components[0].long_name;
       place.lng = lng;
       place.lat = lat;
       place.name = name;
       place.cityName = cityName;
+      place.cityParentName = cityParentName;
       place.countryName = countryName;
-      onChange?.({ lng, lat, name, cityName, countryName });
+      onChange?.({ lng, lat, name, cityName, cityParentName, countryName });
     }
   );
   return { place, updatePlace };

package/src/hooks-business/useBusinessMapAutoComplete.ts

@@ -1,8 +1,9 @@
 import type { Ref } from "vue-demi";
 import { useMapAutoComplete } from "../hooks/useMapAutoComplete";
 import { useMapBoundCity } from "../hooks/useMapCityBound";
+import type { MapLogProps } from "../hooks/useMapLog";
 
-export interface UseBusinessMapAutoCompleteProps {
+export interface UseBusinessMapAutoCompleteProps extends MapLogProps {
   cityNameRef: Ref<string>;
 }
 
@@ -12,7 +13,7 @@ export const useBusinessMapAutoComplete = (props: UseBusinessMapAutoCompleteProp
     cityNameRef,
     onChange: (v) => setCity(v),
   });
-  const { autoCompletePlaces, setKeyword, setCity } = useMapAutoComplete({ city });
+  const { autoCompletePlaces, setKeyword, setCity } = useMapAutoComplete({ city, log: props.log });
   const handleKeywordInput = (e: Event) => {
     const target = e.target as HTMLInputElement;
     setKeyword(target.value);

package/src/types/interface.ts

@@ -7,6 +7,7 @@ export type Place = {
   lat: number;
   name: string;
   cityName?: string;
+  cityParentName?: string;
   countryName?: string;
 };