@heycar/heycars-map 0.1.9 → 0.2.1

package/src/hooks/useMapFitView.ts

@@ -0,0 +1,127 @@
+import { debounce } from "lodash-es";
+import type { MapShallowRef, RegisterOverlay } from "../types/interface";
+import type { MapEventHandler } from "../types/mapHelper";
+import { watchPostEffectForAMapEvent, watchPostEffectForGMapEvent } from "../utils/compare";
+import { getMapEvnetSource, useMapEventSource } from "./useMapEventSource";
+import { useMapSupplier } from "./useMapSupplier";
+import type { AmapOverlay, GmapOverlay } from "./useOverlay";
+
+const GOOGLE_MAP_ZOOM_CHANGE_DEBOUNCE_TIMEOUT = 20;
+
+type UseAmapFitViewPropsForListeners = {
+  onDragEnd?: MapEventHandler<AMap.Map>;
+  // onZoomEnd?: MapEventHandler<AMap.Map>;
+};
+
+export interface UseMapFitViewProps<M = AMap.Map | google.maps.Map> {
+  mapRef: MapShallowRef<M>;
+  padding?: [number, number, number, number];
+  autoFitTimeout?: number;
+}
+export const useAmapFitView = (props: UseMapFitViewProps<AMap.Map>) => {
+  const { mapRef, autoFitTimeout } = props;
+  const overlayGroup: Set<AmapOverlay> = new Set();
+  let timer: number | undefined = undefined;
+  const registerFitVeiw: RegisterOverlay<AmapOverlay> = {
+    add: (overlay: AmapOverlay) => {
+      overlayGroup.add(overlay);
+    },
+    remove: (overlay: AmapOverlay) => {
+      overlayGroup.delete(overlay);
+    },
+  };
+  const setFitView = () => {
+    const map = mapRef.value;
+    if (!map) return;
+    const vw = window.innerWidth / 100;
+    const [top, right, bottom, left] = props.padding ?? [0, 0, 0, 0];
+    console.log([...overlayGroup]);
+    map.setFitView([...overlayGroup], false, [top * vw, bottom * vw, left * vw, right * vw]);
+  };
+  const handleMoveEndOrZomEnd = () => {
+    if (!autoFitTimeout) return;
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      timer = undefined;
+      setFitView();
+    }, autoFitTimeout);
+  };
+  watchPostEffectForAMapEvent(
+    mapRef,
+    {} as UseAmapFitViewPropsForListeners,
+    handleMoveEndOrZomEnd,
+    ["onDragEnd"]
+  );
+  return { registerFitVeiw, setFitView };
+};
+
+// 目前需求暂时只需要 marker
+class SimpleGmapOverLayerGroup extends Set<GmapOverlay> {
+  getBound() {
+    const bound = new google.maps.LatLngBounds();
+    for (const overlay of this.values()) {
+      const position =
+        overlay instanceof google.maps.Marker ? overlay.getPosition() : overlay.position;
+      if (position) bound.extend(position);
+    }
+    return bound;
+  }
+}
+
+type UseGmapFitViewPropsForListeners = {
+  onDragEnd?: MapEventHandler<AMap.Map>;
+  onZoom_changed?: MapEventHandler<AMap.Map>;
+};
+export const useGmapFitView = (props: UseMapFitViewProps<google.maps.Map>) => {
+  const { mapRef, autoFitTimeout } = props;
+  const { executeMapApi } = useMapEventSource();
+  const overlayGroup = new SimpleGmapOverLayerGroup();
+  let timer: number | undefined = undefined;
+  const registerFitVeiw: RegisterOverlay<GmapOverlay> = {
+    add: (overlay: GmapOverlay) => {
+      overlayGroup.add(overlay);
+    },
+    remove: (overlay: GmapOverlay) => {
+      overlayGroup.delete(overlay);
+    },
+  };
+  const setFitView = () => {
+    const map = mapRef.value;
+    if (!map) return;
+    const vw = window.innerWidth / 100;
+    const [top, right, bottom, left] = props.padding ?? [0, 0, 0, 0];
+    executeMapApi(() =>
+      map.fitBounds(overlayGroup.getBound(), {
+        top: top * vw,
+        right: right * vw,
+        bottom: bottom * vw,
+        left: left * vw,
+      })
+    );
+  };
+  const handleMoveEnd = (name: string) => {
+    const eventSource = getMapEvnetSource();
+    console.log("handleMoveEndOrZomEnd name, eventSource = ", name, eventSource);
+    if (!autoFitTimeout || eventSource !== "user") return;
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      timer = undefined;
+      setFitView();
+    }, autoFitTimeout);
+  };
+  const handleZoomChange = debounce(handleMoveEnd, GOOGLE_MAP_ZOOM_CHANGE_DEBOUNCE_TIMEOUT);
+  watchPostEffectForGMapEvent(mapRef, {} as UseGmapFitViewPropsForListeners, handleMoveEnd, [
+    "onDragEnd",
+  ]);
+  watchPostEffectForGMapEvent(mapRef, {} as UseGmapFitViewPropsForListeners, handleZoomChange, [
+    "onZoom_changed",
+  ]);
+  return { registerFitVeiw, setFitView };
+};
+
+export const useMapFitView = (props: UseMapFitViewProps) => {
+  const { supplier } = useMapSupplier();
+  return supplier === "gmap"
+    ? useGmapFitView(props as UseMapFitViewProps<google.maps.Map>)
+    : useAmapFitView(props as UseMapFitViewProps<AMap.Map>);
+};

