@heycar/heycars-map 0.1.6 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heycar/heycars-map",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "type": "module",
   "scripts": {
     "dev": "vite -c vite.config.dev.ts",
@@ -91,4 +91,4 @@
   "engines": {
     "node": ">=16.0.0"
   }
-}
+}

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

@@ -1,15 +1,16 @@
 import { defineSetup } from "../../types/helper";
+import type { Place } from "../../types/interface";
+import { place2point } from "../../utils/transform";
 import { PlaceCircle } from "../PlaceCircle";
 
 export interface PickupPointsProps {
-  positions: [number, number][];
-  labels: string[];
+  places: Place[];
 }
 export const PickupPoints = defineSetup(function PickupPoints(props: PickupPointsProps) {
   return () => (
     <div>
-      {props.positions.map((position, idx) => (
-        <PlaceCircle position={position} label={props.labels[idx]} textAlign="left" />
+      {props.places.map((place) => (
+        <PlaceCircle position={place2point(place)} label={place.name} textAlign="left" />
       ))}
     </div>
   );

package/src/components/Demo/HeycarDemo.tsx

@@ -1,6 +1,7 @@
 import { AddressBox } from "../../business-components/AddressBox";
 import { DrivingLine } from "../../business-components/DrivingLine";
 import { DrivingRoute } from "../../business-components/DrivingRoute";
+import { PickupPoints } from "../../business-components/PickupPoints";
 import { TaxiCar } from "../../business-components/TaxiCar";
 import {
   useBusinessMapRecomendPlace,
@@ -40,15 +41,16 @@ export const SomePage = defineSetup(function Hello() {
     console.log("getRecomendPlace context?.source = ", context?.source);
     return [{ lat: lat + 0.0001, lng: lng + 0.0001, name: "place name 1" }];
   };
-  const { centerPlace, centerPoint, isDragging, isGeoLoading } = 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),
-  });
+  const { centerPlace, centerPoint, placeCandidates, isDragging, isGeoLoading } =
+    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 (
@@ -64,6 +66,7 @@ export const SomePage = defineSetup(function Hello() {
           zoom={15}
           mapRef={setMap}
         >
+          <PickupPoints places={placeCandidates.value} />
           <AddressBox
             type="box"
             position={centerPoint.value}

package/src/components/GmapAdvancedMarkerView/GmapAdvancedMarkerView.ts

@@ -29,7 +29,6 @@ export const GmapAdvancedMarkerView = defineSetup(function GmapAdvancedMarkerVie
     },
     (props) => {
       if (!markerRef.value) return;
-      debugger;
       Object.assign(markerRef.value, props);
     }
   );

package/src/hooks/useGeoLocation.ts

@@ -19,35 +19,26 @@ export const useGeoLocation = (props: UseGeoLocationProps) => {
     speed: 0,
   });
   const positionRef = ref<Point>([coordinateRef.value.longitude, coordinateRef.value.latitude]);
-  watchEffect(
-    () => {
-      debugger;
-      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);
-        },
-        // debug
-        { timeout: 5000 * 1000 }
-        // { timeout: 5000 }
-      );
-    },
-    {
-      onTrigger(e) {
-        console.log("useGeoLocation onTrigger: ", e.key, e.newValue, e.oldValue);
+  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);
+      }
+      // todo 要不要 timeout
+      // { timeout: 5000 * 1000 }
+    );
+  });
   return { errorRef, positionRef, coordinateRef, loading };
 };

package/src/hooks/useMapPlace.ts

@@ -19,7 +19,6 @@ export const useAmapPlace = (props: UseMapPlaceProps<AMap.Map>) => {
   watch(
     () => placeKey.value,
     () => {
-      debugger;
       if (!readyRef.value) return;
       const geocoder = new AMap.Geocoder({ lang: LANGUAGE });
       const [lng, lat] = pointRef.value;
@@ -42,11 +41,6 @@ export const useAmapPlace = (props: UseMapPlaceProps<AMap.Map>) => {
             throw result;
         }
       });
-    },
-    {
-      onTrigger(e) {
-        console.log("useAmapPlace onTrigger: ", e.key, e.newValue, e.oldValue);
-      },
     }
   );
   return { place, updatePlace };

