@heycar/heycars-map 0.1.0 → 0.1.2

package/dist/style.css

@@ -1 +1 @@
-._130jqet0{display:flex;flex-direction:column;align-items:center;margin-bottom:-1.6vw}._130jqet1{padding:2.13vw 4.5vw 2.67vw 4.27vw;display:flex;align-items:center;background:linear-gradient(90deg,#79AFFF 0%,#5C8DFF 32%,#507FFF 75%,#4471FF 100%);border-radius:3.2vw}._130jqet2{font-size:3.47vw;font-family:PingFangSC-Semibold,PingFang SC;font-weight:600;color:#fff;line-height:4.8vw;white-space:nowrap}._130jqet3{font-size:2.93vw;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#eafaf8;line-height:4.27vw;white-space:nowrap;opacity:.8}._130jqet4{margin-left:3.2vw;width:1.44vw;height:2.4vw}._130jqet5{width:.8vw;height:4vw;background:#4C80FF;border-radius:0vw 0vw 26.67vw 26.67vw;z-index:1}._130jqet6{margin-top:-1.5vw;width:3.2vw;height:3.2vw}.tdbf070{width:7.1045vw;height:10.93vw;display:flex}._18fnvd20{display:flex;margin-bottom:-8.135vw;width:16.27vw;height:16.27vw}._21u5t50{display:flex;align-items:center}._21u5t51{margin-left:-2.265vw}._21u5t52{margin-bottom:-2.265vw;margin-left:calc(50% - 2.265vw)}._21u5t53{display:flex;width:4.53vw;height:4.53vw}._21u5t54{font-size:3.47vw;font-family:PingFangSC-Semibold,PingFang SC;font-weight:600;color:#243e66;line-height:4.53vw;white-space:nowrap}.in1agy0{margin-bottom:-.4vw;display:flex;flex-direction:column;align-items:center}.in1agy1{padding:1.07vw 2.4vw 1.6vw 2.67vw;background:#FFFFFF;box-shadow:0 .53vw 2.4vw #3f3f3f33;border-radius:2.13vw}.in1agy2{padding:2.67vw 2.67vw 2.4vw 3.2vw;background:#FFFFFF;box-shadow:0 0 2.67vw #4e556c26;border-radius:4.8vw;font-size:3.2vw;font-family:PingFangSC-Medium,PingFang SC;font-weight:500;color:#1e1e1e;line-height:4.53vw;white-space:nowrap}.in1agy3{font-size:3.2vw;font-family:PingFangSC-Medium,PingFang SC;font-weight:500;color:#1e1e1e;line-height:4.53vw;white-space:nowrap}.in1agy4{font-size:2.4vw;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#7e7e7e;line-height:3.47vw;white-space:nowrap}.in1agy5{color:#4471ff;font-family:PingFangSC-Medium,PingFang SC;font-weight:500}.in1agy6{margin-top:1.33vw;width:6.192vw;height:7.998vw}.in1agy7{margin-top:2.4vw;width:6.192vw;height:7.998vw}._15yrkbw1{margin-top:1.87vw;margin-bottom:-5.5vw;width:6vw;height:11vw}@keyframes sjs3320{0%{transform:scale(0);opacity:1}33.33%{transform:scale(.5);opacity:1}66.66%{transform:scale(1);opacity:0}to{transform:scale(1);opacity:0}}@keyframes sjs3321{0%{transform:scale(0);opacity:0}33.33%{transform:scale(0);opacity:1}66.66%{transform:scale(.5);opacity:1}to{transform:scale(1);opacity:0}}.sjs3322{display:flex;margin-bottom:-30.935vw;width:61.87vw;height:61.87vw;animation-name:sjs3320;animation-duration:3s;animation-iteration-count:infinite;animation-timing-function:linear}.sjs3323{animation-name:sjs3321}.nb7oxq0{width:100vw;height:100vh}
+._15rq2xn0{display:flex;flex-direction:column;align-items:center;margin-bottom:-1.6vw}._15rq2xn1{padding:2.13vw 4.5vw 2.67vw 4.27vw;display:flex;align-items:center;background:linear-gradient(90deg,#79AFFF 0%,#5C8DFF 32%,#507FFF 75%,#4471FF 100%);border-radius:3.2vw}._15rq2xn2{font-size:3.47vw;font-family:PingFangSC-Semibold,PingFang SC;font-weight:600;color:#fff;line-height:4.8vw;white-space:nowrap}._15rq2xn3{font-size:2.93vw;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#eafaf8;line-height:4.27vw;white-space:nowrap;opacity:.8}._15rq2xn4{margin-left:3.2vw;width:1.44vw;height:2.4vw}._15rq2xn5{width:.8vw;height:4vw;background:#4C80FF;border-radius:0vw 0vw 26.67vw 26.67vw;z-index:1}._15rq2xn6{margin-top:-1.5vw;width:3.2vw;height:3.2vw}.rgf09w0{width:7.1045vw;height:10.93vw;display:flex}._1l6offo0{display:flex;margin-bottom:-8.135vw;width:16.27vw;height:16.27vw}.fhyw80{display:flex;align-items:center}.fhyw81{margin-left:-2.265vw}.fhyw82{margin-bottom:-2.265vw;margin-left:calc(50% - 2.265vw)}.fhyw83{display:flex;width:4.53vw;height:4.53vw}.fhyw84{font-size:3.47vw;font-family:PingFangSC-Semibold,PingFang SC;font-weight:600;color:#243e66;line-height:4.53vw;white-space:nowrap}._4a4ovk0{margin-bottom:-.4vw;display:flex;flex-direction:column;align-items:center}._4a4ovk1{padding:1.07vw 2.4vw 1.6vw 2.67vw;background:#FFFFFF;box-shadow:0 .53vw 2.4vw #3f3f3f33;border-radius:2.13vw}._4a4ovk2{padding:2.67vw 2.67vw 2.4vw 3.2vw;background:#FFFFFF;box-shadow:0 0 2.67vw #4e556c26;border-radius:4.8vw;font-size:3.2vw;font-family:PingFangSC-Medium,PingFang SC;font-weight:500;color:#1e1e1e;line-height:4.53vw;white-space:nowrap}._4a4ovk3{font-size:3.2vw;font-family:PingFangSC-Medium,PingFang SC;font-weight:500;color:#1e1e1e;line-height:4.53vw;white-space:nowrap}._4a4ovk4{font-size:2.4vw;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#7e7e7e;line-height:3.47vw;white-space:nowrap}._4a4ovk5{color:#4471ff;font-family:PingFangSC-Medium,PingFang SC;font-weight:500}._4a4ovk6{margin-top:1.33vw;width:6.192vw;height:7.998vw}._4a4ovk7{margin-top:2.4vw;width:6.192vw;height:7.998vw}._65j3sr1{margin-top:1.87vw;margin-bottom:-5.5vw;width:6vw;height:11vw}@keyframes rrvp0y0{0%{transform:scale(0);opacity:1}33.33%{transform:scale(.5);opacity:1}66.66%{transform:scale(1);opacity:0}to{transform:scale(1);opacity:0}}@keyframes rrvp0y1{0%{transform:scale(0);opacity:0}33.33%{transform:scale(0);opacity:1}66.66%{transform:scale(.5);opacity:1}to{transform:scale(1);opacity:0}}.rrvp0y2{display:flex;margin-bottom:-30.935vw;width:61.87vw;height:61.87vw;animation-name:rrvp0y0;animation-duration:3s;animation-iteration-count:infinite;animation-timing-function:linear}.rrvp0y3{animation-name:rrvp0y1}.c8adwd0{width:100vw;height:100vh}

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.0",
+  "version": "0.1.2",
   "type": "module",
   "scripts": {
     "dev": "vite -c vite.config.dev.ts",
@@ -91,4 +91,4 @@
   "engines": {
     "node": ">=16.0.0"
   }
-}
+}

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) {

package/vite.config.ts

@@ -16,6 +16,7 @@ const pluginVue = isVue2 ? pluginVue2 : pluginVue3;
 export default defineConfig({
   plugins: [pluginVue(), vueJsx(), checker({ typescript: true }), eslint(), vanillaExtractPlugin()],
   build: {
+    target: "ES2019",
     lib: {
       entry: resolve(__dirname, "src/index.ts"),
       formats: ["es", "cjs"],