@heycar/heycars-map 0.1.1 → 0.1.2

package/dist/types/helper.d.ts

@@ -3,7 +3,7 @@ import { DefineComponent, SetupContext, VNode } from "vue-demi";
 import type { VNodeChildren } from "vue/types/umd";
 import type { ComponentOptionsBase } from "vue/types/v3-component-options";
 import type { ComponentObjectPropsOptions } from "vue/types/v3-component-props";
-import type { ObjectEmitsOptions, Slot } from "vue/types/v3-setup-context";
+import type { EmitFn, ObjectEmitsOptions, Slot } from "vue/types/v3-setup-context";
 export type VNodeChild = VNode | VNodeChildren;
 export type VueNode = VNode | null | undefined;
 type LagecyPropNames<N> = N extends `on${string}` ? never : N;
@@ -18,6 +18,7 @@ export type SC<P> = Omit<SetupContext<Extract<EmitByProps<P>, ObjectEmitsOptions
         default?: Slot;
     };
 };
+export type SetupContextEmit<P> = EmitFn<Extract<EmitByProps<P>, ObjectEmitsOptions>>;
 export type SetupOptions<P> = ComponentOptionsBase<P, Empty, Empty, Empty, Empty, Empty, Empty, Extract<EmitByProps<P>, ObjectEmitsOptions>, Extract<keyof EmitByProps<P>, string>, Empty>;
 export type Empty = Record<string, never>;
 export declare function defineFc<P = Empty>(render: (props: P, ctx: SC<P>) => VueNode): DefineComponent<ComponentObjectPropsOptions<P>, Empty, Empty, Empty, Empty, Empty, Empty, Extract<EmitByProps<P, Required<P>>, ObjectEmitsOptions>, Extract<keyof EmitByProps<P, Required<P>>, string>, P, import("vue-demi").ExtractDefaultPropTypes<ComponentObjectPropsOptions<P>>>;
@@ -27,4 +28,5 @@ export declare function defineLagecySetup<P>(setup: (props: P, ctx: SC<P>) => ()
 };
 export declare function Noop(): void;
 export declare const createElement: import("vue-demi").CreateElement;
+export declare const LANGUAGE = "zh-CN";
 export {};

package/dist/utils/compare.d.ts