package/src/hooks/useMapLoader.ts

@@ -0,0 +1,164 @@
+import { load as loadAmap } from "@amap/amap-jsapi-loader";
+import { Loader, LoaderOptions } from "@googlemaps/js-api-loader";
+import { computed, Ref, shallowRef } from "vue-demi";
+import type { VueNode } from "../types/helper";
+import { watchPostEffectForDeepOption } from "../utils/compare";
+
+export const DEFAULT_AMAP_PLUGINS: AmapLoaderProps["plugins"] = [
+  "AMap.Geolocation",
+  "AMap.Geocoder",
+  "AMap.PlaceSearch",
+  "AMap.Driving",
+  "AMap.Walker",
+];
+export const DEFAULT_GMAP_LIBRARIES: LoaderOptions["libraries"] = ["marker", "places", "geometry"];
+
+export enum Status {
+  LOADING = "LOADING",
+  FAILURE = "FAILURE",
+  SUCCESS = "SUCCESS",
+}
+type AMapLoaderOptions = Parameters<typeof loadAmap>[0];
+declare global {
+  interface Window {
+    _AMapSecurityConfig: {
+      securityJsCode?: string;
+      serviceHost?: string;
+    };
+  }
+}
+export interface AmapLoaderProps
+  extends Pick<GmapLoaderProps, "fallback" | "loading" | "onChange">,
+    Omit<AMapLoaderOptions, "key" | "version" | "plugins"> {
+  apiKey: string;
+  apiSecret?: string;
+  apiServiceHost?: string;
+  version?: string;
+  plugins?: `AMap.${AMap.PluginName}`[];
+}
+
+export const useAmapLoader = (props: AmapLoaderProps) => {
+  const { onChange } = props;
+  let resolveLoader: () => void;
+  let rejectLoader: () => void;
+  const readyPromise = new Promise<undefined>((resolve, reject) => {
+    resolveLoader = resolve as () => void;
+    rejectLoader = reject;
+  });
+  const statusRef = shallowRef(Status.LOADING);
+  const optionsRef = computed(() => {
+    const { onChange, loading, fallback, apiKey, apiSecret, apiServiceHost, version, ...options } =
+      props;
+    return { ...options, key: apiKey, version: version ?? "2.0.5.16" };
+  });
+  watchPostEffectForDeepOption(
+    () => optionsRef.value,
+    (options) => {
+      const setStatusAndExecuteCallback = (status: Status) => {
+        statusRef.value = status;
+        if (status === Status.SUCCESS) resolveLoader();
+        if (status === Status.FAILURE) rejectLoader();
+        onChange?.(statusRef.value);
+      };
+      setStatusAndExecuteCallback(Status.LOADING);
+
+      window._AMapSecurityConfig = props.apiServiceHost
+        ? {
+            serviceHost: props.apiServiceHost,
+          }
+        : { securityJsCode: props.apiSecret };
+
+      loadAmap(options).then(
+        () => setStatusAndExecuteCallback(Status.SUCCESS),
+        () => setStatusAndExecuteCallback(Status.FAILURE)
+      );
+    }
+  );
+  return { statusRef, readyPromise };
+};
+
+export interface GmapLoaderProps extends LoaderOptions {
+  /**
+   * Render prop used to switch to loading component.
+   */
+  loading?: () => VueNode;
+  /**
+   * Render prop used to switch to error fallback component.
+   */
+  fallback?: () => VueNode;
+  /**
+   * Callback prop used to access `@googlemaps/js-api-loader` and `Status`.
+   *
+   * Note: The callback be executed multiple times in the lifecycle of the component.
+   */
+  onChange?: (status: Status) => void;
+}
+
+export const useGmapLoader = (props: GmapLoaderProps) => {
+  const { onChange } = props;
+  let resolveLoader: () => void;
+  let rejectLoader: () => void;
+  const readyPromise = new Promise<undefined>((resolve, reject) => {
+    resolveLoader = resolve as () => void;
+    rejectLoader = reject;
+  });
+  const statusRef = shallowRef(Status.LOADING);
+  const options = computed(() => {
+    const { onChange, fallback, loading, ...options } = props;
+    return options;
+  });
+  watchPostEffectForDeepOption(
+    () => options.value,
+    (options) => {
+      const loader = new Loader(options);
+
+      const setStatusAndExecuteCallback = (status: Status) => {
+        statusRef.value = status;
+        if (status === Status.SUCCESS) resolveLoader();
+        if (status === Status.FAILURE) rejectLoader();
+        onChange?.(statusRef.value);
+      };
+
+      setStatusAndExecuteCallback(Status.LOADING);
+
+      loader.load().then(
+        () => setStatusAndExecuteCallback(Status.SUCCESS),
+        () => setStatusAndExecuteCallback(Status.FAILURE)
+      );
+    }
+  );
+  return { statusRef, readyPromise };
+};
+
+export type MapSupplier = "gmap" | "amap";
+export interface UseMapLoaderOutput {
+  statusRef: Ref<Status>;
+  readyPromise: Promise<undefined>;
+}
+export interface UseMapLoaderProps {
+  gmapKey: string;
+  amapKey: string;
+  amapSecret?: string;
+  amapServiceHost?: string;
+  supplier: MapSupplier;
+  language?: "en" | "zh";
+  onChange?: (status: Status) => any;
+}
+export const useMapLoader = (props: UseMapLoaderProps): UseMapLoaderOutput => {
+  const { gmapKey, amapKey, amapSecret, amapServiceHost, supplier, language, onChange } = props;
+  return supplier === "gmap"
+    ? useGmapLoader({
+        apiKey: gmapKey,
+        language,
+        version: "beta",
+        libraries: DEFAULT_GMAP_LIBRARIES,
+        onChange,
+      })
+    : useAmapLoader({
+        apiKey: amapKey,
+        apiSecret: amapSecret,
+        apiServiceHost: amapServiceHost,
+        plugins: DEFAULT_AMAP_PLUGINS,
+        onChange,
+      });
+};

