@heycar/heycars-map 0.1.0

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

@@ -0,0 +1,76 @@
+export {};
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace AMap {
+    export interface WalkingOptions {
+      // 展现结果的地图实例。当指定此参数后，搜索结果的标注、线路等均会自动添加到此地图上。可选
+      map?: AMap.Map;
+      // 	结果列表的HTML容器id或容器元素，提供此参数后，结果列表将在此容器中进行展示。可选
+      panel?: string | HTMLElement;
+      // 	设置隐藏路径规划的起始点图标 设置为true：隐藏图标；设置false：显示图标\n默认值为：false 显示绿色代表畅通，黄色代表轻微拥堵，红色代表比较拥堵，灰色表示无路况信息。(default false)
+      hideMarkers?: boolean;
+      // 	使用map属性时，绘制的规划线路是否显示描边。缺省为true
+      isOutline?: boolean;
+      // 	使用map属性时，绘制的规划线路的描边颜色。缺省为'white'
+      outlineColor?: string;
+      // 	用于控制在路径规划结束后，是否自动调整地图视野使绘制的路线处于视口的可见范围
+      autoFitView?: boolean;
+    }
+
+    export interface WalkingRoute {
+      // 起点到终点总步行距离，单位：米
+      distance: number;
+      // 步行时间预计，单位：秒
+      time: number;
+      // 路段列表，以道路名称作为分段依据，将整个步行导航方案分隔成若干路段
+      steps: WalkStep[];
+    }
+
+    export interface WalkStep {
+      // 步行子路段描述,规则：沿 road步行 distance 米 action，例：”沿北京站街步行351米”
+      instruction: string;
+      // 步行子路段距离，单位：米
+      distance: number;
+      // 步行子路段预计使用时间，单位：秒
+      time: number;
+      // 步行子路段坐标集合
+      path: LngLat[];
+      // 道路
+      road: string;
+      // 本步行子路段完成后动作
+      action: string;
+      // 步行子路段完成后辅助动作，一般为到达某个公交站点或目的地时返回
+      assist_action: string;
+    }
+
+    export interface WalkingResult {
+      // 成功状态说明
+      info: string;
+      // 步行规划起点坐标
+      origin: LngLat;
+      // 步行规划终点坐标
+      destination: LngLat;
+      // 步行规划起点
+      start: POI;
+      // 步行规划终点
+      end: POI;
+      // 步行导航路段数目
+      count: number;
+    }
+
+    export type WalkingCallback = (
+      // 返回信息状态 可取值：'complete': result 为 WalkingResult; 'error': result为错误信息；'no_data': result 为 0
+      status: "complete" | "error" | "no_data",
+      result: WalkingResult | Error | 0
+    ) => void;
+
+    export class Walking {
+      constructor(option: WalkingOptions);
+      // 根据起点、终点坐标，实现步行路线规划
+      search(origin: LngLat, destination: LngLat, callback: WalkingCallback): void;
+      // 清除搜索的结果
+      clear(): void;
+    }
+  }
+}

package/src/types/global.d.ts

@@ -0,0 +1,10 @@
+export {};
+
+declare module "vue" {
+  interface ComponentCustomProps {
+    className?: string;
+  }
+  interface HTMLAttributes {
+    className?: string;
+  }
+}

package/src/types/helper.ts

