@heycar/heycars-map 0.1.4 → 0.1.6

package/src/hooks/useMapRecomendPlace.ts

@@ -0,0 +1,98 @@
+import { reactive, Ref, watch } from "vue-demi";
+import { useMapSupplier } from "../components/MapProvider/useMapSupplier";
+import type { MapShallowRef, Place, Point } from "../types/interface";
+import { pipeAsync, place2point } from "../utils/transform";
+import { useAmapPlace, useGmapPlace, UseMapPlaceProps } from "./useMapPlace";
+import { useMapReady } from "./useMapReady";
+import { useUpdate } from "./useUdate";
+
+const findAmapNearestPlace = (place: Place, candidates: Place[]) => {
+  let shortestDistance = Infinity;
+  let shortestPlace = place;
+  for (const candidate of candidates) {
+    const distance = AMap.GeometryUtil.distance(place2point(place), place2point(candidate));
+    if (distance >= shortestDistance) continue;
+    shortestPlace = candidate;
+    shortestDistance = distance;
+  }
+  return { shortestPlace, shortestDistance };
+};
+
+const findGmapNearestPlace = (place: Place, candidates: Place[]) => {
+  let shortestDistance = Infinity;
+  let shortestPlace = place;
+  for (const candidate of candidates) {
+    const distance = google.maps.geometry.spherical.computeDistanceBetween(place, candidate);
+    if (distance >= shortestDistance) continue;
+    shortestPlace = candidate;
+    shortestDistance = distance;
+  }
+  return { shortestPlace, shortestDistance };
+};
+
+export interface UseMapRecomendPlaceProps<M = AMap.Map | google.maps.Map, C = Record<string, any>> {
+  mapRef: MapShallowRef<M>;
+  pointRef: Ref<Point>;
+  context?: C;
+  getLimit: (context?: C) => number;
+  getRecomendPlace: (place: Place, context?: C) => Promise<Place[]>;
+  onChangePlace?: UseMapPlaceProps["onChange"];
+  onChange?: (place: Place) => any;
+}
+export const useAmapRecomendPlace = <C>(props: UseMapRecomendPlaceProps<AMap.Map, C>) => {
+  const { pointRef, mapRef, getRecomendPlace, getLimit, context, onChange, onChangePlace } = props;
+  const { idx: recomendPlaceKey, update: updateRecomandPlace } = useUpdate();
+  const { readyRef } = useMapReady(mapRef);
+  const { place, updatePlace } = useAmapPlace({ pointRef, mapRef, onChange: onChangePlace });
+  const recomendPlace = reactive<Place>({ ...place });
+  watch(
+    () => recomendPlaceKey.value,
+    async () => {
+      debugger;
+      if (!readyRef.value) return;
+      const placeCandidates = await getRecomendPlace({ ...place }, context);
+      const { shortestPlace, shortestDistance } = findAmapNearestPlace(place, placeCandidates);
+      console.log("shortestPlace, shortestDistance = ", shortestPlace, shortestDistance);
+      const limit = getLimit(context);
+      const resultPlace = shortestDistance > limit ? place : shortestPlace;
+      Object.assign(recomendPlace, { ...resultPlace });
+      pipeAsync(onChange)?.({ ...resultPlace });
+    },
+    {
+      onTrigger(e) {
+        console.log("UseMapRecomendPlaceProps onTrigger: ", e.key, e.newValue, e.oldValue);
+      },
+    }
+  );
+  return { recomendPlace, updateRecomandPlace, updatePlace };
+};
+
+export const useGmapRecomendPlace = <C>(props: UseMapRecomendPlaceProps<google.maps.Map, C>) => {
+  const { pointRef, mapRef, getRecomendPlace, getLimit, context, onChange, onChangePlace } = props;
+  const { idx: recomendPlaceKey, update: updateRecomandPlace } = useUpdate();
+  const { readyRef } = useMapReady(mapRef);
+  const { place, updatePlace } = useGmapPlace({ pointRef, mapRef, onChange: onChangePlace });
+  const recomendPlace = reactive<Place>({ ...place });
+  watch(
+    () => recomendPlaceKey.value,
+    async () => {
+      if (!readyRef.value) return;
+      const placeCandidates = await getRecomendPlace({ ...place }, context);
+      const { shortestPlace, shortestDistance } = findGmapNearestPlace(place, placeCandidates);
+      const limit = getLimit(context);
+      const resultPlace = shortestDistance > limit ? place : shortestPlace;
+      Object.assign(recomendPlace, { ...resultPlace });
+      pipeAsync(onChange)?.({ ...resultPlace });
+    }
+  );
+  return { recomendPlace, updateRecomandPlace, updatePlace };
+};
+
+export const useMapRecomendPlace = <C>(
+  props: UseMapRecomendPlaceProps<AMap.Map | google.maps.Map, C>
+) => {
+  const { supplier } = useMapSupplier();
+  return supplier === "gmap"
+    ? useGmapRecomendPlace(props as UseMapRecomendPlaceProps<google.maps.Map>)
+    : useAmapRecomendPlace(props as UseMapRecomendPlaceProps<AMap.Map>);
+};