package/src/hooks/useMapPlace.ts

@@ -1,19 +1,17 @@
 import { reactive, Ref, watch } from "vue-demi";
-import { useMapSupplier } from "../components/MapProvider/useMapSupplier";
 import { LANGUAGE } from "../types/helper";
-import type { MapShallowRef, Place, Point } from "../types/interface";
-import { geocoderResult2cityName, pipeAsync } from "../utils/transform";
-import { useMapReady } from "./useMapReady";
+import type { Place, Point } from "../types/interface";
+import { geocoderResult2cityName } from "../utils/transform";
+import { useMapSupplier } from "./useMapSupplier";
 import { useUpdate } from "./useUdate";
 
-export interface UseMapPlaceProps<M = AMap.Map | google.maps.Map> {
+export interface UseMapPlaceProps {
   pointRef: Ref<Point>;
-  mapRef: MapShallowRef<M>;
   onChange?: (value: Place) => any;
 }
-export const useAmapPlace = (props: UseMapPlaceProps<AMap.Map>) => {
-  const { mapRef, pointRef, onChange } = props;
-  const { readyRef } = useMapReady(mapRef);
+export const useAmapPlace = (props: UseMapPlaceProps) => {
+  const { pointRef, onChange } = props;
+  const { readyPromise } = useMapSupplier();
   const { idx: placeKey, update: updatePlace } = useUpdate();
   const place = reactive<Place>({
     lng: pointRef.value[0],
@@ -23,8 +21,8 @@ export const useAmapPlace = (props: UseMapPlaceProps<AMap.Map>) => {
   });
   watch(
     () => placeKey.value,
-    () => {
-      if (!readyRef.value) return;
+    async () => {
+      await readyPromise;
       const geocoder = new AMap.Geocoder({ lang: LANGUAGE });
       const [lng, lat] = pointRef.value;
       geocoder.getAddress(new AMap.LngLat(lng, lat), (status, result) => {
@@ -32,18 +30,20 @@ export const useAmapPlace = (props: UseMapPlaceProps<AMap.Map>) => {
           case "complete": {
             const { formattedAddress: name, addressComponent } = (result as AMap.ReGeocoderResult)
               .regeocode;
-            const cityName = addressComponent.city ?? addressComponent.province;
+            const cityName = addressComponent.city
+              ? addressComponent.city
+              : addressComponent.province;
             place.name = name;
             place.lng = lng;
             place.lat = lat;
             place.cityName = cityName;
-            pipeAsync(onChange)?.({ lng, lat, name, cityName });
+            onChange?.({ lng, lat, name, cityName });
             return;
           }
 
           case "no_data":
             place.name = "";
-            pipeAsync(onChange)?.({ lng, lat, name: "" });
+            onChange?.({ lng, lat, name: "" });
             return;
           case "error":
             throw result;
@@ -54,15 +54,15 @@ export const useAmapPlace = (props: UseMapPlaceProps<AMap.Map>) => {
   return { place, updatePlace };
 };
 
-export const useGmapPlace = (props: UseMapPlaceProps<google.maps.Map>) => {
-  const { mapRef, pointRef, onChange } = props;
-  const { readyRef } = useMapReady(mapRef);
+export const useGmapPlace = (props: UseMapPlaceProps) => {
+  const { pointRef, onChange } = props;
+  const { readyPromise } = useMapSupplier();
   const { idx: placeKey, update: updatePlace } = useUpdate();
   const place = reactive<Place>({ lng: pointRef.value[0], lat: pointRef.value[1], name: "" });
   watch(
     () => placeKey.value,
     async () => {
-      if (!readyRef.value) return;
+      await readyPromise;
       const geocoder = new google.maps.Geocoder();
       const [lng, lat] = pointRef.value;
       const { results } = await geocoder.geocode({ language: LANGUAGE, location: { lng, lat } });
@@ -71,7 +71,7 @@ export const useGmapPlace = (props: UseMapPlaceProps<google.maps.Map>) => {
       place.name = name;
       place.lng = lng;
       place.lat = lat;
-      pipeAsync(onChange)?.({ lng, lat, name, cityName });
+      onChange?.({ lng, lat, name, cityName });
     }
   );
   return { place, updatePlace };
@@ -79,7 +79,5 @@ export const useGmapPlace = (props: UseMapPlaceProps<google.maps.Map>) => {
 
 export const useMapPlace = (props: UseMapPlaceProps) => {
   const { supplier } = useMapSupplier();
-  return supplier === "gmap"
-    ? useGmapPlace(props as UseMapPlaceProps<google.maps.Map>)
-    : useAmapPlace(props as UseMapPlaceProps<AMap.Map>);
+  return supplier === "gmap" ? useGmapPlace(props) : useAmapPlace(props);
 };

package/src/hooks/useMapRecomendPlace.ts

@@ -1,9 +1,8 @@
 import { reactive, ref, Ref, watch } from "vue-demi";
-import { useMapSupplier } from "../components/MapProvider/useMapSupplier";
-import type { MapShallowRef, Place, Point } from "../types/interface";
-import { pipeAsync, place2point } from "../utils/transform";
+import type { Place, Point } from "../types/interface";
+import { place2point } from "../utils/transform";
 import { useAmapPlace, useGmapPlace, UseMapPlaceProps } from "./useMapPlace";
-import { useMapReady } from "./useMapReady";
+import { useMapSupplier } from "./useMapSupplier";
 import { useUpdate } from "./useUdate";
 
 const findAmapNearestPlace = (place: Place, candidates: Place[]) => {
@@ -30,8 +29,7 @@ const findGmapNearestPlace = (place: Place, candidates: Place[]) => {
   return { shortestPlace, shortestDistance };
 };
 
-export interface UseMapRecomendPlaceProps<M = AMap.Map | google.maps.Map, C = Record<string, any>> {
-  mapRef: MapShallowRef<M>;
+export interface UseMapRecomendPlaceProps<C = Record<string, any>> {
   pointRef: Ref<Point>;
   context?: C;
   getLimit: (context?: C) => number;
@@ -39,58 +37,53 @@ export interface UseMapRecomendPlaceProps<M = AMap.Map | google.maps.Map, C = Re
   onChangePlace?: UseMapPlaceProps["onChange"];
   onChange?: (place: Place) => any;
 }
-export const useAmapRecomendPlace = <C>(props: UseMapRecomendPlaceProps<AMap.Map, C>) => {
-  const { pointRef, mapRef, getRecomendPlace, getLimit, context, onChange, onChangePlace } = props;
+export const useAmapRecomendPlace = <C>(props: UseMapRecomendPlaceProps<C>) => {
+  const { pointRef, getRecomendPlace, getLimit, context, onChange, onChangePlace } = props;
   const placeCandidatesRef = ref<Place[]>([]);
   const { idx: recomendPlaceKey, update: updateRecomandPlace } = useUpdate();
-  const { readyRef } = useMapReady(mapRef);
-  const { place, updatePlace } = useAmapPlace({ pointRef, mapRef, onChange: onChangePlace });
+  const { readyPromise } = useMapSupplier();
+  const { place, updatePlace } = useAmapPlace({ pointRef, onChange: onChangePlace });
   const recomendPlace = reactive<Place>({ ...place });
   watch(
     () => recomendPlaceKey.value,
     async () => {
-      if (!readyRef.value) return;
+      await readyPromise;
       const placeCandidates = await getRecomendPlace({ ...place }, context);
       const { shortestPlace, shortestDistance } = findAmapNearestPlace(place, placeCandidates);
-      console.log("shortestPlace, shortestDistance = ", shortestPlace, shortestDistance);
       const limit = getLimit(context);
       const resultPlace = shortestDistance > limit ? place : shortestPlace;
       placeCandidatesRef.value = placeCandidates;
       Object.assign(recomendPlace, { ...resultPlace });
-      pipeAsync(onChange)?.({ ...resultPlace });
+      onChange?.({ ...resultPlace });
     }
   );
   return { recomendPlace, placeCandidates: placeCandidatesRef, updateRecomandPlace, updatePlace };
 };
 
-export const useGmapRecomendPlace = <C>(props: UseMapRecomendPlaceProps<google.maps.Map, C>) => {
-  const { pointRef, mapRef, getRecomendPlace, getLimit, context, onChange, onChangePlace } = props;
+export const useGmapRecomendPlace = <C>(props: UseMapRecomendPlaceProps<C>) => {
+  const { pointRef, getRecomendPlace, getLimit, context, onChange, onChangePlace } = props;
   const placeCandidatesRef = ref<Place[]>([]);
   const { idx: recomendPlaceKey, update: updateRecomandPlace } = useUpdate();
-  const { readyRef } = useMapReady(mapRef);
-  const { place, updatePlace } = useGmapPlace({ pointRef, mapRef, onChange: onChangePlace });
+  const { readyPromise } = useMapSupplier();
+  const { place, updatePlace } = useGmapPlace({ pointRef, onChange: onChangePlace });
   const recomendPlace = reactive<Place>({ ...place });
   watch(
     () => recomendPlaceKey.value,
     async () => {
-      if (!readyRef.value) return;
+      await readyPromise;
       const placeCandidates = await getRecomendPlace({ ...place }, context);
       const { shortestPlace, shortestDistance } = findGmapNearestPlace(place, placeCandidates);
       const limit = getLimit(context);
       const resultPlace = shortestDistance > limit ? place : shortestPlace;
       placeCandidatesRef.value = placeCandidates;
       Object.assign(recomendPlace, { ...resultPlace });
-      pipeAsync(onChange)?.({ ...resultPlace });
+      onChange?.({ ...resultPlace });
     }
   );
   return { recomendPlace, placeCandidates: placeCandidatesRef, updateRecomandPlace, updatePlace };
 };
 
-export const useMapRecomendPlace = <C>(
-  props: UseMapRecomendPlaceProps<AMap.Map | google.maps.Map, C>
-) => {
+export const useMapRecomendPlace = <C>(props: UseMapRecomendPlaceProps<C>) => {
   const { supplier } = useMapSupplier();
-  return supplier === "gmap"
-    ? useGmapRecomendPlace(props as UseMapRecomendPlaceProps<google.maps.Map>)
-    : useAmapRecomendPlace(props as UseMapRecomendPlaceProps<AMap.Map>);
+  return supplier === "gmap" ? useGmapRecomendPlace(props) : useAmapRecomendPlace(props);
 };

package/src/{components/MapProvider → hooks}/useMapSupplier.ts

@@ -1,13 +1,10 @@
 import { inject, provide } from "vue-demi";
+import type { Status, UseMapLoaderOutput, UseMapLoaderProps } from "./useMapLoader";
 
-export type MapSupplier = "gmap" | "amap";
-export interface MapSupplierPayolad {
-  gmapKey: string;
+export interface MapSupplierPayolad extends UseMapLoaderProps {
   gmapId: string;
-  amapKey: string;
-  amapSecret?: string;
-  amapServiceHost?: string;
-  supplier: MapSupplier;
+  readyPromise: UseMapLoaderOutput["readyPromise"];
+  status: Status;
 }
 const context = Symbol();
 

package/src/hooks/useOverlay.ts

@@ -0,0 +1,22 @@
+import { ShallowRef, watch } from "vue-demi";
+import type { RegisterOverlay } from "../types/interface";
+
+export interface MapRegisterOverlayProps<T> {
+  registerOverlay?: RegisterOverlay<T>;
+}
+export type AmapOverlay = Parameters<AMap.OverlayGroup["addOverlay"]>[0];
+export type GmapOverlay = google.maps.Marker | google.maps.marker.AdvancedMarkerView;
+export interface UseMapOverlayProps<T> extends MapRegisterOverlayProps<T> {
+  overlayRef: ShallowRef<T | undefined>;
+}
+export const useMapOverlay = <T>(props: UseMapOverlayProps<T>) => {
+  const { registerOverlay, overlayRef } = props;
+  watch(
+    () => overlayRef.value,
+    (overlay, prevOverlay) => {
+      if (!registerOverlay) return;
+      if (prevOverlay) registerOverlay.remove(prevOverlay);
+      if (overlay) registerOverlay.add(overlay);
+    }
+  );
+};

package/src/hooks/useWalkingRoute.ts

@@ -1,7 +1,7 @@
 import { ShallowRef, shallowRef } from "vue-demi";
-import { useMapSupplier } from "../components/MapProvider/useMapSupplier";
 import type { Point } from "../types/interface";
 import { watchPostEffectForDeepOption } from "../utils/compare";
+import { useMapSupplier } from "./useMapSupplier";
 
 export interface UseWalkingRouteProps {
   from: Point;

package/src/hooks-business/useBusinessMapAutoComplete.ts

@@ -1,15 +1,21 @@
+import type { Ref } from "vue-demi";
 import { useMapAutoComplete } from "../hooks/useMapAutoComplete";
 import { useMapBoundCity } from "../hooks/useMapCityBound";
-import type { MapShallowRef } from "../types/interface";
 
 export interface UseBusinessMapAutoCompleteProps {
-  mapRef: MapShallowRef;
-  defaultCityName: string;
+  cityNameRef: Ref<string>;
 }
 
 export const useBusinessMapAutoComplete = (props: UseBusinessMapAutoCompleteProps) => {
-  const { mapRef, defaultCityName } = props;
-  const city = useMapBoundCity({ mapRef, cityName: defaultCityName, onChange: (v) => setCity(v) });
-  const { autoCompletePlaces, setKeyword, setCity } = useMapAutoComplete({ mapRef, city });
-  return { autoCompletePlaces, setKeyword, setCity };
+  const { cityNameRef } = props;
+  const city = useMapBoundCity({
+    cityNameRef,
+    onChange: (v) => setCity(v),
+  });
+  const { autoCompletePlaces, setKeyword, setCity } = useMapAutoComplete({ city });
+  const handleKeywordInput = (e: Event) => {
+    const target = e.target as HTMLInputElement;
+    setKeyword(target.value);
+  };
+  return { autoCompletePlaces, setKeyword, setCity, handleKeywordInput };
 };

package/src/hooks-business/useBusinessMapRecomendPlace.ts

@@ -3,16 +3,15 @@ import { useGeoLocation, UseGeoLocationProps } from "../hooks/useGeoLocation";
 import { useMapDrag, UseMapDragProps } from "../hooks/useMapDrag";
 import type { UseMapPlaceProps } from "../hooks/useMapPlace";
 import { useMapRecomendPlace, UseMapRecomendPlaceProps } from "../hooks/useMapRecomendPlace";
-import type { Place, Point } from "../types/interface";
+import { useMapSupplier } from "../hooks/useMapSupplier";
+import type { MapShallowRef, Place, Point } from "../types/interface";
 
 interface CenterPlaceSource {
   source: "default" | "geo" | "drag" | "recomend" | "api";
 }
 export interface UseBusinessMapRecomendPlaceProps
-  extends Pick<
-    UseMapRecomendPlaceProps<AMap.Map | google.maps.Map, CenterPlaceSource>,
-    "getRecomendPlace" | "mapRef"
-  > {
+  extends Pick<UseMapRecomendPlaceProps<CenterPlaceSource>, "getRecomendPlace"> {
+  mapRef: MapShallowRef;
   defaultCenterPoint?: Point;
   recomendPlaceGeoLimit: number;
   recomendPlaceDragLimit: number;
@@ -35,6 +34,7 @@ export const useBusinessMapRecomendPlace = (props: UseBusinessMapRecomendPlacePr
     onChangePlace,
     onChangeRecomandPlace,
   } = props;
+  const { readyPromise } = useMapSupplier();
   const centerPlace = reactive<Place>({
     lng: defaultCenterPoint?.[0] ?? 0,
     lat: defaultCenterPoint?.[1] ?? 0,
@@ -51,17 +51,17 @@ export const useBusinessMapRecomendPlace = (props: UseBusinessMapRecomendPlacePr
   };
   if (defaultCenterPoint) {
     // default 主入口
-    Promise.resolve().then(() => {
+    readyPromise.then(() => {
       centerSource.source = "default";
       updatePlace();
     });
   }
-  const { geoLoading, geoError, geoPosition, geoCoordinate } = useGeoLocation({
-    mapRef,
-    onLoad: (value) => {
+  const { geoLoading, geoError, geoPosition, geoCoordinate, geoReady } = useGeoLocation({
+    onLoad: async (value) => {
       // geo 主入口
       // 如果设置了默认位置，就不在拿 gps 作为默认位置
       if (!defaultCenterPoint) {
+        await readyPromise;
         centerSource.source = "geo";
         centerPlace.lng = value.position[0];
         centerPlace.lat = value.position[1];
@@ -98,7 +98,6 @@ export const useBusinessMapRecomendPlace = (props: UseBusinessMapRecomendPlacePr
           throw new Error(`MyError: should not call getLimit on source: ${source}`);
       }
     },
-    mapRef,
     onChangePlace: (place) => {
       Object.assign(centerPlace, { ...place });
       if (centerSource.source !== "recomend") {
@@ -119,6 +118,7 @@ export const useBusinessMapRecomendPlace = (props: UseBusinessMapRecomendPlacePr
     geoError,
     geoPosition,
     geoCoordinate,
+    geoReady,
     centerPlace,
     centerPoint,
     placeCandidates,

package/src/index.ts

@@ -18,6 +18,8 @@ export { useGeoLocation } from "./hooks/useGeoLocation";
 export { useHeycarMap } from "./hooks/useHeycarMap";
 export { useMapAngle } from "./hooks/useMapAngle";
 export { useMapDrag } from "./hooks/useMapDrag";
+export { useMapFitView } from "./hooks/useMapFitView";
 export { useMapPlace } from "./hooks/useMapPlace";
 export { useMapRecomendPlace } from "./hooks/useMapRecomendPlace";
+export { useWalkingRoute } from "./hooks/useWalkingRoute";
 export * from "./types/interface";

package/src/types/interface.ts

@@ -23,3 +23,8 @@ export type City = {
   };
   name: string;
 };
+
+export interface RegisterOverlay<T> {
+  add: (overlay: T) => void;
+  remove: (overlay: T) => void;
+}