@@ -0,0 +1,139 @@
+import "@amap/amap-jsapi-types";
+import { DefineComponent, defineComponent, h, SetupContext, VNode } from "vue-demi";
+
+// vue2
+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";
+export type VNodeChild = VNode | VNodeChildren;
+export type VueNode = VNode | null | undefined;
+
+// vue3
+// export type { VNodeChild } from "vue";
+
+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];
+};
+
+type RenderFunction = (...args: any[]) => VNodeChild;
+export type SC<P> = Omit<SetupContext<Extract<EmitByProps<P>, ObjectEmitsOptions>>, "slots"> & {
+  slots: {
+    [K in keyof P as Exclude<P[K], undefined> extends RenderFunction
+      ? K extends `on${string}`
+        ? never
+        : K
+      : never]: P[K];
+  } & { default?: Slot };
+};
+
+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 function defineFc<P = Empty>(render: (props: P, ctx: SC<P>) => VueNode) {
+  return defineComponent({
+    name: render.name,
+    inheritAttrs: false,
+    setup(_, ctx) {
+      const { attrs, slots } = ctx;
+      const props = attrs as unknown as P;
+      // todo: 下面是实时订阅的实现，是否不需要。
+      const proxiedSlots = new Proxy(slots, {
+        get(target, name, receiver) {
+          return Reflect.get(target, name, receiver) ?? Reflect.get(props as any, name);
+        },
+      });
+      return () => render(props, { ...ctx, slots: proxiedSlots } as unknown as SC<P>);
+    },
+  }) as DefineComponent<
+    ComponentObjectPropsOptions<P>,
+    Empty,
+    Empty,
+    Empty,
+    Empty,
+    Empty,
+    Empty,
+    Extract<EmitByProps<P>, ObjectEmitsOptions>,
+    Extract<keyof EmitByProps<P>, string>,
+    P
+  >;
+}
+
+export function defineSetup<P>(setup: (props: P, ctx: SC<P>) => () => VueNode) {
+  return defineComponent({
+    name: setup.name,
+    inheritAttrs: false,
+    setup(_, ctx) {
+      const { attrs, slots } = ctx;
+      const props = attrs as unknown as P;
+      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>);
+    },
+  }) as DefineComponent<
+    ComponentObjectPropsOptions<P>,
+    Empty,
+    Empty,
+    Empty,
+    Empty,
+    Empty,
+    Empty,
+    Extract<EmitByProps<P>, ObjectEmitsOptions>,
+    Extract<keyof EmitByProps<P>, string>,
+    P
+  >;
+}
+
+export function defineLagecySetup<P>(setup: (props: P, ctx: SC<P>) => () => VueNode) {
+  return {
+    props: (propNames: LagecyPropNames<keyof P>[]) => {
+      return defineComponent({
+        name: setup.name,
+        inheritAttrs: false,
+        props: propNames as string[],
+        setup(setupProps, ctx) {
+          const props = setupProps as P;
+          const { slots } = ctx;
+          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>);
+        },
+      }) as DefineComponent<
+        ComponentObjectPropsOptions<P>,
+        Empty,
+        Empty,
+        Empty,
+        Empty,
+        Empty,
+        Empty,
+        Extract<EmitByProps<P>, ObjectEmitsOptions>,
+        Extract<keyof EmitByProps<P>, string>,
+        P
+      >;
+    },
+  };
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+export function Noop() {}
+
+export const createElement = h;

package/src/types/interface.ts

@@ -0,0 +1 @@
+export type Point = [number, number];

package/src/utils/compare.ts