package/src/hooks/useUdate.ts

@@ -0,0 +1,9 @@
+import { ref } from "vue-demi";
+
+export const useUpdate = () => {
+  const idx = ref(0);
+  const update = () => {
+    idx.value += 1;
+  };
+  return { idx, update };
+};

package/src/hooks-business/useBusinessMapRecomendPlace.ts

@@ -0,0 +1,94 @@
+import { computed, reactive } from "vue-demi";
+import { useGeoLocation, UseGeoLocationProps } from "../hooks/useGeoLocation";
+import { useMapDrag, UseMapDragProps } from "../hooks/useMapDrag";
+import type { UseMapPlaceProps } from "../hooks/useMapPlace";
+import { useMapRecomendPlace, UseMapRecomendPlaceProps } from "../hooks/useMapRecomendPlace";
+import type { Place, Point } from "../types/interface";
+
+interface CenterPlaceSource {
+  source: "geo" | "drag" | "recomend";
+}
+export interface UseBusinessMapRecomendPlaceProps
+  extends Pick<
+    UseMapRecomendPlaceProps<AMap.Map | google.maps.Map, CenterPlaceSource>,
+    "getRecomendPlace" | "mapRef"
+  > {
+  recomendPlaceGeoLimit: number;
+  recomendPlaceDragLimit: number;
+  onChangeByDrag?: UseMapDragProps["onChange"];
+  onChangeGeoLocation?: UseGeoLocationProps["onChange"];
+  onChangePlace?: UseMapPlaceProps["onChange"];
+  onChangeRecomandPlace?: UseMapRecomendPlaceProps["onChange"];
+}
+export const useBusinessMapRecomendPlace = (props: UseBusinessMapRecomendPlaceProps) => {
+  const centerPlace = reactive<Place>({ lng: 0, lat: 0, name: "" });
+  const centerPoint = computed<Point>(() => [centerPlace.lng, centerPlace.lat]);
+  const centerSource: CenterPlaceSource = { source: "geo" };
+  const {
+    mapRef,
+    getRecomendPlace,
+    recomendPlaceDragLimit,
+    recomendPlaceGeoLimit,
+    onChangeByDrag,
+    onChangeGeoLocation,
+    onChangePlace,
+    onChangeRecomandPlace,
+  } = props;
+  const { loading, errorRef } = useGeoLocation({
+    mapRef,
+    onChange: (value) => {
+      centerSource.source = "geo";
+      centerPlace.lng = value.position[0];
+      centerPlace.lat = value.position[1];
+      updatePlace();
+      onChangeGeoLocation?.(value);
+    },
+  });
+  const { isDragging } = useMapDrag({
+    mapRef,
+    onChange: (point) => {
+      centerSource.source = "drag";
+      centerPlace.lng = point[0];
+      centerPlace.lat = point[1];
+      updatePlace();
+      onChangeByDrag?.(point);
+    },
+  });
+  const { updatePlace, updateRecomandPlace } = useMapRecomendPlace({
+    pointRef: centerPoint,
+    context: centerSource,
+    getRecomendPlace,
+    getLimit: (context) => {
+      const source = context?.source;
+      switch (source) {
+        case "drag":
+          return recomendPlaceDragLimit;
+        case "geo":
+          return recomendPlaceGeoLimit;
+        default:
+          throw new Error(`MyError: should not call getLimit on source: ${source}`);
+      }
+    },
+    mapRef,
+    onChangePlace: (place) => {
+      Object.assign(centerPlace, { ...place });
+      if (centerSource.source !== "recomend") {
+        updateRecomandPlace();
+      }
+      onChangePlace?.(place);
+    },
+    onChange: (place) => {
+      centerSource.source = "recomend";
+      Object.assign(centerPlace, { ...place });
+      updatePlace();
+      onChangeRecomandPlace?.(place);
+    },
+  });
+  return {
+    isDragging,
+    isGeoLoading: loading,
+    geoError: errorRef,
+    centerPlace,
+    centerPoint,
+  };
+};

