@heycar/heycars-map 0.2.6 → 0.2.8

package/src/components/Demo/HeycarDemo.tsx

@@ -1,13 +1,11 @@
 import { computed } from "vue-demi";
-import { PickupPoints } from "../../business-components/PickupPoints";
-import { useBusinessMapAutoComplete } from "../../hooks-business/useBusinessMapAutoComplete";
 import {
-  useBusinessMapRecomendPlace,
-  UseBusinessMapRecomendPlaceProps,
-} from "../../hooks-business/useBusinessMapRecomendPlace";
-import { useHeycarMap } from "../../hooks/useHeycarMap";
-import { useMapFitView } from "../../hooks/useMapFitView";
-import { useMapGeometry } from "../../hooks/useMapGeometry";
+  BusinessRecomendPlaceMap,
+  BusinessRecomendPlaceMapProps,
+} from "../../business-components/BusinessRecomendPlaceMap";
+import { useBusinessMapAutoComplete } from "../../hooks-business/useBusinessMapAutoComplete";
+import { useBusinessRecomendPlaceMap } from "../../hooks-business/useBusinessRecomendPlaceMap";
+
 import { defineSetup } from "../../types/helper";
 import { HeycarMap, MapProvider } from "../MapProvider/MapProvider";
 import * as css from "./Demo.css";