@@ -0,0 +1,174 @@
+import { isLatLngLiteral } from "@googlemaps/typescript-guards";
+import { createCustomEqual } from "fast-equals";
+import { watch, WatchCallback, watchPostEffect } from "vue-demi";
+import type { Ref, ShallowRef, WatchOptions } from "vue/types/v3-generated";
+import type { EmitFn } from "vue/types/v3-setup-context";
+import type { EmitByProps } from "../types/helper";
+import { property2emitEventName, property2mapEventName } from "./transform";
+
+export const deepCompareEqualsForMaps = createCustomEqual((deepEqual) => (a, b) => {
+  if (isLatLngLiteral(a) || isLatLngLiteral(b)) {
+    return new google.maps.LatLng(a).equals(new google.maps.LatLng(b));
+  }
+
+  // TODO extend to other types
+
+  // use fast-equals for other objects
+  return deepEqual(a, b);
+});
+
+export function createDeepCompareMemoize<T>() {
+  let prev: T | undefined = undefined;
+
+  return function memorizedFilter(value: T): T {
+    if (!deepCompareEqualsForMaps(value, prev)) {
+      prev = value;
+    }
+    return prev as T;
+  };
+}
+
+export function useDeepCompareEffectForMaps(callback: () => () => any, dependencies: any[]) {
+  const memorizedGetters = dependencies.map(createDeepCompareMemoize);
+  watch(memorizedGetters, (value, prev, onClean) => {
+    onClean(callback());
+  });
+}
+
+export function watchNoneImmediatePostEffectForDeepOption<T>(
+  getOption: () => T,
+  callback: WatchCallback<T, T>,
+  watchOptions?: WatchOptions<false>
+) {
+  const memorizedFilter = createDeepCompareMemoize<T>();
+  return watch<T, false>(() => memorizedFilter(getOption()), callback, {
+    immediate: false,
+    flush: "post",
+    ...watchOptions,
+  });
+}
+
+export function watchPostEffectForDeepOption<T>(
+  getOption: () => T,
+  callback: WatchCallback<T, T | undefined>,
+  watchOptions?: WatchOptions<true>
+) {
+  const memorizedFilter = createDeepCompareMemoize<T>();
+  return watch<T, true>(() => memorizedFilter(getOption()), callback, {
+    immediate: true,
+    flush: "post",
+    ...watchOptions,
+  });
+}
+
+function name2setterName<N extends string>(name: N) {
+  return `set${name.charAt(0).toUpperCase()}${name.slice(1)}`;
+}
+type AnyFunction = (...args: any[]) => any;
+type PickSettableOptions<T, S, K extends keyof T = keyof T> = K extends `set${infer N}`
+  ? Uncapitalize<N> extends S
+    ? {
+        name: Uncapitalize<N>;
+        defaultValue?: T[K] extends AnyFunction ? Parameters<T[K]>[0] : never;
+      }
+    : never
+  : never;
+
+export function watchPostEffectForMapProperty<T, P>(
+  targetRef: ShallowRef<T | undefined> | Ref<T | undefined>,
+  props: P,
+  nameOptions: PickSettableOptions<T, keyof P>[],
+  watchOptions?: WatchOptions<true>
+) {
+  const deps = nameOptions.map(
+    ({ name }) =>
+      () =>
+        props[name]
+  );
+  watch(
+    deps,
+    (values, prevValues) => {
+      const target = targetRef.value;
+      if (!target) return;
+      for (const [idx, value] of values.entries()) {
+        const { name, defaultValue } = nameOptions[idx];
+        const prev = prevValues[idx];
+        if (!deepCompareEqualsForMaps(value, prev)) {
+          (target[name2setterName(name) as keyof T] as any)(value ?? defaultValue);
+        }
+      }
+    },
+    {
+      immediate: true,
+      flush: "post",
+      ...watchOptions,
+    }
+  );
+}
+
+export function watchNoneImmediatePostEffectForMapProperty<T, P>(
+  targetRef: ShallowRef<T | undefined> | Ref<T | undefined>,
+  props: P,
+  nameOptions: PickSettableOptions<T, keyof P>[],
+  watchOptions?: WatchOptions<false>
+) {
+  return watchPostEffectForMapProperty(targetRef, props, nameOptions, {
+    immediate: false,
+    ...watchOptions,
+  } as unknown as WatchOptions<true>);
+}
+
+type NamesRestrict<N, S extends string> = N extends `on${string}`
+  ? Lowercase<N> extends `on${S}`
+    ? N
+    : never
+  : never;
+export 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>[]
+) {
+  watchPostEffect((onCleanup) => {
+    const target = targetRef.value;
+    if (!target) return;
+    const cleanList: (() => void)[] = [];
+    for (const name of propertyNames) {
+      const emitEventName = property2emitEventName(name);
+      const eventName = property2mapEventName(name) as AMap.EventType;
+      const handler = (e: any) => (emit as EmitFn)(emitEventName, e);
+      target.on(eventName, handler);
+      cleanList.push(() => target?.off(eventName, handler));
+    }
+    onCleanup(() => {
+      for (const clean of cleanList) clean();
+    });
+  });
+}
+
+export 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>[]
+) {
+  watchPostEffect((onCleanup) => {
+    const target = targetRef.value;
+    if (!target) return;
+    const cleanList: (() => void)[] = [];
+    for (const name of propertyNames) {
+      const emitEventName = property2emitEventName(name);
+      const eventName = property2mapEventName(name);
+      const handler = (e: any) => (emit as EmitFn)(emitEventName, e);
+      const listener = target.addListener(eventName, handler);
+      cleanList.push(() => google.maps.event.removeListener(listener));
+    }
+    onCleanup(() => {
+      for (const clean of cleanList) clean();
+    });
+  });
+}