package/src/index.ts

@@ -1,6 +1,5 @@
 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";
@@ -11,8 +10,12 @@ export { TaxiCar } from "./business-components/TaxiCar";
 export { WalkingLine } from "./business-components/WalkingLine";
 export { WaveCircle } from "./business-components/WaveCircle";
 export * from "./components/MapProvider";
+export { useBusinessMapRecomendPlace } from "./hooks-business/useBusinessMapRecomendPlace";
 export { useDrivingRoute } from "./hooks/useDrivingRoute";
+export { useGeoLocation } from "./hooks/useGeoLocation";
 export { useHeycarMap } from "./hooks/useHeycarMap";
 export { useMapAngle } from "./hooks/useMapAngle";
 export { useMapDrag } from "./hooks/useMapDrag";
+export { useMapPlace } from "./hooks/useMapPlace";
+export { useMapRecomendPlace } from "./hooks/useMapRecomendPlace";
 export * from "./types/interface";

package/src/types/interface.ts

@@ -2,3 +2,8 @@ import type { ShallowRef } from "vue-demi";
 
 export type Point = [number, number];
 export type MapShallowRef<M = AMap.Map | google.maps.Map> = ShallowRef<M | undefined>;
+export type Place = {
+  lng: number;
+  lat: number;
+  name: string;
+};

package/src/utils/compare.ts

@@ -61,6 +61,18 @@ export function watchPostEffectForDeepOption<T>(
   });
 }
 
+export function watchEffectForDeepOption<T>(
+  getOption: () => T,
+  callback: WatchCallback<T, T | undefined>,
+  watchOptions?: WatchOptions<true>
+) {
+  const memorizedFilter = createDeepCompareMemoize<T>();
+  return watch<T, true>(() => memorizedFilter(getOption()), callback, {
+    immediate: true,
+    ...watchOptions,
+  });
+}
+
 function name2setterName<N extends string>(name: N) {
   return `set${name.charAt(0).toUpperCase()}${name.slice(1)}`;
 }

package/src/utils/transform.ts

@@ -1,3 +1,5 @@
+import type { Place, Point } from "../types/interface";
+
 export const vec2lnglat = ([lng, lat]: [number, number]): google.maps.LatLngLiteral => ({
   lng,
   lat,
@@ -35,3 +37,11 @@ export const language2vectorMapForeign = (lang: "en" | "zh"): VectorMapForeign =
       return "style_zh_cn";
   }
 };
+
+export const place2point = (place: Place): Point => [place.lng, place.lat];
+
+export const pipeAsync =
+  <P extends any[]>(fn?: (...args: P) => any) =>
+  (...args: P) => {
+    setTimeout(() => fn?.(...args));
+  };

package/todo.md

@@ -1 +1,10 @@
 https://dawchihliou.github.io/articles/building-custom-google-maps-marker-react-component-like-airbnb-in-nextjs
+
+0. place [0,0] 不应该查询 推荐地址
+1. map loading place 多次 【0，0】
+2. Google 地址名称太长
+3. 中心点 drag 期间位置
+4. place 需要包含 autocomplete 查询需要的信息
+5. 高德地图加载期间出现大量的请求
+6. google/高德 坐标系转化
+7. 车辆行驶 fitview