@heycar/heycars-map 0.1.3 → 0.1.5

package/src/hooks/useMapPlace.ts

@@ -0,0 +1,66 @@
+import { reactive, Ref, watchEffect } from "vue-demi";
+import { useMapSupplier } from "../components/MapProvider/useMapSupplier";
+import { LANGUAGE } from "../types/helper";
+import type { MapShallowRef, Place, Point } from "../types/interface";
+import { useMapReady } from "./useMapReady";
+
+export interface UseMapPlaceProps<M = AMap.Map | google.maps.Map> {
+  pointRef: Ref<Point>;
+  mapRef: MapShallowRef<M>;
+  onChange?: (value: Place) => any;
+}
+export const useAmapPlace = (props: UseMapPlaceProps<AMap.Map>) => {
+  const { mapRef, pointRef, onChange } = props;
+  const { readyRef } = useMapReady(mapRef);
+  const place = reactive<Place>({ lng: pointRef.value[0], lat: pointRef.value[1], name: "" });
+  watchEffect(() => {
+    if (!readyRef.value) return;
+    const geocoder = new AMap.Geocoder({ lang: LANGUAGE });
+    const [lng, lat] = pointRef.value;
+    place.lng = lng;
+    place.lat = lat;
+    geocoder.getAddress(new AMap.LngLat(lng, lat), (status, result) => {
+      switch (status) {
+        case "complete": {
+          const name = (result as AMap.ReGeocoderResult).regeocode.formattedAddress;
+          place.name = name;
+          onChange?.({ lng, lat, name });
+          return;
+        }
+
+        case "no_data":
+          place.name = "";
+          onChange?.({ lng, lat, name: "" });
+          return;
+        case "error":
+          throw result;
+      }
+    });
+  });
+  return place;
+};
+
+export const useGmapPlace = (props: UseMapPlaceProps<google.maps.Map>) => {
+  const { mapRef, pointRef, onChange } = props;
+  const { readyRef } = useMapReady(mapRef);
+  const place = reactive<Place>({ lng: pointRef.value[0], lat: pointRef.value[1], name: "" });
+  watchEffect(async () => {
+    if (!readyRef.value) return;
+    const geocoder = new google.maps.Geocoder();
+    const [lng, lat] = pointRef.value;
+    place.lng = lng;
+    place.lat = lat;
+    const { results } = await geocoder.geocode({ language: LANGUAGE, location: { lng, lat } });
+    const name = results[0].formatted_address;
+    place.name = name;
+    onChange?.({ lng, lat, name });
+  });
+  return place;
+};
+
+export const useMapPlace = (props: UseMapPlaceProps) => {
+  const { supplier } = useMapSupplier();
+  return supplier === "gmap"
+    ? useGmapPlace(props as UseMapPlaceProps<google.maps.Map>)
+    : useAmapPlace(props as UseMapPlaceProps<AMap.Map>);
+};

package/src/hooks/useMapReady.ts

@@ -0,0 +1,14 @@
+import { ref, watch } from "vue-demi";
+import type { MapShallowRef } from "../types/interface";
+
+export const useMapReady = (mapRef: MapShallowRef) => {
+  const readyRef = ref(!!mapRef.value);
+  watch(
+    () => mapRef.value,
+    (map) => {
+      if (!map) return;
+      readyRef.value = true;
+    }
+  );
+  return { readyRef };
+};

package/src/hooks/useMapRecomendPlace.ts

