@heycar/heycars-map 0.1.4 → 0.1.5

package/dist/style.css

@@ -1 +1 @@
-._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{flex-direction:row-reverse}.fhyw83{margin-right:-2.265vw}.fhyw84{margin-left:-2.265vw}.fhyw85{margin-bottom:-2.265vw}.fhyw86{margin-right:calc(50% - 2.265vw)}.fhyw87{margin-left:calc(50% - 2.265vw)}.fhyw88{display:flex;width:4.53vw;height:4.53vw}.fhyw89{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}
+.rgf09w0{width:7.1045vw;height:10.93vw;display:flex}._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}._1l6offo0{display:flex;margin-bottom:-8.135vw;width:16.27vw;height:16.27vw}.fhyw80{display:flex;align-items:center}.fhyw81{flex-direction:row-reverse}.fhyw83{margin-right:-2.265vw}.fhyw84{margin-left:-2.265vw}.fhyw85{margin-bottom:-2.265vw}.fhyw86{margin-right:calc(50% - 2.265vw)}.fhyw87{margin-left:calc(50% - 2.265vw)}.fhyw88{display:flex;width:4.53vw;height:4.53vw}.fhyw89{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}

package/dist/types/interface.d.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/dist/utils/transform.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="google.maps" />
+import type { Place, Point } from "../types/interface";
 export declare const vec2lnglat: ([lng, lat]: [number, number]) => google.maps.LatLngLiteral;
 export interface AsteriskItem {
     type: "normal" | "emphasize";
@@ -9,3 +10,4 @@ export declare const property2emitEventName: (propertyName: string) => string;
 export declare const property2mapEventName: (propertyName: string) => string;
 export type VectorMapForeign = "style_en" | "style_local" | "style_zh_cn";
 export declare const language2vectorMapForeign: (lang: "en" | "zh") => VectorMapForeign;
+export declare const place2point: (place: Place) => Point;

package/package.json

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

package/src/business-components/AddressBox/AddressBox.tsx

@@ -8,9 +8,11 @@ import { createElement, defineSetup } from "../../types/helper";
 import type { Point } from "../../types/interface";
 import { createDom } from "../../utils/dom";
 import { vec2lnglat } from "../../utils/transform";
+import { AAddressLocator, GAddressLocator } from "../AddressLocator";
 import * as css from "./AddressBox.css";
 
 interface AddressBoxProps {
+  type: "box" | "locator";
   position: Point;
   title: string;
   description?: string;
@@ -31,9 +33,12 @@ export const AAddressBox = defineSetup(function AAddressBox(props: AddressBoxPro
       </div>
     `
   );
-  return () => (
-    <AmapMarker position={props.position} content={contentRef.value} anchor={"bottom-center"} />
-  );
+  return () => {
+    if (props.type === "locator") return <AAddressLocator position={props.position} />;
+    return (
+      <AmapMarker position={props.position} content={contentRef.value} anchor={"bottom-center"} />
+    );
+  };
 });
 
 export const GAddressBox = defineSetup(function GAddressBox(props: AddressBoxProps) {
@@ -55,6 +60,7 @@ export const GAddressBox = defineSetup(function GAddressBox(props: AddressBoxPro
     )
   );
   return () => {
+    if (props.type === "locator") return <GAddressLocator position={props.position} />;
     return (
       <GmapAdvancedMarkerView position={vec2lnglat(props.position)} content={contentRef.value} />
     );

package/src/business-components/DrivingRoute/DrivingRoute.tsx

@@ -1,4 +1,4 @@
-import type { Ref, ShallowRef, VNodeData } from "vue-demi";
+import { reactive, VNodeData } from "vue-demi";
 import { useAmap } from "../../components/Amap/useAmap";
 import { useGmap } from "../../components/Gmap/useGmap";
 import { useMapSupplier } from "../../components/MapProvider/useMapSupplier";
@@ -11,31 +11,31 @@ import { useAmapAngle, useGmapAngle } from "../../hooks/useMapAngle";
 import { createElement, defineSetup, VNodeChild } from "../../types/helper";
 import type { Point } from "../../types/interface";
 
+export type DrivingRouteRenderProps = {
+  path: Point[];
+  angle?: number;
+};
 export interface DrivingRouteProps extends UseDrivingRouteProps {
-  render?: (props: {
-    pathRef: ShallowRef<Point[]>;
-    angleRef: Ref<number | undefined>;
-  }) => VNodeChild;
+  render?: (props: DrivingRouteRenderProps) => VNodeChild;
 }
 export const ADrivingRoute = defineSetup(function DrivingRoute(
   props: DrivingRouteProps,
   { slots }
 ) {
-  const mapRef = useAmap();
-  const pathRef = useADrivingRoute(props);
-  const angleRef = useAmapAngle({ pathRef, mapRef });
-  debugger;
-  return () => <div id="qyc">{slots.render?.({ pathRef, angleRef })}</div>;
+  const map = useAmap();
+  const path = useADrivingRoute(props);
+  const angle = useAmapAngle(reactive({ path, map }));
+  return () => <div>{slots.render?.(reactive({ path, angle }))}</div>;
 });
 
 export const GDrivingRoute = defineSetup(function DrivingRoute(
   props: DrivingRouteProps,
   { slots }
 ) {
-  const mapRef = useGmap();
-  const pathRef = useGDrivingRoute(props);
-  const angleRef = useGmapAngle({ pathRef, mapRef });
-  return () => <div>{slots.render?.({ pathRef, angleRef })}</div>;
+  const map = useGmap();
+  const path = useGDrivingRoute(props);
+  const angle = useGmapAngle(reactive({ path, map }));
+  return () => <div>{slots.render?.(reactive({ path, angle }))}</div>;
 });
 
 export const DrivingRoute = defineSetup(function DrivingRoute(props: DrivingRouteProps, { slots }) {

package/src/components/Demo/HeycarDemo.tsx

@@ -1,8 +1,12 @@
+import { AddressBox } from "../../business-components/AddressBox";
 import { DrivingLine } from "../../business-components/DrivingLine";
 import { DrivingRoute } from "../../business-components/DrivingRoute";
 import { TaxiCar } from "../../business-components/TaxiCar";
+import {
+  useBusinessMapRecomendPlace,
+  UseBusinessMapRecomendPlaceProps,
+} from "../../hooks-business/useBusinessMapRecomendPlace";
 import { useHeycarMap } from "../../hooks/useHeycarMap";
-import { useMapDrag } from "../../hooks/useMapDrag";
 import { defineSetup } from "../../types/helper";
 import { HeycarMap, MapProvider } from "../MapProvider/MapProvider";
 import * as css from "./Demo.css";
@@ -28,22 +32,42 @@ export const HeycarDemo = defineSetup(function HeycarDemo() {
 
 export const SomePage = defineSetup(function Hello() {
   const { mapRef, setMap, panTo } = useHeycarMap();
-  const { centerPlace, isDragging } = useMapDrag(mapRef);
+  const getRecomendPlace: UseBusinessMapRecomendPlaceProps["getRecomendPlace"] = async (place) => {
+    const { lat, lng } = place;
+    console.log("typeof lat = ", typeof lat);
+    return [{ lat: lat + 0.0001, lng: lng + 0.0001, name: "place name 1" }];
+  };
+  const { centerPlace, centerPoint, isDragging, isGeoLoading, geoError } =
+    useBusinessMapRecomendPlace({
+      mapRef,
+      recomendPlaceGeoLimit: 300,
+      recomendPlaceDragLimit: 30,
+      getRecomendPlace,
+      onChangeGeoLocation: (v) => console.log("onChangeGeoLocation: ", v),
+      onChangePlace: (v) => console.log("onChangePlace: ", v),
+      onChangeRecomandPlace: (v) => console.log("onChangeRecomandPlace: ", v),
+    });
   (window as any).panTo = panTo;
   return () => {
     return (
       <div>
+        isGeoLoading: {`${isGeoLoading.value}`} <br />
         isDragging: {`${isDragging.value}`} <br />
-        {centerPlace.lng} | {centerPlace.lat} | {centerPlace.name}
+        {centerPlace.lng} | {centerPlace.lat} | {centerPlace.name} <br />
         <HeycarMap
           class={css.demo}
           fallback={() => <div>error</div>}
           loading={() => <div>loading</div>}
-          center={[121, 31]}
+          center={[centerPlace.lng, centerPlace.lat]}
           zoom={15}
           mapRef={setMap}
         >
-          {/* <AddressBox position={[0, 0]} title={"Martyrs Lawn"} description={"您将在此处上车"} /> */}
+          <AddressBox
+            type="box"
+            position={centerPoint.value}
+            title={"Martyrs Lawn"}
+            description={"您将在此处上车"}
+          />
           {/* <TaxiCar position={[121, 31]} angle={0} /> */}
           {/* <PickupPoints
             positions={[
@@ -55,9 +79,9 @@ export const SomePage = defineSetup(function Hello() {
           <DrivingRoute
             from={[121, 31]}
             to={[121.6, 31.3]}
-            render={({ pathRef, angleRef }) => [
-              pathRef.value.length > 0 && <DrivingLine path={pathRef.value} />,
-              <TaxiCar position={[121, 31]} angle={angleRef.value} />,
+            render={({ path, angle }) => [
+              <DrivingLine path={path} />,
+              <TaxiCar position={[121, 31]} angle={angle} />,
             ]}
           />
         </HeycarMap>

package/src/hooks/useDrivingRoute.ts

@@ -1,6 +1,7 @@
-import { ShallowRef, shallowRef, watch } from "vue-demi";
+import { ShallowRef, shallowRef } from "vue-demi";
 import { useMapSupplier } from "../components/MapProvider/useMapSupplier";
 import type { Point } from "../types/interface";
+import { watchPostEffectForDeepOption } from "../utils/compare";
 
 export interface UseDrivingRouteProps {
   from: Point;
@@ -10,9 +11,9 @@ export interface UseDrivingRouteProps {
 export const useADrivingRoute = (props: UseDrivingRouteProps) => {
   const pathRef = shallowRef<Point[]>([]);
   const amapDriving = new AMap.Driving({});
-  watch(
-    [() => props.from, () => props.to],
-    ([from, to]) => {
+  watchPostEffectForDeepOption(
+    () => ({ ...props }),
+    ({ from, to }) => {
       amapDriving.search(
         AMap.LngLat.from(from),
         AMap.LngLat.from(to),
@@ -39,8 +40,7 @@ export const useADrivingRoute = (props: UseDrivingRouteProps) => {
           }
         }
       );
-    },
-    { immediate: true }
+    }
   );
   return pathRef;
 };
@@ -48,22 +48,25 @@ export const useADrivingRoute = (props: UseDrivingRouteProps) => {
 export const useGDrivingRoute = (props: UseDrivingRouteProps) => {
   const pathRef = shallowRef<Point[]>([]);
   const gmapDirectionsService = new google.maps.DirectionsService();
-  watch([() => props.from, () => props.to], ([from, to]) => {
-    gmapDirectionsService
-      .route({
-        origin: { lng: from[0], lat: from[1] },
-        destination: { lng: to[0], lat: to[1] },
-        travelMode: google.maps.TravelMode.WALKING,
-      })
-      .then((result) => {
-        let path: Point[] = [];
-        result.routes.map((route) => {
-          const stepPath = route.overview_path.map<Point>((item) => [item.lng(), item.lat()]);
-          path = path.concat(stepPath);
+  watchPostEffectForDeepOption(
+    () => ({ ...props }),
+    ({ from, to }) => {
+      gmapDirectionsService
+        .route({
+          origin: { lng: from[0], lat: from[1] },
+          destination: { lng: to[0], lat: to[1] },
+          travelMode: google.maps.TravelMode.WALKING,
+        })
+        .then((result) => {
+          let path: Point[] = [];
+          result.routes.map((route) => {
+            const stepPath = route.overview_path.map<Point>((item) => [item.lng(), item.lat()]);
+            path = path.concat(stepPath);
+          });
+          pathRef.value = path;
         });
-        pathRef.value = path;
-      });
-  });
+    }
+  );
   return pathRef;
 };
 

package/src/hooks/useGeoLocation.ts

@@ -0,0 +1,44 @@
+import { ref, watchEffect } from "vue-demi";
+import type { MapShallowRef, Point } from "../types/interface";
+
+export interface UseGeoLocationProps {
+  mapRef: MapShallowRef;
+  onChange?: (value: { position: Point; coordinate: GeolocationCoordinates }) => any;
+}
+export const useGeoLocation = (props: UseGeoLocationProps) => {
+  const { mapRef, onChange } = props;
+  const loading = ref(false);
+  const errorRef = ref<GeolocationPositionError>();
+  const coordinateRef = ref<GeolocationCoordinates>({
+    accuracy: 0,
+    altitude: 0,
+    altitudeAccuracy: 0,
+    heading: 0,
+    latitude: 0,
+    longitude: 0,
+    speed: 0,
+  });
+  const positionRef = ref<Point>([coordinateRef.value.longitude, coordinateRef.value.latitude]);
+  watchEffect(() => {
+    mapRef.value;
+    loading.value = true;
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        loading.value = false;
+        const coordinate = position.coords;
+        const point: Point = [position.coords.longitude, position.coords.latitude];
+        coordinateRef.value = coordinate;
+        positionRef.value = point;
+        onChange?.({ position: point, coordinate });
+      },
+      (error) => {
+        loading.value = false;
+        errorRef.value = error;
+        console.log("errorRef = ", errorRef);
+      },
+
+      { timeout: 5000 }
+    );
+  });
+  return { errorRef, positionRef, coordinateRef, loading };
+};

package/src/hooks/useMapAngle.ts

@@ -1,35 +1,34 @@
-import { computed, ShallowRef } from "vue";
+import { computed } from "vue-demi";
 import { useMapSupplier } from "../components/MapProvider/useMapSupplier";
-import type { MapShallowRef, Point } from "../types/interface";
+import type { Point } from "../types/interface";
 import { vec2lnglat } from "../utils/transform";
 
 const amapComputeHeading = (from: Point, to: Point, map?: AMap.Map) => {
   if (!map) return 0;
   const { x: xFrom, y: yFrom } = map.lngLatToContainer(from);
   const { x: xTo, y: yTo } = map.lngLatToContainer(to);
-  console.log("yTo - yFrom, xTo - xFrom = ", yTo - yFrom, xTo - xFrom);
   const theta = Math.atan2(yFrom - yTo, xTo - xFrom);
   return ((Math.PI / 2 - theta) / Math.PI) * 180;
 };
 
-export interface UseMapAngleProps<T = AMap.Map | google.maps.Map> {
-  pathRef: ShallowRef<Point[]>;
-  mapRef?: MapShallowRef<T>;
-}
+export type UseMapAngleProps<M = AMap.Map | google.maps.Map> = {
+  path: Point[];
+  map?: M;
+};
 
 export const useAmapAngle = (props: UseMapAngleProps<AMap.Map>) => {
   return computed(() => {
-    const { mapRef, pathRef } = props;
-    const [from, to] = pathRef.value;
-    if (!from || !to || !mapRef) return undefined;
-    return amapComputeHeading(from, to, mapRef.value);
+    const { map, path } = props;
+    const [from, to] = path;
+    if (!from || !to || !map) return undefined;
+    return amapComputeHeading(from, to, map);
   });
 };
 
 export const useGmapAngle = (props: UseMapAngleProps<google.maps.Map>) => {
   return computed(() => {
-    const { pathRef } = props;
-    const [from, to] = pathRef.value;
+    const { path } = props;
+    const [from, to] = path;
     if (!from || !to) return undefined;
     return google.maps.geometry.spherical.computeHeading(vec2lnglat(from), vec2lnglat(to));
   });

package/src/hooks/useMapDrag.ts

@@ -1,81 +1,67 @@
-import { reactive, ref, type ShallowRef } from "vue-demi";
+import { ref, type ShallowRef } from "vue-demi";
 import type { AmapProps } from "../components/Amap";
 import type { GmapProps } from "../components/Gmap";
 import { useMapSupplier } from "../components/MapProvider/useMapSupplier";
-import { LANGUAGE, SetupContextEmitHandler } from "../types/helper";
-import type { MapShallowRef } from "../types/interface";
+import type { SetupContextEmitHandler } from "../types/helper";
+import type { Point } from "../types/interface";
 import { watchPostEffectForAMapEvent, watchPostEffectForGMapEvent } from "../utils/compare";
 
 export const ON_CHANGE_CENTER_INTERVAL = 200;
-export interface UseMapCenterPlace {
-  lng: number;
-  lat: number;
-  name: string;
+
+export interface UseMapDragProps<M = AMap.Map | google.maps.Map> {
+  mapRef: ShallowRef<M | undefined>;
+  onChange?: (value: Point) => any;
 }
-export const useAmapDrag = (amapRef: ShallowRef<AMap.Map | undefined>) => {
-  const centerPlace = reactive<UseMapCenterPlace>({ lng: 0, lat: 0, name: "" });
+export const useAmapDrag = (props: UseMapDragProps<AMap.Map>) => {
+  const { mapRef, onChange } = props;
+  const centerRef = ref<Point>([0, 0]);
   const isDragging = ref(false);
   const emitDragStart: SetupContextEmitHandler<Pick<AmapProps, "onDragStart">> = () => {
     Promise.resolve().then(() => (isDragging.value = true));
   };
   const emitDragEnd: SetupContextEmitHandler<Pick<AmapProps, "onDragEnd">> = (_, { target }) => {
     isDragging.value = false;
-    const center = target.getCenter();
-    centerPlace.lng = center.lng;
-    centerPlace.lat = center.lat;
-    const geocoder = new AMap.Geocoder({ lang: LANGUAGE });
-    geocoder.getAddress(center, (status, result) => {
-      switch (status) {
-        case "complete":
-          centerPlace.name = (result as AMap.ReGeocoderResult).regeocode.formattedAddress;
-          return;
-        case "no_data":
-          return;
-        case "error":
-          throw result;
-      }
-    });
+    const { lng, lat } = target.getCenter();
+    centerRef.value = [lng, lat];
+    onChange?.([lng, lat]);
   };
-  watchPostEffectForAMapEvent(amapRef, {} as Pick<AmapProps, "onDragStart">, emitDragStart, [
+  watchPostEffectForAMapEvent(mapRef, {} as Pick<AmapProps, "onDragStart">, emitDragStart, [
     "onDragStart",
   ]);
-  watchPostEffectForAMapEvent(amapRef, {} as Pick<AmapProps, "onDragEnd">, emitDragEnd, [
+  watchPostEffectForAMapEvent(mapRef, {} as Pick<AmapProps, "onDragEnd">, emitDragEnd, [
     "onDragEnd",
   ]);
-  return { centerPlace, isDragging };
+  return { centerRef, isDragging };
 };
 
-export const useGmapDrag = (gmapRef: ShallowRef<google.maps.Map | undefined>) => {
-  const centerPlace = reactive<UseMapCenterPlace>({ lng: 0, lat: 0, name: "" });
+export const useGmapDrag = (props: UseMapDragProps<google.maps.Map>) => {
+  const { mapRef, onChange } = props;
+  const centerRef = ref<Point>([0, 0]);
   const isDragging = ref(false);
   const emitDragStart: SetupContextEmitHandler<Pick<GmapProps, "onDragStart">> = () => {
     Promise.resolve().then(() => (isDragging.value = true));
   };
   const emitDragEnd: SetupContextEmitHandler<Pick<GmapProps, "onDragEnd">> = async () => {
     isDragging.value = false;
-    const center = gmapRef.value?.getCenter();
-    if (!center) return;
-    const lng = center?.lng();
-    const lat = center?.lat();
-    if (lng) centerPlace.lng = lng;
-    if (lat) centerPlace.lat = lat;
-    const geocoder = new google.maps.Geocoder();
-    const { results } = await geocoder.geocode({ language: LANGUAGE, location: center });
-    centerPlace.name = results[0].formatted_address;
+    const center = mapRef.value?.getCenter();
+    const lng = center?.lng() as number;
+    const lat = center?.lat() as number;
+    centerRef.value = [lng, lat];
+    onChange?.([lng, lat]);
   };
-  watchPostEffectForGMapEvent(gmapRef!, {} as Pick<GmapProps, "onDragStart">, emitDragStart, [
+  watchPostEffectForGMapEvent(mapRef!, {} as Pick<GmapProps, "onDragStart">, emitDragStart, [
     "onDragStart",
   ]);
-  watchPostEffectForGMapEvent(gmapRef!, {} as Pick<GmapProps, "onDragEnd">, emitDragEnd, [
+  watchPostEffectForGMapEvent(mapRef!, {} as Pick<GmapProps, "onDragEnd">, emitDragEnd, [
     "onDragEnd",
   ]);
-  return { centerPlace, isDragging };
+  return { centerRef, isDragging };
 };
 
-export const useMapDrag = (mapRef: MapShallowRef) => {
+export const useMapDrag = (props: UseMapDragProps) => {
   const { supplier } = useMapSupplier();
   // todo: 这里违反 react hook 规则，但 react 版本应该可以同时调用 useAmap 和 useGmap
   return supplier === "gmap"
-    ? useGmapDrag(mapRef as ShallowRef<google.maps.Map | undefined>)
-    : useAmapDrag(mapRef as ShallowRef<AMap.Map | undefined>);
+    ? useGmapDrag(props as UseMapDragProps<google.maps.Map>)
+    : useAmapDrag(props as UseMapDragProps<AMap.Map>);
 };

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>);
+};