package/src/utils/dom.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes, ImgHTMLAttributes } from "vue/types/jsx";
+
+export const createDom = (
+  tag: string,
+  props?: HTMLAttributes | ImgHTMLAttributes,
+  innerHtml?: string
+) => {
+  const { class: className, ...restProps } = props ?? {};
+  const elm = document.createElement(tag);
+  if (className) elm.className = className;
+  Object.assign(elm, restProps);
+  if (innerHtml) elm.innerHTML = innerHtml;
+  return elm;
+};

package/src/utils/transform.ts

@@ -0,0 +1,27 @@
+export const vec2lnglat = ([lng, lat]: [number, number]): google.maps.LatLngLiteral => ({
+  lng,
+  lat,
+});
+
+export interface AsteriskItem {
+  type: "normal" | "emphasize";
+  value: string;
+}
+export const decodeAsterisk = (encodedValue: string): AsteriskItem[] => {
+  const result: AsteriskItem[] = [];
+  const tokens = encodedValue.split("*");
+  for (const [idx, token] of tokens.entries()) {
+    if (!token) continue;
+    result.push({ value: token, type: idx % 2 === 0 ? "normal" : "emphasize" });
+  }
+  return result;
+};
+
+export const property2emitEventName = (propertyName: string) => {
+  const firstLetter = propertyName.charAt(2).toLocaleLowerCase();
+  return `${firstLetter}${propertyName.slice(3)}`;
+};
+
+export const property2mapEventName = (propertyName: string) => {
+  return propertyName.slice(2).toLowerCase();
+};

package/src/vite-env.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_GMAP_API_KEY: string;
+  readonly VITE_GMAP_MAP_ID: string;
+  readonly VITE_AMAP_API_KEY: string;
+  readonly VITE_AMAP_API_SECRET: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/todo.md

@@ -0,0 +1 @@
+https://dawchihliou.github.io/articles/building-custom-google-maps-marker-react-component-like-airbnb-in-nextjs

package/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "strict": true,
+    "jsx": "preserve",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["ESNext", "DOM"],
+    "skipLibCheck": true,
+    "noEmit": true,
+    "importsNotUsedAsValues": "error"
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "../vite.config.dev.ts"
+  ],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.dev.ts

@@ -0,0 +1,17 @@
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+import pluginVue3 from "@vitejs/plugin-vue";
+import vue3Jsx from "@vitejs/plugin-vue-jsx";
+import pluginVue2 from "@vitejs/plugin-vue2";
+import vue2Jsx from "@vitejs/plugin-vue2-jsx";
+import { defineConfig } from "vite";
+import checker from "vite-plugin-checker";
+import eslint from "vite-plugin-eslint";
+import { isVue2 } from "vue-demi";
+
+const vueJsx = isVue2 ? vue2Jsx : vue3Jsx;
+const pluginVue = isVue2 ? pluginVue2 : pluginVue3;
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [pluginVue(), vueJsx(), checker({ typescript: true }), eslint(), vanillaExtractPlugin()],
+});

package/vite.config.ts

@@ -0,0 +1,40 @@
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+import pluginVue3 from "@vitejs/plugin-vue";
+import vue3Jsx from "@vitejs/plugin-vue-jsx";
+import pluginVue2 from "@vitejs/plugin-vue2";
+import vue2Jsx from "@vitejs/plugin-vue2-jsx";
+import { resolve } from "node:path";
+import { defineConfig } from "vite";
+import checker from "vite-plugin-checker";
+import eslint from "vite-plugin-eslint";
+import { isVue2 } from "vue-demi";
+
+const vueJsx = isVue2 ? vue2Jsx : vue3Jsx;
+const pluginVue = isVue2 ? pluginVue2 : pluginVue3;
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [pluginVue(), vueJsx(), checker({ typescript: true }), eslint(), vanillaExtractPlugin()],
+  build: {
+    lib: {
+      entry: resolve(__dirname, "src/index.ts"),
+      formats: ["es", "cjs"],
+      fileName: "index",
+    },
+    rollupOptions: {
+      // make sure to externalize deps that shouldn't be bundled
+      // into your library
+      external: ["vue"],
+      output: {
+        // Provide global variables to use in the UMD build
+        // for externalized deps
+        globals: {
+          vue: "Vue",
+        },
+      },
+    },
+  },
+  optimizeDeps: {
+    exclude: ["vue-demi"],
+  },
+});