@@ -0,0 +1,78 @@
+import { reactive, Ref, watchEffect } from "vue-demi";
+import { useMapSupplier } from "../components/MapProvider/useMapSupplier";
+import type { MapShallowRef, Place, Point } from "../types/interface";
+import { place2point } from "../utils/transform";
+import { useAmapPlace, useGmapPlace, UseMapPlaceProps } from "./useMapPlace";
+import { useMapReady } from "./useMapReady";
+
+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> {
+  mapRef: MapShallowRef<M>;
+  pointRef: Ref<Point>;
+  limit: number;
+  getRecomendPlace: (place: Place) => Promise<Place[]>;
+  onChangePlace?: UseMapPlaceProps["onChange"];
+  onChange?: (place: Place) => any;
+}
+export const useAmapRecomendPlace = (props: UseMapRecomendPlaceProps<AMap.Map>) => {
+  const { pointRef, mapRef, getRecomendPlace, limit, onChange, onChangePlace } = props;
+  const { readyRef } = useMapReady(mapRef);
+  const place = useAmapPlace({ pointRef, mapRef, onChange: onChangePlace });
+  const recomendPlace = reactive<Place>({ ...place });
+  watchEffect(async () => {
+    if (!readyRef.value) return;
+    const placeCandidates = await getRecomendPlace({ ...place });
+    const { shortestPlace, shortestDistance } = findAmapNearestPlace(place, placeCandidates);
+    console.log("shortestPlace, shortestDistance = ", shortestPlace, shortestDistance);
+    const resultPlace = shortestDistance > limit ? place : shortestPlace;
+    Object.assign(recomendPlace, { ...resultPlace });
+    onChange?.({ ...resultPlace });
+  });
+  return recomendPlace;
+};
+
+export const useGmapRecomendPlace = (props: UseMapRecomendPlaceProps<google.maps.Map>) => {
+  const { pointRef, mapRef, getRecomendPlace, limit, onChange, onChangePlace } = props;
+  const { readyRef } = useMapReady(mapRef);
+  const place = useGmapPlace({ pointRef, mapRef, onChange: onChangePlace });
+  const recomendPlace = reactive<Place>({ ...place });
+  watchEffect(async () => {
+    if (!readyRef.value) return;
+    const placeCandidates = await getRecomendPlace({ ...place });
+    const { shortestPlace, shortestDistance } = findGmapNearestPlace(place, placeCandidates);
+    const resultPlace = shortestDistance > limit ? place : shortestPlace;
+    Object.assign(recomendPlace, { ...resultPlace });
+    onChange?.({ ...resultPlace });
+  });
+  return recomendPlace;
+};
+
+export const useMapRecomendPlace = (props: UseMapRecomendPlaceProps) => {
+  const { supplier } = useMapSupplier();
+  return supplier === "gmap"
+    ? useGmapRecomendPlace(props as UseMapRecomendPlaceProps<google.maps.Map>)
+    : useAmapRecomendPlace(props as UseMapRecomendPlaceProps<AMap.Map>);
+};

package/src/hooks-business/useBusinessMapRecomendPlace.ts

@@ -0,0 +1,72 @@
+import { computed, reactive } from "vue-demi";
+import { useGeoLocation, UseGeoLocationProps } from "../hooks/useGeoLocation";
+import { useMapDrag } from "../hooks/useMapDrag";
+import type { UseMapPlaceProps } from "../hooks/useMapPlace";
+import { useMapRecomendPlace, UseMapRecomendPlaceProps } from "../hooks/useMapRecomendPlace";
+import type { Place, Point } from "../types/interface";
+
+export interface UseBusinessMapRecomendPlaceProps
+  extends Pick<UseMapRecomendPlaceProps, "getRecomendPlace" | "mapRef"> {
+  recomendPlaceGeoLimit: number;
+  recomendPlaceDragLimit: number;
+  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 {
+    mapRef,
+    getRecomendPlace,
+    recomendPlaceDragLimit,
+    recomendPlaceGeoLimit,
+    onChangeGeoLocation,
+    onChangePlace,
+    onChangeRecomandPlace,
+  } = props;
+  const { positionRef, loading, errorRef } = useGeoLocation({
+    mapRef,
+    onChange: (value) => {
+      centerPlace.lng = value.position[0];
+      centerPlace.lat = value.position[1];
+      onChangeGeoLocation?.(value);
+    },
+  });
+  const { centerRef, isDragging } = useMapDrag({ mapRef });
+  useMapRecomendPlace({
+    pointRef: positionRef,
+    getRecomendPlace,
+    limit: recomendPlaceGeoLimit,
+    mapRef,
+    onChangePlace: (place) => {
+      Object.assign(centerPlace, { ...place });
+      onChangePlace?.(place);
+    },
+    onChange: (place) => {
+      Object.assign(centerPlace, { ...place });
+      onChangeRecomandPlace?.(place);
+    },
+  });
+  useMapRecomendPlace({
+    pointRef: centerRef,
+    getRecomendPlace,
+    limit: recomendPlaceDragLimit,
+    mapRef,
+    onChangePlace: (place) => {
+      Object.assign(centerPlace, { ...place });
+      onChangePlace?.(place);
+    },
+    onChange: (place) => {
+      Object.assign(centerPlace, { ...place });
+      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/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,
@@ -25,3 +27,15 @@ 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";
+  }
+};
+
+export const place2point = (place: Place): Point => [place.lng, place.lat];