package/src/hooks/useMapRecomendPlace.ts

@@ -1,4 +1,4 @@
-import { reactive, Ref, watch } from "vue-demi";
+import { reactive, ref, 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";
@@ -41,6 +41,7 @@ export interface UseMapRecomendPlaceProps<M = AMap.Map | google.maps.Map, C = Re
 }
 export const useAmapRecomendPlace = <C>(props: UseMapRecomendPlaceProps<AMap.Map, C>) => {
   const { pointRef, mapRef, getRecomendPlace, getLimit, context, onChange, onChangePlace } = props;
+  const placeCandidatesRef = ref<Place[]>([]);
   const { idx: recomendPlaceKey, update: updateRecomandPlace } = useUpdate();
   const { readyRef } = useMapReady(mapRef);
   const { place, updatePlace } = useAmapPlace({ pointRef, mapRef, onChange: onChangePlace });
@@ -48,27 +49,23 @@ export const useAmapRecomendPlace = <C>(props: UseMapRecomendPlaceProps<AMap.Map
   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;
+      placeCandidatesRef.value = placeCandidates;
       Object.assign(recomendPlace, { ...resultPlace });
       pipeAsync(onChange)?.({ ...resultPlace });
-    },
-    {
-      onTrigger(e) {
-        console.log("UseMapRecomendPlaceProps onTrigger: ", e.key, e.newValue, e.oldValue);
-      },
     }
   );
-  return { recomendPlace, updateRecomandPlace, updatePlace };
+  return { recomendPlace, placeCandidates: placeCandidatesRef, updateRecomandPlace, updatePlace };
 };
 
 export const useGmapRecomendPlace = <C>(props: UseMapRecomendPlaceProps<google.maps.Map, C>) => {
   const { pointRef, mapRef, getRecomendPlace, getLimit, context, onChange, onChangePlace } = props;
+  const placeCandidatesRef = ref<Place[]>([]);
   const { idx: recomendPlaceKey, update: updateRecomandPlace } = useUpdate();
   const { readyRef } = useMapReady(mapRef);
   const { place, updatePlace } = useGmapPlace({ pointRef, mapRef, onChange: onChangePlace });
@@ -81,11 +78,12 @@ export const useGmapRecomendPlace = <C>(props: UseMapRecomendPlaceProps<google.m
       const { shortestPlace, shortestDistance } = findGmapNearestPlace(place, placeCandidates);
       const limit = getLimit(context);
       const resultPlace = shortestDistance > limit ? place : shortestPlace;
+      placeCandidatesRef.value = placeCandidates;
       Object.assign(recomendPlace, { ...resultPlace });
       pipeAsync(onChange)?.({ ...resultPlace });
     }
   );
-  return { recomendPlace, updateRecomandPlace, updatePlace };
+  return { recomendPlace, placeCandidates: placeCandidatesRef, updateRecomandPlace, updatePlace };
 };
 
 export const useMapRecomendPlace = <C>(

package/src/hooks-business/useBusinessMapRecomendPlace.ts

@@ -54,7 +54,7 @@ export const useBusinessMapRecomendPlace = (props: UseBusinessMapRecomendPlacePr
       onChangeByDrag?.(point);
     },
   });
-  const { updatePlace, updateRecomandPlace } = useMapRecomendPlace({
+  const { updatePlace, updateRecomandPlace, placeCandidates } = useMapRecomendPlace({
     pointRef: centerPoint,
     context: centerSource,
     getRecomendPlace,
@@ -90,5 +90,6 @@ export const useBusinessMapRecomendPlace = (props: UseBusinessMapRecomendPlacePr
     geoError: errorRef,
     centerPlace,
     centerPoint,
+    placeCandidates,
   };
 };