@heycar/heycars-map 0.1.9 → 0.2.0

package/src/components/Gmap/Gmap.ts

@@ -1,12 +1,13 @@
 import { computed, h, shallowRef, watchPostEffect } from "vue-demi";
 import type { SetMap } from "../../hooks/useHeycarMap";
+import { provideGmap } from "../../hooks/useMap";
+import { useMapEventSource } from "../../hooks/useMapEventSource";
 import { defineSetup } from "../../types/helper";
 import type { MapEventHandler } from "../../types/mapHelper";
 import {
   watchNoneImmediatePostEffectForDeepOption,
   watchPostEffectForGMapEvent,
 } from "../../utils/compare";
-import { provideGmap } from "./useGmap";
 export interface GmapProps extends google.maps.MapOptions {
   mapRef?: SetMap<google.maps.Map>;
   onDragStart?: MapEventHandler<google.maps.Map>;
@@ -22,19 +23,30 @@ export const Gmap = defineSetup(function Gmap(props: GmapProps, { slots, emit })
   const defaultOptions = options.value;
   const elementRef = shallowRef();
   const mapRef = shallowRef<google.maps.Map>();
+  const { executeMapApi } = useMapEventSource();
   const handleDrag: typeof emit = (name) => emit(name as any, { target: mapRef.value! });
   provideGmap(mapRef);
   watchPostEffect(() => {
     // todo 这里是否会因为 mapRef 的赋值导致不停运行？
     if (mapRef.value || !elementRef.value) return;
-    const map = new google.maps.Map(elementRef.value, { ...defaultOptions });
-    mapRef.value = map;
-    setMap?.(map);
+    let map: google.maps.Map;
+    executeMapApi(() => {
+      map = new google.maps.Map(elementRef.value, { ...defaultOptions });
+    });
+    mapRef.value = map!;
+    setMap?.(map!);
   });
+  // watch(
+  //   () => options.value.zoom,
+  //   (zoom) => {
+  //     if (zoom) mapRef.value?.setZoom(zoom);
+  //   },
+  //   { flush: "post" }
+  // );
   watchNoneImmediatePostEffectForDeepOption(
     () => options.value,
     (options) => {
-      mapRef.value?.setOptions({ ...options });
+      executeMapApi(() => mapRef.value?.setOptions({ ...options }));
     }
   );
   watchPostEffectForGMapEvent(mapRef, props, handleDrag, ["onDragStart", "onDragEnd"]);

package/src/components/GmapAdvancedMarkerView/GmapAdvancedMarkerView.ts

@@ -1,17 +1,22 @@
 import { onMounted, onUnmounted, shallowRef, watch, watchPostEffect } from "vue-demi";
+import { useGmap } from "../../hooks/useMap";
+import { GmapOverlay, MapRegisterOverlayProps, useMapOverlay } from "../../hooks/useOverlay";
 import { defineSetup } from "../../types/helper";
 import { watchNoneImmediatePostEffectForDeepOption } from "../../utils/compare";
-import { useGmap } from "../Gmap/useGmap";
 
-export type GmapAdvancedMarkerViewProps = google.maps.marker.AdvancedMarkerViewOptions;
+export type GmapAdvancedMarkerViewProps = google.maps.marker.AdvancedMarkerViewOptions &
+  MapRegisterOverlayProps<GmapOverlay>;
 
 export const GmapAdvancedMarkerView = defineSetup(function GmapAdvancedMarkerView(
   props: GmapAdvancedMarkerViewProps
 ) {
+  const { registerOverlay } = props;
   const markerRef = shallowRef<google.maps.marker.AdvancedMarkerView>();
   const mapRef = useGmap();
+  useMapOverlay({ registerOverlay, overlayRef: markerRef });
   onMounted(() => {
-    markerRef.value = new google.maps.marker.AdvancedMarkerView({ ...props });
+    const { registerOverlay, ...markerViewProps } = props;
+    markerRef.value = new google.maps.marker.AdvancedMarkerView({ ...markerViewProps });
   });
   onUnmounted(() => {
     if (!markerRef.value) return;
@@ -24,7 +29,7 @@ export const GmapAdvancedMarkerView = defineSetup(function GmapAdvancedMarkerVie
   });
   watchNoneImmediatePostEffectForDeepOption(
     () => {
-      const { content, ...restProps } = props;
+      const { content, registerOverlay, ...restProps } = props;
       return restProps;
     },
     (props) => {

package/src/components/GmapInfoWindow/GmapInfoWindow.ts

@@ -1,7 +1,7 @@
 import { computed, onMounted, onUnmounted, shallowRef, watchPostEffect } from "vue-demi";
+import { useGmap } from "../../hooks/useMap";
 import { defineSetup } from "../../types/helper";
 import { watchNoneImmediatePostEffectForDeepOption } from "../../utils/compare";
-import { useGmap } from "../Gmap/useGmap";
 
 export interface GmapInfoWindowProps extends google.maps.InfoWindowOptions {
   visible: boolean;

package/src/components/GmapLoader/GmapLoader.ts

@@ -1,72 +1,14 @@
-import { Loader, LoaderOptions } from "@googlemaps/js-api-loader";
-import { computed, shallowRef } from "vue-demi";
+import { GmapLoaderProps, Status, useGmapLoader } from "../../hooks/useMapLoader";
 import { defineSetup, VueNode } from "../../types/helper";
-import { watchPostEffectForDeepOption } from "../../utils/compare";
-
-export enum Status {
-  LOADING = "LOADING",
-  FAILURE = "FAILURE",
-  SUCCESS = "SUCCESS",
-}
-
-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;
-}
 
 /**
- * A component to wrap the loading of the Google Maps JavaScript API.
- *
- * ```
- * const MyApp = () => (
- * 	<GmapLoader apiKey={'YOUR_API_KEY'}>
- * 		<MyMapComponent />
- * 	</GmapLoader>
- * );
- * ```
- *
- * @param props
+ * Deprecated
  */
-export const GmapLoader = defineSetup(function GmapLoader(props: GmapLoaderProps, { slots, emit }) {
-  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) => {
-        emit("change", status);
-        statusRef.value = status;
-      };
-
-      setStatusAndExecuteCallback(Status.LOADING);
-
-      loader.load().then(
-        () => setStatusAndExecuteCallback(Status.SUCCESS),
-        () => setStatusAndExecuteCallback(Status.FAILURE)
-      );
-    }
-  );
+export const GmapLoader = defineSetup(function GmapLoader(props: GmapLoaderProps, { slots }) {
+  const { statusRef } = useGmapLoader(props);
   return () => {
     switch (statusRef.value) {
       case Status.SUCCESS:
-        // todo: 由于 class 无法禁止传递，所以不用 div 包裹。目前 GmapLoader 只在 HeycarMap 内部使用，能确保 slot.default 是单节点, 如果将来要开放去处，这里需要做处理
         return slots.default?.() as VueNode;
       case Status.LOADING:
         return slots.loading?.();

package/src/components/GmapMarker/GmapMarker.ts

@@ -1,11 +1,13 @@
 import { onMounted, onUnmounted, shallowRef, watchPostEffect } from "vue-demi";
+import { useGmap } from "../../hooks/useMap";
+import { GmapOverlay, MapRegisterOverlayProps, useMapOverlay } from "../../hooks/useOverlay";
 import { defineSetup } from "../../types/helper";
 import { watchNoneImmediatePostEffectForDeepOption } from "../../utils/compare";
-import { useGmap } from "../Gmap/useGmap";
 
-export type GmapMarkerProps = google.maps.MarkerOptions;
+export type GmapMarkerProps = google.maps.MarkerOptions & MapRegisterOverlayProps<GmapOverlay>;
 
 export const GmapMarker = defineSetup(function GmapMarker(props: GmapMarkerProps) {
+  const { registerOverlay } = props;
   const markerRef = shallowRef<google.maps.Marker>();
   const mapRef = useGmap();
   onMounted(() => {
@@ -14,6 +16,7 @@ export const GmapMarker = defineSetup(function GmapMarker(props: GmapMarkerProps
   onUnmounted(() => {
     markerRef.value?.setMap(null);
   });
+  useMapOverlay({ registerOverlay, overlayRef: markerRef });
   watchPostEffect(() => {
     const map = mapRef?.value;
     if (!map) return;

package/src/components/GmapPolygon/GmapPolygon.ts

@@ -1,7 +1,7 @@
 import { onMounted, onUnmounted, shallowRef, watchPostEffect } from "vue-demi";
+import { useGmap } from "../../hooks/useMap";
 import { defineSetup } from "../../types/helper";
 import { watchNoneImmediatePostEffectForDeepOption } from "../../utils/compare";
-import { useGmap } from "../Gmap/useGmap";
 
 export type GmapPolygonProps = google.maps.PolygonOptions;
 

package/src/components/GmapPolyline/GmapPolyline.ts

@@ -1,7 +1,7 @@
 import { onMounted, onUnmounted, shallowRef, watchPostEffect } from "vue-demi";
+import { useGmap } from "../../hooks/useMap";
 import { defineSetup } from "../../types/helper";
 import { watchNoneImmediatePostEffectForDeepOption } from "../../utils/compare";
-import { useGmap } from "../Gmap/useGmap";
 
 export type GmapPolylineProps = google.maps.PolylineOptions;
 

package/src/components/MapProvider/MapProvider.tsx

@@ -1,25 +1,31 @@
 import type { SetMap } from "../../hooks/useHeycarMap";
+import { GmapLoaderProps, Status, useMapLoader, UseMapLoaderProps } from "../../hooks/useMapLoader";
+import { MapSupplierPayolad, provideMapSupplier, useMapSupplier } from "../../hooks/useMapSupplier";
 import { defineLagecySetup } from "../../types/helper";
 import { language2vectorMapForeign, vec2lnglat } from "../../utils/transform";
 import { Amap, AmapProps } from "../Amap";
-import { AmapLoader } from "../AmapLoader";
 import { Gmap, GmapProps } from "../Gmap";
-import { GmapLoader, GmapLoaderProps } from "../GmapLoader";
-import { MapSupplierPayolad, provideMapSupplier, useMapSupplier } from "./useMapSupplier";
 
-export type MapProviderProps = MapSupplierPayolad;
+export type MapProviderProps = UseMapLoaderProps & Pick<MapSupplierPayolad, "gmapId">;
 export const MapProvider = defineLagecySetup(function MapProvider(
   props: MapProviderProps,
   { slots }
 ) {
-  provideMapSupplier(props);
+  const { statusRef, readyPromise } = useMapLoader(props);
+  const context = new Proxy<MapSupplierPayolad>(props as MapSupplierPayolad, {
+    get(target, name, receiver) {
+      if (name === "status") return statusRef.value;
+      if (name === "readyPromise") return readyPromise;
+      return Reflect.get(target, name, receiver);
+    },
+  });
+  provideMapSupplier(context);
   return () => <div>{slots.default?.()}</div>;
-}).props(["amapKey", "amapSecret", "amapServiceHost", "gmapId", "gmapKey", "supplier"]);
+}).props(["amapKey", "amapSecret", "amapServiceHost", "gmapId", "gmapKey", "supplier", "language"]);
 
 export interface HeycarMapProps
   extends Pick<GmapLoaderProps, "fallback" | "loading">,
     Pick<AmapProps, "center" | "zoom"> {
-  language?: "en" | "zh";
   mapRef?: SetMap<AMap.Map> | SetMap<google.maps.Map>;
   onDragEnd?: (value: [number, number]) => any;
 }
@@ -37,58 +43,35 @@ export const HeycarMap = defineLagecySetup(function HeycarMap(
     emit("dragEnd", [lng, lat]);
   };
   return () => {
-    const { gmapKey, amapKey, amapSecret, amapServiceHost, supplier, gmapId } = payload;
-    const { mapRef: setMap, center, zoom, language = "zh" } = props;
-    const { fallback, loading } = slots;
+    const { supplier, gmapId, language = "zh", status } = payload;
+    const { mapRef: setMap, center, zoom } = props;
+    if (status === Status.LOADING) return slots.loading?.();
+    if (status === Status.FAILURE) return slots.fallback?.();
     const children = slots.default?.();
     switch (supplier) {
       case "gmap":
         return (
-          <GmapLoader
-            apiKey={gmapKey}
-            language={language}
-            version="beta"
-            libraries={["marker", "places", "geometry"]}
-            loading={loading}
-            fallback={fallback}
+          <Gmap
+            mapRef={setMap as SetMap<google.maps.Map>}
+            mapId={gmapId}
+            center={center ? vec2lnglat(center) : undefined}
+            zoom={zoom}
+            onDragEnd={gmapDebouncedEmit}
           >
-            <Gmap
-              mapRef={setMap as SetMap<google.maps.Map>}
-              mapId={gmapId}
-              center={center ? vec2lnglat(center) : undefined}
-              zoom={zoom}
-              onDragEnd={gmapDebouncedEmit}
-            >
-              {children}
-            </Gmap>
-          </GmapLoader>
+            {children}
+          </Gmap>
         );
       default:
         return (
-          <AmapLoader
-            apiKey={amapKey}
-            apiSecret={amapSecret}
-            apiServiceHost={amapServiceHost}
-            plugins={[
-              "AMap.Geolocation",
-              "AMap.Geocoder",
-              "AMap.PlaceSearch",
-              "AMap.Driving",
-              "AMap.Walker",
-            ]}
-            loading={loading}
-            fallback={fallback}
+          <Amap
+            mapRef={setMap as SetMap<AMap.Map>}
+            vectorMapForeign={language2vectorMapForeign(language)}
+            center={center}
+            zoom={zoom}
+            onDragEnd={amapDebounceEmit}
           >
-            <Amap
-              mapRef={setMap as SetMap<AMap.Map>}
-              vectorMapForeign={language2vectorMapForeign(language)}
-              center={center}
-              zoom={zoom}
-              onDragEnd={amapDebounceEmit}
-            >
-              {children}
-            </Amap>
-          </AmapLoader>
+            {children}
+          </Amap>
         );
     }
   };

package/src/hooks/useDrivingRoute.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 UseDrivingRouteProps {
   from: Point;

package/src/hooks/useGeoLocation.ts

@@ -1,14 +1,14 @@
 import { ref, watch } from "vue-demi";
-import type { MapShallowRef, Point } from "../types/interface";
+import type { Point } from "../types/interface";
 
 export interface UseGeoLocationProps {
-  mapRef: MapShallowRef;
   onChange?: (value: { position: Point; coordinate: GeolocationCoordinates }) => any;
   onLoad?: (value: { position: Point; coordinate: GeolocationCoordinates }) => any;
 }
 export const useGeoLocation = (props: UseGeoLocationProps) => {
   const { onChange, onLoad } = props;
   const loading = ref(false);
+  const readyRef = ref(false);
   const errorRef = ref<GeolocationPositionError>();
   const coordinateRef = ref<GeolocationCoordinates>({
     accuracy: 0,
@@ -32,6 +32,7 @@ export const useGeoLocation = (props: UseGeoLocationProps) => {
           positionRef.value = point;
           if (loading.value) {
             loading.value = false;
+            readyRef.value = true;
             onLoad?.({ position: point, coordinate });
           }
           onChange?.({ position: point, coordinate });
@@ -53,5 +54,6 @@ export const useGeoLocation = (props: UseGeoLocationProps) => {
     geoPosition: positionRef,
     geoCoordinate: coordinateRef,
     geoLoading: loading,
+    geoReady: readyRef,
   };
 };

package/src/hooks/useHeycarMap.ts

@@ -1,6 +1,6 @@
 import { shallowRef } from "vue-demi";
-import { useMapSupplier } from "../components/MapProvider/useMapSupplier";
 import { vec2lnglat } from "../utils/transform";
+import { useMapSupplier } from "./useMapSupplier";
 
 export type SetMap<M> = (map: M) => void;
 

package/src/hooks/useMap.ts

@@ -0,0 +1,29 @@
+import { inject, provide, ShallowRef } from "vue-demi";
+import type { MapShallowRef } from "../types/interface";
+import { useMapSupplier } from "./useMapSupplier";
+
+export const amapContext = Symbol("amap");
+
+export const useAmap = () => {
+  return inject<ShallowRef<AMap.Map | undefined>>(amapContext);
+};
+export const provideAmap = (mapRef: ShallowRef<AMap.Map | undefined>) =>
+  provide(amapContext, mapRef);
+
+export const gmapContext = Symbol("gmap");
+
+export const useGmap = () => inject<ShallowRef<google.maps.Map | undefined>>(gmapContext);
+export const provideGmap = (mapRef: ShallowRef<google.maps.Map | undefined>) =>
+  provide(gmapContext, mapRef);
+
+export const useMap = () => {
+  const { supplier } = useMapSupplier();
+  const result = supplier === "gmap" ? useGmap() : useAmap();
+  return result as MapShallowRef;
+};
+export const provideMap = (mapRef: MapShallowRef) => {
+  const { supplier } = useMapSupplier();
+  return supplier === "gmap"
+    ? provideGmap(mapRef as MapShallowRef<google.maps.Map>)
+    : provideAmap(mapRef as MapShallowRef<AMap.Map>);
+};

package/src/hooks/useMapAngle.ts

@@ -1,7 +1,7 @@
 import { computed } from "vue-demi";
-import { useMapSupplier } from "../components/MapProvider/useMapSupplier";
 import type { Point } from "../types/interface";
 import { vec2lnglat } from "../utils/transform";
+import { useMapSupplier } from "./useMapSupplier";
 
 const amapComputeHeading = (from: Point, to: Point, map?: AMap.Map) => {
   if (!map) return 0;

package/src/hooks/useMapAutoComplete.ts

@@ -1,18 +1,16 @@
 import { ref, watch } from "vue-demi";
-import { useMapSupplier } from "../components/MapProvider/useMapSupplier";
-import type { AutoCompletePlace, City, MapShallowRef } from "../types/interface";
-import { useMapReady } from "./useMapReady";
+import type { AutoCompletePlace, City } from "../types/interface";
+import { useMapSupplier } from "./useMapSupplier";
 import { useUpdate } from "./useUdate";
 
-export interface UseMapAutoCompleteProps<M = AMap.Map | google.maps.Map> {
-  mapRef: MapShallowRef<M>;
+export interface UseMapAutoCompleteProps {
   city: City;
 }
 
-export const useAmapAutoComplete = (props: UseMapAutoCompleteProps<AMap.Map>) => {
-  const { city, mapRef } = props;
+export const useAmapAutoComplete = (props: UseMapAutoCompleteProps) => {
+  const { city } = props;
   const cityRef = ref(city);
-  const { readyRef } = useMapReady(mapRef);
+  const { readyPromise } = useMapSupplier();
   const keywordRef = ref("");
   const autoCompletePlacesRef = ref<AutoCompletePlace[]>([]);
   const { update, idx: updateKey } = useUpdate();
@@ -26,11 +24,11 @@ export const useAmapAutoComplete = (props: UseMapAutoCompleteProps<AMap.Map>) =>
   };
   watch(
     () => updateKey.value,
-    () => {
-      if (!readyRef.value) return;
+    async () => {
+      if (!keywordRef.value) return;
+      await readyPromise;
       const amapPlaceSearch = new AMap.PlaceSearch({ city: cityRef.value.name });
       amapPlaceSearch.search(keywordRef.value, (status, result) => {
-        console.log("status, result = ", status, result);
         switch (status) {
           case "complete": {
             autoCompletePlacesRef.value = (result as AMap.PlaceSearchResult).poiList.pois.map(
@@ -58,10 +56,10 @@ export const useAmapAutoComplete = (props: UseMapAutoCompleteProps<AMap.Map>) =>
   return { setKeyword, setCity, autoCompletePlaces: autoCompletePlacesRef };
 };
 
-export const useGmapAutoComplete = (props: UseMapAutoCompleteProps<google.maps.Map>) => {
-  const { city, mapRef } = props;
-  const cityRef = ref(city);
-  const { readyRef } = useMapReady(mapRef);
+export const useGmapAutoComplete = (props: UseMapAutoCompleteProps) => {
+  const { city } = props;
+  const cityRef = ref({ ...city });
+  const { readyPromise } = useMapSupplier();
   const keywordRef = ref("");
   const autoCompletePlacesRef = ref<AutoCompletePlace[]>([]);
   const { update, idx: updateKey } = useUpdate();
@@ -77,7 +75,8 @@ export const useGmapAutoComplete = (props: UseMapAutoCompleteProps<google.maps.M
   watch(
     () => updateKey.value,
     async () => {
-      if (!readyRef.value || !keywordRef.value) return;
+      if (!keywordRef.value) return;
+      await readyPromise;
       const gmapPlacesService = new google.maps.places.PlacesService(div);
       gmapPlacesService.textSearch(
         {
@@ -110,7 +109,5 @@ export const useGmapAutoComplete = (props: UseMapAutoCompleteProps<google.maps.M
 
 export const useMapAutoComplete = (props: UseMapAutoCompleteProps) => {
   const { supplier } = useMapSupplier();
-  return supplier === "gmap"
-    ? useGmapAutoComplete(props as UseMapAutoCompleteProps<google.maps.Map>)
-    : useAmapAutoComplete(props as UseMapAutoCompleteProps<AMap.Map>);
+  return supplier === "gmap" ? useGmapAutoComplete(props) : useAmapAutoComplete(props);
 };

package/src/hooks/useMapCityBound.ts

@@ -1,25 +1,42 @@
-import { reactive, watchEffect } from "vue-demi";
-import { useMapSupplier } from "../components/MapProvider/useMapSupplier";
+import { reactive, Ref, watch, watchEffect } from "vue-demi";
 import { LANGUAGE } from "../types/helper";
-import type { City, MapShallowRef } from "../types/interface";
-import { useMapReady } from "./useMapReady";
+import type { City } from "../types/interface";
+import { useMapSupplier } from "./useMapSupplier";
 
-export interface UseMapCityBoundProps<M = AMap.Map | google.maps.Map> {
-  mapRef: MapShallowRef<M>;
-  cityName: string;
+export interface UseMapCityBoundProps {
+  cityNameRef: Ref<string | undefined>;
   onChange?: (value: City) => any;
 }
+export const useAmapBoundCity = (props: UseMapCityBoundProps): City => {
+  const { cityNameRef, onChange } = props;
+  const city = reactive({ name: cityNameRef.value ?? "" });
+  watch(
+    () => cityNameRef.value,
+    (cityName) => {
+      const name = cityName ?? "";
+      city.name = name;
+      onChange?.({ name });
+    }
+  );
+  return city;
+};
+
 export const useGmapBoundCity = (props: UseMapCityBoundProps): City => {
-  const { mapRef, cityName, onChange } = props;
-  const { readyRef } = useMapReady(mapRef);
-  const bound = reactive<google.maps.LatLngBoundsLiteral>({
-    east: 0,
-    north: 0,
-    south: 0,
-    west: 0,
+  const { cityNameRef, onChange } = props;
+  const { readyPromise } = useMapSupplier();
+  const city = reactive<City>({
+    name: cityNameRef.value ?? "",
+    bound: {
+      east: 0,
+      north: 0,
+      south: 0,
+      west: 0,
+    },
   });
   watchEffect(async () => {
-    if (!readyRef.value) return;
+    const cityName = cityNameRef.value;
+    if (!cityName) return;
+    await readyPromise;
     const geocoder = new google.maps.Geocoder();
     // todo 这里不是唯一的
     const { results } = await geocoder.geocode({
@@ -34,19 +51,14 @@ export const useGmapBoundCity = (props: UseMapCityBoundProps): City => {
     }
     const { geometry } = results[0];
     const cityBound = geometry.bounds?.toJSON() ?? geometry.viewport.toJSON();
-    Object.assign(bound, { ...cityBound });
+    city.name = cityName;
+    city.bound = cityBound;
     onChange?.({ name: cityName, bound: cityBound });
   });
-  return { bound, name: cityName };
-};
-
-export const useAmapBoundCity = (props: UseMapCityBoundProps): City => {
-  return { name: props.cityName };
+  return city;
 };
 
 export const useMapBoundCity = (props: UseMapCityBoundProps) => {
   const { supplier } = useMapSupplier();
-  return supplier === "gmap"
-    ? useGmapBoundCity(props as UseMapCityBoundProps<google.maps.Map>)
-    : useAmapBoundCity(props as UseMapCityBoundProps<AMap.Map>);
+  return supplier === "gmap" ? useGmapBoundCity(props) : useAmapBoundCity(props);
 };

package/src/hooks/useMapDrag.ts

@@ -1,11 +1,11 @@
 import { ref, type ShallowRef } from "vue-demi";
 import type { AmapProps } from "../components/Amap";
 import type { GmapProps } from "../components/Gmap";
-import { useMapSupplier } from "../components/MapProvider/useMapSupplier";
 import type { SetupContextEmitHandler } from "../types/helper";
 import type { Point } from "../types/interface";
 import { watchPostEffectForAMapEvent, watchPostEffectForGMapEvent } from "../utils/compare";
 import { pipeAsync } from "../utils/transform";
+import { useMapSupplier } from "./useMapSupplier";
 
 export const ON_CHANGE_CENTER_INTERVAL = 200;
 

package/src/hooks/useMapEventSource.ts

@@ -0,0 +1,20 @@
+export type MapEventSource = "api" | "user";
+let mapEventSource: MapEventSource = "user";
+
+export const getMapEvnetSource = () => mapEventSource;
+
+export const useMapEventSource = () => {
+  const executeMapApi = (fn: () => void) => {
+    mapEventSource = "api";
+    try {
+      fn();
+      setTimeout(() => {
+        mapEventSource = "user";
+      }, 100);
+    } catch (err) {
+      mapEventSource = "user";
+      throw err;
+    }
+  };
+  return { executeMapApi };
+};