@@ -64,8 +62,7 @@ const SomeAutoComplete = defineSetup(function SomeAutoComplete(props: { cityName
 });
 
 export const SomeHomePage = defineSetup(function SomeHomePage() {
-  const { mapRef, setMap } = useHeycarMap();
-  const getRecomendPlace: UseBusinessMapRecomendPlaceProps["getRecomendPlace"] = async (
+  const getRecomendPlace: BusinessRecomendPlaceMapProps["getRecomendPlace"] = async (
     place,
     context
   ) => {
@@ -78,103 +75,29 @@ export const SomeHomePage = defineSetup(function SomeHomePage() {
   };
   const {
     centerPlace,
-    centerPoint,
     placeCandidates,
-    isDragging,
-    geoLoading,
-    geoPosition,
+    panTo,
     setCenterPlaceByRecomand,
-    setCenterByPlace,
-  } = useBusinessMapRecomendPlace({
-    geoDefaultPosition: [0, 0],
-    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 { registerFitVeiw, setFitView } = useMapFitView({
-    mapRef,
-    padding: [15, 15, 5, 15],
-    autoFitTimeout: 5000,
-  });
-  const { apiMapDistance } = useMapGeometry();
+    mapContext,
+    apiMapDistance,
+  } = useBusinessRecomendPlaceMap();
+
   (window as any).setCenterPlaceByRecomand = setCenterPlaceByRecomand;
-  (window as any).setFitView = setFitView;
   return () => {
     return (
       <div>
-        distance:{" "}
-        {apiMapDistance(centerPoint.value, [
-          centerPoint.value[0] + 0.01,
-          centerPoint.value[1] + 0.01,
-        ])}{" "}
-        <br />
-        geoLoading: {`${geoLoading.value}`} <br />
-        isDragging: {`${isDragging.value}`} <br />
-        geoPosition: {geoPosition.value[0]} | {geoPosition.value[1]} <br />
+        placeCandidates: {placeCandidates} <br />
         centerPlace: {centerPlace.lng} | {centerPlace.lat} | {centerPlace.name} |{" "}
         {centerPlace.cityName} <br />
-        <HeycarMap
+        <BusinessRecomendPlaceMap
           class={css.demo}
-          fallback={() => <div>error</div>}
-          loading={() => <div>loading</div>}
-          center={centerPoint.value}
-          zoom={centerPoint.value[0] === 0 ? 3 : 13}
-          mapRef={setMap}
-        >
-          {/* <StartEndPoint
-            registerOverlay={registerFitVeiw}
-            position={[121.4897065, 31.0842552]}
-            title={"start point"}
-            type="start"
-          /> */}
-          {/* <StartEndPoint
-            registerOverlay={registerFitVeiw}
-            position={[centerPoint.value[0] + 0.01, centerPoint.value[1] + 0.01]}
-            title={"end point"}
-            type="end"
-          /> */}
-          <PickupPoints places={placeCandidates.value} onClick={setCenterByPlace} />
-          {/* <AddressBox
-            type="box"
-            position={centerPoint.value}
-            title={"Martyrs Lawn"}
-            description={"您将在此处上车"}
-          /> */}
-          {/* <TaxiCar position={[121, 31]} angle={0} /> */}
-          {/* <PickupPoints
-            positions={[
-              [-1, -1],
-              [-2, -2],
-            ]}
-            labels={["place name 1", "place name 2"]}
-          /> */}
-          {/* <DrivingRoute
-            from={[121, 31]}
-            to={[121.6, 31.3]}
-            render={({ path, angle }) => [
-              <DrivingLine path={path} />,
-              <TaxiCar position={[121, 31]} angle={angle} />,
-            ]}
-          /> */}
-          {/* <PassengerCircle position={centerPoint.value} size="small" /> */}
-          {/* <PlaceCircle
-            position={centerPoint.value}
-            label={"some place"}
-            hideIcon
-            onClick={() => {
-              debugger;
-            }}
-          /> */}
-          {/* <WalkingRoute
-            from={centerPoint.value}
-            to={[centerPoint.value[0] + 0.01, centerPoint.value[1] + 0.01]}
-            render={({ path }) => <WalkingLine path={path} />}
-          /> */}
-        </HeycarMap>
+          title={centerPlace.name}
+          description={"some description"}
+          geoDefaultPosition={[121, 31]}
+          getRecomendPlace={getRecomendPlace}
+          mapContext={mapContext}
+          onGeoError={(e) => console.log("onGeoError e = ", e)}
+        />
       </div>
     );
   };

package/src/hooks/useGeoLocation.ts

@@ -6,9 +6,10 @@ export interface UseGeoLocationProps {
   onChange?: (value: { position: Point; coordinate: GeolocationCoordinates }) => any;
   onLoad?: (value: { position: Point; coordinate: GeolocationCoordinates }) => any;
   onLoadDefault?: (value: { position: Point }) => any;
+  onError?: (error: GeolocationPositionError) => any;
 }
 export const useGeoLocation = (props?: UseGeoLocationProps) => {
-  const { onChange, onLoad, onLoadDefault, geoDefaultPosition } = props ?? {};
+  const { onChange, onLoad, onLoadDefault, onError, geoDefaultPosition } = props ?? {};
   const loading = ref(false);
   const readyRef = ref(false);
   const errorRef = ref<GeolocationPositionError>();
@@ -44,6 +45,7 @@ export const useGeoLocation = (props?: UseGeoLocationProps) => {
           errorRef.value = error;
           const position = props?.geoDefaultPosition;
           if (position) onLoadDefault?.({ position });
+          onError?.(error);
           console.log("errorRef = ", errorRef);
         },
         // todo 要不要 timeout

package/src/hooks/useMapFitView.ts

@@ -27,14 +27,6 @@ export const useAmapFitView = (props: UseMapFitViewProps<AMap.Map>) => {
   const { mapRef, autoFitTimeout } = props;
   const overlayGroup: Set<AmapOverlay> = new Set();
   let timer: number | undefined = undefined;
-  const registerFitVeiw: RegisterOverlay<AmapOverlay> = {
-    add: (overlay: AmapOverlay) => {
-      overlayGroup.add(overlay);
-    },
-    remove: (overlay: AmapOverlay) => {
-      overlayGroup.delete(overlay);
-    },
-  };
   const setFitView = () => {
     const map = mapRef.value;
     if (!map) return;
@@ -43,6 +35,15 @@ export const useAmapFitView = (props: UseMapFitViewProps<AMap.Map>) => {
     console.log([...overlayGroup]);
     map.setFitView([...overlayGroup], false, [top * vw, bottom * vw, left * vw, right * vw]);
   };
+  const registerFitVeiw: RegisterOverlay<AmapOverlay> = {
+    add: (overlay: AmapOverlay) => {
+      overlayGroup.add(overlay);
+    },
+    remove: (overlay: AmapOverlay) => {
+      overlayGroup.delete(overlay);
+    },
+    setFitView,
+  };
   const handleMoveEndOrZomEnd = () => {
     if (!autoFitTimeout) return;
     if (timer) clearTimeout(timer);
@@ -82,14 +83,6 @@ export const useGmapFitView = (props: UseMapFitViewProps<google.maps.Map>) => {
   const { executeMapApi } = useMapEventSource();
   const overlayGroup = new SimpleGmapOverLayerGroup();
   let timer: number | undefined = undefined;
-  const registerFitVeiw: RegisterOverlay<GmapOverlay> = {
-    add: (overlay: GmapOverlay) => {
-      overlayGroup.add(overlay);
-    },
-    remove: (overlay: GmapOverlay) => {
-      overlayGroup.delete(overlay);
-    },
-  };
   const setFitView = () => {
     const map = mapRef.value;
     if (!map) return;
@@ -104,6 +97,15 @@ export const useGmapFitView = (props: UseMapFitViewProps<google.maps.Map>) => {
       })
     );
   };
+  const registerFitVeiw: RegisterOverlay<GmapOverlay> = {
+    add: (overlay: GmapOverlay) => {
+      overlayGroup.add(overlay);
+    },
+    remove: (overlay: GmapOverlay) => {
+      overlayGroup.delete(overlay);
+    },
+    setFitView,
+  };
   const handleMoveEnd = (name: string) => {
     const eventSource = getMapEvnetSource();
     console.log("handleMoveEndOrZomEnd name, eventSource = ", name, eventSource);

package/src/hooks-business/useBusinessRecomendPlaceMap.ts

@@ -0,0 +1,45 @@
+import { reactive, ref } from "vue-demi";
+import { useMapGeometry } from "../hooks/useMapGeometry";
+import type { Place, Point } from "../types/interface";
+
+export interface BusinessRecomendPlaceContext {
+  panTo: (value: Point) => void;
+  setCenterPlaceByRecomand: (value: Point) => void;
+  onChangeCenterPlace: (value: Place) => void;
+  onChangeRecomendPlaces: (value: Place[]) => void;
+}
+
+export const useBusinessRecomendPlaceMap = () => {
+  const centerPlace = reactive<Place>({
+    lng: 0,
+    lat: 0,
+    name: "",
+    cityName: undefined,
+  });
+  const placeCandidates = ref<Place[]>([]);
+  const { apiMapDistance } = useMapGeometry();
+  const panTo = (value: Point) => mapContext.panTo(value);
+  const setCenterPlaceByRecomand = (value: Point) => mapContext.setCenterPlaceByRecomand(value);
+  const mapContext: BusinessRecomendPlaceContext = {
+    panTo: () => {
+      throw new Error("MyError: panTo used before assigned");
+    },
+    setCenterPlaceByRecomand: () => {
+      throw new Error("MyError: setCenterPlaceByRecomand used before assigned");
+    },
+    onChangeCenterPlace: (place: Place) => {
+      Object.assign(centerPlace, { ...place });
+    },
+    onChangeRecomendPlaces: (places: Place[]) => {
+      placeCandidates.value = [...places];
+    },
+  };
+  return {
+    mapContext,
+    centerPlace,
+    placeCandidates,
+    panTo,
+    setCenterPlaceByRecomand,
+    apiMapDistance,
+  };
+};

package/src/hooks-business/{useBusinessMapRecomendPlace.ts → useLagecyMapRecomendPlace.ts}

@@ -9,7 +9,7 @@ import type { MapShallowRef, Place, Point } from "../types/interface";
 interface CenterPlaceSource {
   source: "default" | "geo" | "drag" | "recomend" | "api";
 }
-export interface UseBusinessMapRecomendPlaceProps
+export interface UseLagecyMapRecomendPlace
   extends Pick<UseMapRecomendPlaceProps<CenterPlaceSource>, "getRecomendPlace"> {
   mapRef: MapShallowRef;
   defaultCenterPoint?: Point;
@@ -23,7 +23,7 @@ export interface UseBusinessMapRecomendPlaceProps
   onChangePlace?: UseMapPlaceProps["onChange"];
   onChangeRecomandPlace?: UseMapRecomendPlaceProps["onChange"];
 }
-export const useBusinessMapRecomendPlace = (props: UseBusinessMapRecomendPlaceProps) => {
+export const useLagecyMapRecomendPlace = (props: UseLagecyMapRecomendPlace) => {
   const {
     mapRef,
     geoDefaultPosition,
@@ -135,6 +135,7 @@ export const useBusinessMapRecomendPlace = (props: UseBusinessMapRecomendPlacePr
       onChangeRecomandPlace?.(place);
     },
   });
+
   return {
     isDragging,
     geoLoading,

package/src/index.ts

@@ -1,5 +1,7 @@
 import "./style.css";
 export { AddressBox } from "./business-components/AddressBox";
+export { BusinessQuotingMap } from "./business-components/BusinessQuotingMap";
+export { BusinessRecomendPlaceMap } from "./business-components/BusinessRecomendPlaceMap";
 export { BusinessTaxiServiceMap } from "./business-components/BusinessTaxiServiceMap";
 export { DrivingLine } from "./business-components/DrivingLine";
 export { DrivingRoute } from "./business-components/DrivingRoute";
@@ -13,7 +15,8 @@ export { WalkingRoute } from "./business-components/WalkingRoute";
 export { WaveCircle } from "./business-components/WaveCircle";
 export * from "./components/MapProvider";
 export * from "./hooks-business/useBusinessMapAutoComplete";
-export * from "./hooks-business/useBusinessMapRecomendPlace";
+export * from "./hooks-business/useBusinessQuotingMap";
+export * from "./hooks-business/useBusinessRecomendPlaceMap";
 export * from "./hooks-business/useBusinessTaxiServiceMap";
 export { useDrivingRoute } from "./hooks/useDrivingRoute";
 export { useGeoLocation } from "./hooks/useGeoLocation";

package/src/types/interface.ts

@@ -28,6 +28,7 @@ export type City = {
 export interface RegisterOverlay<T> {
   add: (overlay: T) => void;
   remove: (overlay: T) => void;
+  setFitView: () => void;
 }
 
 export interface Route {
@@ -46,4 +47,14 @@ export type DriverStatus =
   | "driverArrived"
   | "inService"
   | "canceled"
-  | "endService";
+  | "endService"
+  | "completed"
+  | "canceling"
+  | "banlanceRefund"
+  | "waitBanlanceRefund"
+  | "rechargePayed"
+  | "waitRechargePay"
+  | "payed"
+  | "waitpay"
+  | "refund"
+  | "confirmed";