@heycar/heycars-map 0.1.2 → 0.1.4

package/src/components/MapProvider/MapProvider.tsx

@@ -1,10 +1,9 @@
-import { debounce } from "lodash-es";
-import { ON_CHANGE_CENTER_INTERVAL } from "../../hooks/useMapCenter";
-import { defineLagecySetup, defineSetup } from "../../types/helper";
-import { vec2lnglat } from "../../utils/transform";
+import type { SetMap } from "../../hooks/useHeycarMap";
+import { defineLagecySetup } from "../../types/helper";
+import { language2vectorMapForeign, vec2lnglat } from "../../utils/transform";
 import { Amap, AmapProps } from "../Amap";
 import { AmapLoader } from "../AmapLoader";
-import { GampProps, Gmap } from "../Gmap";
+import { Gmap, GmapProps } from "../Gmap";
 import { GmapLoader, GmapLoaderProps } from "../GmapLoader";
 import { MapSupplierPayolad, provideMapSupplier, useMapSupplier } from "./useMapSupplier";
 
@@ -20,37 +19,45 @@ export const MapProvider = defineLagecySetup(function MapProvider(
 export interface HeycarMapProps
   extends Pick<GmapLoaderProps, "fallback" | "loading">,
     Pick<AmapProps, "center" | "zoom"> {
-  onChangeCenter?: (value: [number, number]) => any;
+  language?: "en" | "zh";
+  mapRef?: SetMap<AMap.Map> | SetMap<google.maps.Map>;
+  onDragEnd?: (value: [number, number]) => any;
 }
-export const HeycarMap = defineSetup(function HeycarMap(props: HeycarMapProps, { slots, emit }) {
+export const HeycarMap = defineLagecySetup(function HeycarMap(
+  props: HeycarMapProps,
+  { slots, emit }
+) {
   const payload = useMapSupplier();
-  const gmapDebouncedEmit = debounce<Required<GampProps>["onCenter_changed"]>(({ target }) => {
+  const gmapDebouncedEmit: GmapProps["onDragEnd"] = ({ target }) => {
     const { lng, lat } = target.getCenter() as google.maps.LatLng;
-    emit("changeCenter", [lng(), lat()]);
-  }, ON_CHANGE_CENTER_INTERVAL);
-  const amapDebounceEmit = debounce<Required<AmapProps>["onMapMove"]>(({ target }) => {
+    emit("dragEnd", [lng(), lat()]);
+  };
+  const amapDebounceEmit: AmapProps["onDragEnd"] = ({ target }) => {
     const { lng, lat } = target.getCenter();
-    emit("changeCenter", [lng, lat]);
-  }, ON_CHANGE_CENTER_INTERVAL);
+    emit("dragEnd", [lng, lat]);
+  };
   return () => {
     const { gmapKey, amapKey, amapSecret, amapServiceHost, supplier, gmapId } = payload;
-    const { fallback, loading, center, zoom } = props;
+    const { mapRef: setMap, center, zoom, language = "zh" } = props;
+    const { fallback, loading } = slots;
     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}
-              onCenter_changed={gmapDebouncedEmit}
+              onDragEnd={gmapDebouncedEmit}
             >
               {children}
             </Gmap>
@@ -72,11 +79,17 @@ export const HeycarMap = defineSetup(function HeycarMap(props: HeycarMapProps, {
             loading={loading}
             fallback={fallback}
           >
-            <Amap center={center} zoom={zoom} onMapMove={amapDebounceEmit}>
+            <Amap
+              mapRef={setMap as SetMap<AMap.Map>}
+              vectorMapForeign={language2vectorMapForeign(language)}
+              center={center}
+              zoom={zoom}
+              onDragEnd={amapDebounceEmit}
+            >
               {children}
             </Amap>
           </AmapLoader>
         );
     }
   };
-});
+}).props(["center", "fallback", "loading", "mapRef", "zoom"]);

package/src/hooks/useDrivingRoute.ts

@@ -0,0 +1,73 @@
+import { ShallowRef, shallowRef, watch } from "vue-demi";
+import { useMapSupplier } from "../components/MapProvider/useMapSupplier";
+import type { Point } from "../types/interface";
+
+export interface UseDrivingRouteProps {
+  from: Point;
+  to: Point;
+}
+
+export const useADrivingRoute = (props: UseDrivingRouteProps) => {
+  const pathRef = shallowRef<Point[]>([]);
+  const amapDriving = new AMap.Driving({});
+  watch(
+    [() => props.from, () => props.to],
+    ([from, to]) => {
+      amapDriving.search(
+        AMap.LngLat.from(from),
+        AMap.LngLat.from(to),
+        { waypoints: [] },
+        (status, result) => {
+          switch (status) {
+            case "complete": {
+              let path: Point[] = [];
+              const drivingResult = result as AMap.DrivingResult;
+              for (const route of drivingResult.routes) {
+                for (const step of route.steps) {
+                  const basicStep = step as AMap.DriveStepBasic;
+                  const stepPath = basicStep.path.map<Point>(({ lng, lat }) => [lng, lat]);
+                  path = path.concat(stepPath);
+                }
+              }
+              pathRef.value = path;
+              return;
+            }
+            case "no_data":
+              return;
+            default:
+              throw result;
+          }
+        }
+      );
+    },
+    { immediate: true }
+  );
+  return pathRef;
+};
+
+export const useGDrivingRoute = (props: UseDrivingRouteProps) => {
+  const pathRef = shallowRef<Point[]>([]);
+  const gmapDirectionsService = new google.maps.DirectionsService();
+  watch([() => props.from, () => props.to], ([from, to]) => {
+    gmapDirectionsService
+      .route({
+        origin: { lng: from[0], lat: from[1] },
+        destination: { lng: to[0], lat: to[1] },
+        travelMode: google.maps.TravelMode.WALKING,
+      })
+      .then((result) => {
+        let path: Point[] = [];
+        result.routes.map((route) => {
+          const stepPath = route.overview_path.map<Point>((item) => [item.lng(), item.lat()]);
+          path = path.concat(stepPath);
+        });
+        pathRef.value = path;
+      });
+  });
+  return pathRef;
+};
+
+export const useDrivingRoute = (props: UseDrivingRouteProps): ShallowRef<Point[]> => {
+  const { supplier } = useMapSupplier();
+  return supplier === "gmap" ? useGDrivingRoute(props) : useADrivingRoute(props);
+};

package/src/hooks/useHeycarMap.ts

@@ -0,0 +1,28 @@
+import { shallowRef } from "vue-demi";
+import { useMapSupplier } from "../components/MapProvider/useMapSupplier";
+import { vec2lnglat } from "../utils/transform";
+
+export type SetMap<M> = (map: M) => void;
+
+export const useHeycarAmap = () => {
+  const amapRef = shallowRef<AMap.Map>();
+  const setMap: SetMap<AMap.Map> = (map) => {
+    amapRef.value = map;
+  };
+  const panTo = (value: [number, number]) => amapRef?.value?.panTo(value);
+  return { mapRef: amapRef, panTo, setMap };
+};
+
+export const useHeycarGamp = () => {
+  const gmapRef = shallowRef<google.maps.Map>();
+  const setMap: SetMap<google.maps.Map> = (map) => {
+    gmapRef.value = map;
+  };
+  const panTo = (value: [number, number]) => gmapRef?.value?.panTo(vec2lnglat(value));
+  return { mapRef: gmapRef, panTo, setMap };
+};
+
+export const useHeycarMap = () => {
+  const { supplier } = useMapSupplier();
+  return supplier === "gmap" ? useHeycarGamp() : useHeycarAmap();
+};

package/src/hooks/useMapAngle.ts

@@ -0,0 +1,43 @@
+import { computed, ShallowRef } from "vue";
+import { useMapSupplier } from "../components/MapProvider/useMapSupplier";
+import type { MapShallowRef, Point } from "../types/interface";
+import { vec2lnglat } from "../utils/transform";
+
+const amapComputeHeading = (from: Point, to: Point, map?: AMap.Map) => {
+  if (!map) return 0;
+  const { x: xFrom, y: yFrom } = map.lngLatToContainer(from);
+  const { x: xTo, y: yTo } = map.lngLatToContainer(to);
+  console.log("yTo - yFrom, xTo - xFrom = ", yTo - yFrom, xTo - xFrom);
+  const theta = Math.atan2(yFrom - yTo, xTo - xFrom);
+  return ((Math.PI / 2 - theta) / Math.PI) * 180;
+};
+
+export interface UseMapAngleProps<T = AMap.Map | google.maps.Map> {
+  pathRef: ShallowRef<Point[]>;
+  mapRef?: MapShallowRef<T>;
+}
+
+export const useAmapAngle = (props: UseMapAngleProps<AMap.Map>) => {
+  return computed(() => {
+    const { mapRef, pathRef } = props;
+    const [from, to] = pathRef.value;
+    if (!from || !to || !mapRef) return undefined;
+    return amapComputeHeading(from, to, mapRef.value);
+  });
+};
+
+export const useGmapAngle = (props: UseMapAngleProps<google.maps.Map>) => {
+  return computed(() => {
+    const { pathRef } = props;
+    const [from, to] = pathRef.value;
+    if (!from || !to) return undefined;
+    return google.maps.geometry.spherical.computeHeading(vec2lnglat(from), vec2lnglat(to));
+  });
+};
+
+export const useMapAngle = (props: UseMapAngleProps) => {
+  const { supplier } = useMapSupplier();
+  return supplier === "gmap"
+    ? useGmapAngle(props as UseMapAngleProps<google.maps.Map>)
+    : useAmapAngle(props as UseMapAngleProps<AMap.Map>);
+};

package/src/hooks/useMapDrag.ts

@@ -0,0 +1,81 @@
+import { reactive, 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 { LANGUAGE, SetupContextEmitHandler } from "../types/helper";
+import type { MapShallowRef } from "../types/interface";
+import { watchPostEffectForAMapEvent, watchPostEffectForGMapEvent } from "../utils/compare";
+
+export const ON_CHANGE_CENTER_INTERVAL = 200;
+export interface UseMapCenterPlace {
+  lng: number;
+  lat: number;
+  name: string;
+}
+export const useAmapDrag = (amapRef: ShallowRef<AMap.Map | undefined>) => {
+  const centerPlace = reactive<UseMapCenterPlace>({ lng: 0, lat: 0, name: "" });
+  const isDragging = ref(false);
+  const emitDragStart: SetupContextEmitHandler<Pick<AmapProps, "onDragStart">> = () => {
+    Promise.resolve().then(() => (isDragging.value = true));
+  };
+  const emitDragEnd: SetupContextEmitHandler<Pick<AmapProps, "onDragEnd">> = (_, { target }) => {
+    isDragging.value = false;
+    const center = target.getCenter();
+    centerPlace.lng = center.lng;
+    centerPlace.lat = center.lat;
+    const geocoder = new AMap.Geocoder({ lang: LANGUAGE });
+    geocoder.getAddress(center, (status, result) => {
+      switch (status) {
+        case "complete":
+          centerPlace.name = (result as AMap.ReGeocoderResult).regeocode.formattedAddress;
+          return;
+        case "no_data":
+          return;
+        case "error":
+          throw result;
+      }
+    });
+  };
+  watchPostEffectForAMapEvent(amapRef, {} as Pick<AmapProps, "onDragStart">, emitDragStart, [
+    "onDragStart",
+  ]);
+  watchPostEffectForAMapEvent(amapRef, {} as Pick<AmapProps, "onDragEnd">, emitDragEnd, [
+    "onDragEnd",
+  ]);
+  return { centerPlace, isDragging };
+};
+
+export const useGmapDrag = (gmapRef: ShallowRef<google.maps.Map | undefined>) => {
+  const centerPlace = reactive<UseMapCenterPlace>({ lng: 0, lat: 0, name: "" });
+  const isDragging = ref(false);
+  const emitDragStart: SetupContextEmitHandler<Pick<GmapProps, "onDragStart">> = () => {
+    Promise.resolve().then(() => (isDragging.value = true));
+  };
+  const emitDragEnd: SetupContextEmitHandler<Pick<GmapProps, "onDragEnd">> = async () => {
+    isDragging.value = false;
+    const center = gmapRef.value?.getCenter();
+    if (!center) return;
+    const lng = center?.lng();
+    const lat = center?.lat();
+    if (lng) centerPlace.lng = lng;
+    if (lat) centerPlace.lat = lat;
+    const geocoder = new google.maps.Geocoder();
+    const { results } = await geocoder.geocode({ language: LANGUAGE, location: center });
+    centerPlace.name = results[0].formatted_address;
+  };
+  watchPostEffectForGMapEvent(gmapRef!, {} as Pick<GmapProps, "onDragStart">, emitDragStart, [
+    "onDragStart",
+  ]);
+  watchPostEffectForGMapEvent(gmapRef!, {} as Pick<GmapProps, "onDragEnd">, emitDragEnd, [
+    "onDragEnd",
+  ]);
+  return { centerPlace, isDragging };
+};
+
+export const useMapDrag = (mapRef: MapShallowRef) => {
+  const { supplier } = useMapSupplier();
+  // todo: 这里违反 react hook 规则，但 react 版本应该可以同时调用 useAmap 和 useGmap
+  return supplier === "gmap"
+    ? useGmapDrag(mapRef as ShallowRef<google.maps.Map | undefined>)
+    : useAmapDrag(mapRef as ShallowRef<AMap.Map | undefined>);
+};

package/src/index.ts

@@ -2,13 +2,17 @@ import "./style.css";
 export { AddressBox } from "./business-components/AddressBox";
 export { AddressLocator } from "./business-components/AddressLocator";
 export { DrivingLine } from "./business-components/DrivingLine";
+export { DrivingRoute } from "./business-components/DrivingRoute";
 export { PassengerCircle } from "./business-components/PassengerCircle";
+export { PickupPoints } from "./business-components/PickupPoints";
 export { PlaceCircle } from "./business-components/PlaceCircle";
 export { StartEndPoint } from "./business-components/StartEndPoint";
 export { TaxiCar } from "./business-components/TaxiCar";
 export { WalkingLine } from "./business-components/WalkingLine";
 export { WaveCircle } from "./business-components/WaveCircle";
-export * from "./components/Demo/BusinessDemo";
-export * from "./components/Demo/HeycarDemo";
 export * from "./components/MapProvider";
+export { useDrivingRoute } from "./hooks/useDrivingRoute";
+export { useHeycarMap } from "./hooks/useHeycarMap";
+export { useMapAngle } from "./hooks/useMapAngle";
+export { useMapDrag } from "./hooks/useMapDrag";
 export * from "./types/interface";

package/src/types/amap/driving.d.ts

@@ -42,6 +42,8 @@ declare global {
       tolls_distance: number;
       // 限行结果,0 代表限行已规避或未限行，即该路线没有限行路段,1 代表限行无法规避，即该线路有限行路段
       restriction: number;
+      // 子路段DriveStep集合
+      steps: (DriveStepBasic | DriveStepDetail)[];
     }
 
     export interface DriveStepBasic {

package/src/types/helper.ts

@@ -1,4 +1,5 @@
 import "@amap/amap-jsapi-types";
+import { kebabCase } from "lodash-es";
 import { DefineComponent, defineComponent, h, SetupContext, VNode } from "vue-demi";
 
 // vue2
@@ -16,7 +17,13 @@ type LagecyPropNames<N> = N extends `on${string}` ? never : N;
 export type EmitByProps<T, R = Required<T>> = {
   [K in keyof R as K extends `on${infer N}` ? Uncapitalize<N> : never]: R[K];
 };
-
+export type EmitPayloadByProps<T, R = Required<T>> = {
+  [K in keyof R as K extends `on${infer N}` ? Uncapitalize<N> : never]: R[K] extends (
+    props: infer P
+  ) => any
+    ? P
+    : never;
+};
 type RenderFunction = (...args: any[]) => VNodeChild;
 export type SC<P> = Omit<SetupContext<Extract<EmitByProps<P>, ObjectEmitsOptions>>, "slots"> & {
   slots: {
@@ -27,7 +34,11 @@ export type SC<P> = Omit<SetupContext<Extract<EmitByProps<P>, ObjectEmitsOptions
       : never]: P[K];
   } & { default?: Slot };
 };
-export type SetupContextEmit<P> = EmitFn<Extract<EmitByProps<P>, ObjectEmitsOptions>>;
+// SetupContextEmitHandler 是通用处理函数的类型，不是严格意义的重载类型
+export type SetupContextEmitHandler<P, E = EmitPayloadByProps<P>> = (
+  eventName: keyof E,
+  payload: E[keyof E]
+) => any;
 export type SetupOptions<P> = ComponentOptionsBase<
   P,
   Empty,
@@ -48,7 +59,13 @@ export function defineFc<P = Empty>(render: (props: P, ctx: SC<P>) => VueNode) {
     name: render.name,
     inheritAttrs: false,
     setup(_, ctx) {
-      const { attrs, slots } = ctx;
+      const { attrs, slots, emit } = ctx;
+      const originEmit = emit as EmitFn;
+      const emitKebab = (eventName: string, data: any) => {
+        const kebabName = kebabCase(eventName);
+        originEmit(eventName, data);
+        if (eventName !== kebabName) originEmit(kebabName, data);
+      };
       const props = attrs as unknown as P;
       // todo: 下面是实时订阅的实现，是否不需要。
       const proxiedSlots = new Proxy(slots, {
@@ -56,7 +73,8 @@ export function defineFc<P = Empty>(render: (props: P, ctx: SC<P>) => VueNode) {
           return Reflect.get(target, name, receiver) ?? Reflect.get(props as any, name);
         },
       });
-      return () => render(props, { ...ctx, slots: proxiedSlots } as unknown as SC<P>);
+      return () =>
+        render(props, { ...ctx, slots: proxiedSlots, emit: emitKebab } as unknown as SC<P>);
     },
   }) as DefineComponent<
     ComponentObjectPropsOptions<P>,
@@ -77,14 +95,20 @@ export function defineSetup<P>(setup: (props: P, ctx: SC<P>) => () => VueNode) {
     name: setup.name,
     inheritAttrs: false,
     setup(_, ctx) {
-      const { attrs, slots } = ctx;
+      const { attrs, slots, emit } = ctx;
       const props = attrs as unknown as P;
+      const originEmit = emit as EmitFn;
+      const emitKebab = (eventName: string, data: any) => {
+        const kebabName = kebabCase(eventName);
+        originEmit(eventName, data);
+        if (eventName !== kebabName) originEmit(kebabName, data);
+      };
       const proxiedSlots = new Proxy(slots, {
         get(target, name, receiver) {
           return Reflect.get(target, name, receiver) ?? Reflect.get(props as any, name);
         },
       });
-      return setup(props, { ...ctx, slots: proxiedSlots } as unknown as SC<P>);
+      return setup(props, { ...ctx, slots: proxiedSlots, emit: emitKebab } as unknown as SC<P>);
     },
   }) as DefineComponent<
     ComponentObjectPropsOptions<P>,
@@ -109,13 +133,19 @@ export function defineLagecySetup<P>(setup: (props: P, ctx: SC<P>) => () => VueN
         props: propNames as string[],
         setup(setupProps, ctx) {
           const props = setupProps as P;
-          const { slots } = ctx;
+          const { slots, emit } = ctx;
+          const originEmit = emit as EmitFn;
+          const emitKebab = (eventName: string, data: any) => {
+            const kebabName = kebabCase(eventName);
+            originEmit(eventName, data);
+            if (eventName !== kebabName) originEmit(kebabName, data);
+          };
           const proxiedSlots = new Proxy(slots, {
             get(target, name, receiver) {
               return Reflect.get(target, name, receiver) ?? Reflect.get(props as any, name);
             },
           });
-          return setup(props, { ...ctx, slots: proxiedSlots } as unknown as SC<P>);
+          return setup(props, { ...ctx, slots: proxiedSlots, emit: emitKebab } as unknown as SC<P>);
         },
       }) as DefineComponent<
         ComponentObjectPropsOptions<P>,