@@ -16,6 +16,6 @@ type PickSettableOptions<T, S, K extends keyof T = keyof T> = K extends `set${in
 export declare function watchPostEffectForMapProperty<T, P>(targetRef: ShallowRef<T | undefined> | Ref<T | undefined>, props: P, nameOptions: PickSettableOptions<T, keyof P>[], watchOptions?: WatchOptions<true>): void;
 export declare function watchNoneImmediatePostEffectForMapProperty<T, P>(targetRef: ShallowRef<T | undefined> | Ref<T | undefined>, props: P, nameOptions: PickSettableOptions<T, keyof P>[], watchOptions?: WatchOptions<false>): void;
 type NamesRestrict<N, S extends string> = N extends `on${string}` ? Lowercase<N> extends `on${S}` ? N : never : never;
-export declare function watchPostEffectForAMapEvent<T extends AMap.Event, P, E extends string = AMap.EventType>(targetRef: ShallowRef<T | undefined> | Ref<T | undefined>, props: P, emit: EmitFn<EmitByProps<P>>, propertyNames: NamesRestrict<keyof P, E>[]): void;
-export declare function watchPostEffectForGMapEvent<T extends google.maps.MVCObject, P>(targetRef: ShallowRef<T | undefined> | Ref<T | undefined>, props: P, emit: EmitFn<EmitByProps<P>>, propertyNames: NamesRestrict<keyof P, string>[]): void;
+export declare function watchPostEffectForAMapEvent<T extends AMap.Event, P, E extends string = AMap.EventType>(targetRef: ShallowRef<T | undefined> | Ref<T | undefined> | undefined, props: P, emit: EmitFn<EmitByProps<P>>, propertyNames: NamesRestrict<keyof P, E>[]): void;
+export declare function watchPostEffectForGMapEvent<T extends google.maps.MVCObject, P>(targetRef: ShallowRef<T | undefined> | Ref<T | undefined> | undefined, props: P, emit: EmitFn<EmitByProps<P>>, propertyNames: NamesRestrict<keyof P, string>[]): void;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heycar/heycars-map",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "type": "module",
   "scripts": {
     "dev": "vite -c vite.config.dev.ts",

package/src/components/Demo/HeycarDemo.tsx

@@ -1,4 +1,5 @@
 import { AddressBox } from "../../business-components/AddressBox";
+import { useMapCenter } from "../../hooks/useMapCenter";
 import { defineSetup } from "../../types/helper";
 import { HeycarMap, MapProvider } from "../MapProvider/MapProvider";
 import * as css from "./Demo.css";
@@ -24,8 +25,22 @@ export const HeycarDemo = defineSetup(function HeycarDemo() {
         center={[0, 0]}
         zoom={3}
       >
+        <Hello />
         <AddressBox position={[0, 0]} title={"Martyrs Lawn"} description={"您将在此处上车"} />
       </HeycarMap>
     </MapProvider>
   );
 });
+
+export const Hello = defineSetup(function Hello() {
+  const { center, setCenter } = useMapCenter();
+  (window as any).setCenter = setCenter;
+  return () => {
+    console.log("center = ", { ...center });
+    return (
+      <div>
+        {center.name} | {center.lng} | {center.lat}{" "}
+      </div>
+    );
+  };
+});

package/src/components/Gmap/Gmap.ts

@@ -6,7 +6,7 @@ import {
 } from "../../utils/compare";
 import { provideGmap } from "./useGmap";
 export interface GampProps extends google.maps.MapOptions {
-  onCenter_changed?: () => void;
+  onCenter_changed?: (e: { target: google.maps.Map }) => void;
 }
 
 export const Gmap = defineSetup(function Gmap(props: GampProps, { slots, emit }) {
@@ -17,6 +17,7 @@ export const Gmap = defineSetup(function Gmap(props: GampProps, { slots, emit })
   const defaultOptions = options.value;
   const elementRef = shallowRef();
   const mapRef = shallowRef<google.maps.Map>();
+  const handleCenter_changed: typeof emit = (name) => emit(name, { target: mapRef.value! });
   provideGmap(mapRef);
   watchPostEffect(() => {
     // todo 这里是否会因为 mapRef 的赋值导致不停运行？
@@ -29,6 +30,6 @@ export const Gmap = defineSetup(function Gmap(props: GampProps, { slots, emit })
       mapRef.value?.setOptions({ ...options });
     }
   );
-  watchPostEffectForGMapEvent(mapRef, props, emit, ["onCenter_changed"]);
+  watchPostEffectForGMapEvent(mapRef, props, handleCenter_changed, ["onCenter_changed"]);
   return () => h("div", { ref: elementRef }, slots.default?.());
 });

package/src/components/MapProvider/MapProvider.tsx

@@ -1,8 +1,10 @@
+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 { Amap, AmapProps } from "../Amap";
 import { AmapLoader } from "../AmapLoader";
-import { Gmap } from "../Gmap";
+import { GampProps, Gmap } from "../Gmap";
 import { GmapLoader, GmapLoaderProps } from "../GmapLoader";
 import { MapSupplierPayolad, provideMapSupplier, useMapSupplier } from "./useMapSupplier";
 
@@ -15,10 +17,21 @@ export const MapProvider = defineLagecySetup(function MapProvider(
   return () => <div>{slots.default?.()}</div>;
 }).props(["amapKey", "amapSecret", "amapServiceHost", "gmapId", "gmapKey", "supplier"]);
 
-export type HeycarMapProps = Pick<GmapLoaderProps, "fallback" | "loading"> &
-  Pick<AmapProps, "center" | "zoom">;
-export const HeycarMap = defineSetup(function HeycarMap(props: HeycarMapProps, { slots }) {
+export interface HeycarMapProps
+  extends Pick<GmapLoaderProps, "fallback" | "loading">,
+    Pick<AmapProps, "center" | "zoom"> {
+  onChangeCenter?: (value: [number, number]) => any;
+}
+export const HeycarMap = defineSetup(function HeycarMap(props: HeycarMapProps, { slots, emit }) {
   const payload = useMapSupplier();
+  const gmapDebouncedEmit = debounce<Required<GampProps>["onCenter_changed"]>(({ 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 }) => {
+    const { lng, lat } = target.getCenter();
+    emit("changeCenter", [lng, lat]);
+  }, ON_CHANGE_CENTER_INTERVAL);
   return () => {
     const { gmapKey, amapKey, amapSecret, amapServiceHost, supplier, gmapId } = payload;
     const { fallback, loading, center, zoom } = props;
@@ -33,7 +46,12 @@ export const HeycarMap = defineSetup(function HeycarMap(props: HeycarMapProps, {
             loading={loading}
             fallback={fallback}
           >
-            <Gmap mapId={gmapId} center={center ? vec2lnglat(center) : undefined} zoom={zoom}>
+            <Gmap
+              mapId={gmapId}
+              center={center ? vec2lnglat(center) : undefined}
+              zoom={zoom}
+              onCenter_changed={gmapDebouncedEmit}
+            >
               {children}
             </Gmap>
           </GmapLoader>
@@ -54,7 +72,7 @@ export const HeycarMap = defineSetup(function HeycarMap(props: HeycarMapProps, {
             loading={loading}
             fallback={fallback}
           >
-            <Amap center={center} zoom={zoom}>
+            <Amap center={center} zoom={zoom} onMapMove={amapDebounceEmit}>
               {children}
             </Amap>
           </AmapLoader>

package/src/hooks/useMapCenter.ts

@@ -0,0 +1,70 @@
+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();
+  }
+};

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

@@ -71,6 +71,7 @@ declare global {
       addressComponent: AddressComponent;
       // 道路信息列表
       roads: Road[];
+      formattedAddress: string;
       // 道路交叉口列表
       roadinters: Roadinter[];
       // poi信息列表

package/src/types/helper.ts

@@ -5,7 +5,7 @@ import { DefineComponent, defineComponent, h, SetupContext, VNode } from "vue-de
 import type { VNodeChildren } from "vue/types/umd";
 import type { ComponentOptionsBase } from "vue/types/v3-component-options";
 import type { ComponentObjectPropsOptions } from "vue/types/v3-component-props";
-import type { ObjectEmitsOptions, Slot } from "vue/types/v3-setup-context";
+import type { EmitFn, ObjectEmitsOptions, Slot } from "vue/types/v3-setup-context";
 export type VNodeChild = VNode | VNodeChildren;
 export type VueNode = VNode | null | undefined;
 
@@ -27,7 +27,7 @@ export type SC<P> = Omit<SetupContext<Extract<EmitByProps<P>, ObjectEmitsOptions
       : never]: P[K];
   } & { default?: Slot };
 };
-
+export type SetupContextEmit<P> = EmitFn<Extract<EmitByProps<P>, ObjectEmitsOptions>>;
 export type SetupOptions<P> = ComponentOptionsBase<
   P,
   Empty,
@@ -137,3 +137,6 @@ export function defineLagecySetup<P>(setup: (props: P, ctx: SC<P>) => () => VueN
 export function Noop() {}
 
 export const createElement = h;
+
+// todo 从 provider 那边去设置
+export const LANGUAGE = "zh-CN";

package/src/utils/compare.ts

@@ -128,13 +128,13 @@ export function watchPostEffectForAMapEvent<
   P,
   E extends string = AMap.EventType
 >(
-  targetRef: ShallowRef<T | undefined> | Ref<T | undefined>,
+  targetRef: ShallowRef<T | undefined> | Ref<T | undefined> | undefined,
   props: P,
   emit: EmitFn<EmitByProps<P>>,
   propertyNames: NamesRestrict<keyof P, E>[]
 ) {
   watchPostEffect((onCleanup) => {
-    const target = targetRef.value;
+    const target = targetRef?.value;
     if (!target) return;
     const cleanList: (() => void)[] = [];
     for (const name of propertyNames) {
@@ -151,13 +151,13 @@ export function watchPostEffectForAMapEvent<
 }
 
 export function watchPostEffectForGMapEvent<T extends google.maps.MVCObject, P>(
-  targetRef: ShallowRef<T | undefined> | Ref<T | undefined>,
+  targetRef: ShallowRef<T | undefined> | Ref<T | undefined> | undefined,
   props: P,
   emit: EmitFn<EmitByProps<P>>,
   propertyNames: NamesRestrict<keyof P, string>[]
 ) {
   watchPostEffect((onCleanup) => {
-    const target = targetRef.value;
+    const target = targetRef?.value;
     if (!target) return;
     const cleanList: (() => void)[] = [];
     for (const name of propertyNames) {