package/src/types/interface.ts

@@ -1 +1,4 @@
+import type { ShallowRef } from "vue-demi";
+
 export type Point = [number, number];
+export type MapShallowRef<M = AMap.Map | google.maps.Map> = ShallowRef<M | undefined>;

package/src/types/mapHelper.ts

@@ -0,0 +1 @@
+export type MapEventHandler<T> = (e: { target: T }) => any;

package/src/utils/transform.ts

@@ -25,3 +25,13 @@ export const property2emitEventName = (propertyName: string) => {
 export const property2mapEventName = (propertyName: string) => {
   return propertyName.slice(2).toLowerCase();
 };
+
+export type VectorMapForeign = "style_en" | "style_local" | "style_zh_cn";
+export const language2vectorMapForeign = (lang: "en" | "zh"): VectorMapForeign => {
+  switch (lang) {
+    case "en":
+      return "style_en";
+    case "zh":
+      return "style_zh_cn";
+  }
+};

package/dist/hooks/useMapCenter.d.ts

@@ -1,30 +0,0 @@
-export declare const ON_CHANGE_CENTER_INTERVAL = 200;
-export interface UseMapCenterData {
-    lng: number;
-    lat: number;
-    name: string;
-}
-export declare const useAmapCenter: () => {
-    center: {
-        lng: number;
-        lat: number;
-        name: string;
-    };
-    setCenter: (value: [number, number]) => void | undefined;
-};
-export declare const useGmapCenter: () => {
-    center: {
-        lng: number;
-        lat: number;
-        name: string;
-    };
-    setCenter: (value: [number, number]) => void | undefined;
-};
-export declare const useMapCenter: () => {
-    center: {
-        lng: number;
-        lat: number;
-        name: string;
-    };
-    setCenter: (value: [number, number]) => void | undefined;
-};

package/src/hooks/useMapCenter.ts

@@ -1,70 +0,0 @@
-import { debounce } from "lodash-es";
-import { reactive } from "vue-demi";
-import type { AmapProps } from "../components/Amap";
-import { useAmap } from "../components/Amap/useAmap";
-import type { GampProps } from "../components/Gmap";
-import { useGmap } from "../components/Gmap/useGmap";
-import { useMapSupplier } from "../components/MapProvider/useMapSupplier";
-import { LANGUAGE, SetupContextEmit } from "../types/helper";
-import { watchPostEffectForAMapEvent, watchPostEffectForGMapEvent } from "../utils/compare";
-import { vec2lnglat } from "../utils/transform";
-
-export const ON_CHANGE_CENTER_INTERVAL = 200;
-export interface UseMapCenterData {
-  lng: number;
-  lat: number;
-  name: string;
-}
-export const useAmapCenter = () => {
-  const amapRef = useAmap();
-  const centerData = reactive<UseMapCenterData>({ lng: 0, lat: 0, name: "" });
-  const setCenter = (value: [number, number]) => amapRef?.value?.setCenter(value);
-  const debouncedEmit = debounce<SetupContextEmit<AmapProps>>((_, { target }) => {
-    const center = target.getCenter();
-    centerData.lng = center.lng;
-    centerData.lat = center.lat;
-    const geocoder = new AMap.Geocoder({ lang: LANGUAGE });
-    geocoder.getAddress(center, (status, result) => {
-      switch (status) {
-        case "complete":
-          centerData.name = (result as AMap.ReGeocoderResult).regeocode.formattedAddress;
-          return;
-        case "no_data":
-          return;
-        case "error":
-          throw result;
-      }
-    });
-  }, ON_CHANGE_CENTER_INTERVAL);
-  watchPostEffectForAMapEvent(amapRef!, {} as AmapProps, debouncedEmit, ["onMapMove"]);
-  return { center: centerData, setCenter };
-};
-
-export const useGmapCenter = () => {
-  const gmapRef = useGmap();
-  const centerData = reactive<UseMapCenterData>({ lng: 0, lat: 0, name: "" });
-  const setCenter = (value: [number, number]) => gmapRef?.value?.setCenter(vec2lnglat(value));
-  const debouncedEmit = debounce<SetupContextEmit<GampProps>>(async (_, { target }) => {
-    const center = target.getCenter();
-    const lng = center?.lng();
-    const lat = center?.lat();
-    if (lng) centerData.lng = lng;
-    if (lat) centerData.lat = lat;
-    const geocoder = new google.maps.Geocoder();
-    const { results } = await geocoder.geocode({ language: LANGUAGE, location: center });
-    centerData.name = results[0].formatted_address;
-  }, ON_CHANGE_CENTER_INTERVAL);
-  watchPostEffectForGMapEvent(gmapRef!, {} as GampProps, debouncedEmit, ["onCenter_changed"]);
-  return { center: centerData, setCenter };
-};
-
-export const useMapCenter = () => {
-  const payload = useMapSupplier();
-  // todo: 这里违反 react hook 规则，但 react 版本应该可以同时调用 useAmap 和 useGmap
-  switch (payload.supplier) {
-    case "gmap":
-      return useGmapCenter();
-    default:
-      return useAmapCenter();
-  }
-};