@heycar/heycars-map 0.2.4 → 0.2.6

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

@@ -3,17 +3,18 @@ import imgTaxicar from "../../assets/icons/svg/taxi-car.svg";
 import { AmapMarker } from "../../components/AmapMarker";
 import { GmapAdvancedMarkerView } from "../../components/GmapAdvancedMarkerView/GmapAdvancedMarkerView";
 import { useMapSupplier } from "../../hooks/useMapSupplier";
+import type { AmapOverlay, GmapOverlay, MapRegisterOverlayProps } from "../../hooks/useOverlay";
 import { createElement, defineSetup } from "../../types/helper";
 import { createDom } from "../../utils/dom";
 import { decodeAsterisk, vec2lnglat } from "../../utils/transform";
 import * as css from "./TaxiCar.css";
 
-export interface TaxiCarProps {
+export interface TaxiCarProps<T> extends MapRegisterOverlayProps<T> {
   position: [number, number];
   angle?: number;
   title?: string;
 }
-export const ATaxiCar = defineSetup(function ATaxiCar(props: TaxiCarProps) {
+export const ATaxiCar = defineSetup(function ATaxiCar(props: TaxiCarProps<AmapOverlay>) {
   const contentRef = computed(() => {
     const titleRow = !props.title
       ? ""
@@ -34,11 +35,16 @@ export const ATaxiCar = defineSetup(function ATaxiCar(props: TaxiCarProps) {
       `;
   });
   return () => (
-    <AmapMarker position={props.position} content={contentRef.value} anchor={"bottom-center"} />
+    <AmapMarker
+      position={props.position}
+      content={contentRef.value}
+      anchor={"bottom-center"}
+      registerOverlay={props.registerOverlay}
+    />
   );
 });
 
-export const GTaxiCar = defineSetup(function GTaxiCar(props: TaxiCarProps) {
+export const GTaxiCar = defineSetup(function GTaxiCar(props: TaxiCarProps<GmapOverlay>) {
   const contentRef = computed(() => {
     const titleRow = !props.title
       ? ""
@@ -63,12 +69,18 @@ export const GTaxiCar = defineSetup(function GTaxiCar(props: TaxiCarProps) {
   });
   return () => {
     return (
-      <GmapAdvancedMarkerView position={vec2lnglat(props.position)} content={contentRef.value} />
+      <GmapAdvancedMarkerView
+        position={vec2lnglat(props.position)}
+        content={contentRef.value}
+        registerOverlay={props.registerOverlay}
+      />
     );
   };
 });
 
-export const TaxiCar = defineSetup(function TaxiCar(props: TaxiCarProps) {
+export const TaxiCar = defineSetup(function TaxiCar(
+  props: TaxiCarProps<AmapOverlay> | TaxiCarProps<GmapOverlay>
+) {
   const payload = useMapSupplier();
   return () => {
     return createElement(payload.supplier === "gmap" ? GTaxiCar : ATaxiCar, {

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

@@ -10,7 +10,6 @@ import type { Point } from "../../types/interface";
 
 export type WalkingRouteRenderProps = {
   path: Point[];
-  angle?: number;
 };
 export interface WalkingRouteProps extends UseWalkingRouteProps {
   render?: (props: WalkingRouteRenderProps) => VNodeChild;

package/src/components/AmapMarker/AmapMarker.ts

@@ -2,11 +2,17 @@ import { onMounted, onUnmounted, shallowRef, watchPostEffect } from "vue-demi";
 import { useAmap } from "../../hooks/useMap";
 import { AmapOverlay, MapRegisterOverlayProps, useMapOverlay } from "../../hooks/useOverlay";
 import { defineSetup } from "../../types/helper";
-import { watchNoneImmediatePostEffectForMapProperty } from "../../utils/compare";
+import type { MapEventHandler } from "../../types/mapHelper";
+import {
+  watchNoneImmediatePostEffectForMapProperty,
+  watchPostEffectForAMapEvent,
+} from "../../utils/compare";
 
-export type AmapMarkerProps = AMap.MarkerOptions & MapRegisterOverlayProps<AmapOverlay>;
+export interface AmapMarkerProps extends AMap.MarkerOptions, MapRegisterOverlayProps<AmapOverlay> {
+  onClick?: MapEventHandler<AMap.Marker>;
+}
 
-export const AmapMarker = defineSetup(function AmapMarker(props: AmapMarkerProps) {
+export const AmapMarker = defineSetup(function AmapMarker(props: AmapMarkerProps, { emit }) {
   const { registerOverlay } = props;
   const markerRef = shallowRef<AMap.Marker>();
   const mapRef = useAmap();
@@ -37,5 +43,6 @@ export const AmapMarker = defineSetup(function AmapMarker(props: AmapMarkerProps
     { name: "title", defaultValue: "" },
     { name: "extData", defaultValue: "" },
   ]);
+  watchPostEffectForAMapEvent(markerRef, props, emit, ["onClick"]);
   return () => null;
 });

package/src/components/Demo/DemoBusinessQuoting.tsx

@@ -0,0 +1,39 @@
+import { BusinessQuotingMap } from "../../business-components/BusinessQuotingMap";
+import { useBusinessQuotingMap } from "../../hooks-business/useBusinessQuotingMap";
+import { defineSetup } from "../../types/helper";
+import { MapProvider } from "../MapProvider/MapProvider";
+import * as css from "./Demo.css";
+
+const gmapApiKey = import.meta.env.VITE_GMAP_API_KEY;
+const gmapId = import.meta.env.VITE_GMAP_MAP_ID;
+const amapApiKey = import.meta.env.VITE_AMAP_API_KEY;
+const amapApiSecret = import.meta.env.VITE_AMAP_API_SECRET;
+
+export const DemoBusinessQuoting = defineSetup(function DemoBusinessTaxiService() {
+  return () => (
+    <MapProvider
+      amapKey={amapApiKey}
+      amapSecret={amapApiSecret}
+      gmapId={gmapId}
+      gmapKey={gmapApiKey}
+      supplier={"amap"}
+    >
+      <SomeQuotingPage />
+    </MapProvider>
+  );
+});
+
+const SomeQuotingPage = defineSetup(function SomeQuotingPage() {
+  const { setMap, setFitView, registerFitVeiw } = useBusinessQuotingMap();
+  return () => (
+    <BusinessQuotingMap
+      class={css.demo}
+      from={{ lng: 121.4, lat: 31.2, name: "from place name" }}
+      to={{ lng: 121.5, lat: 31.4, name: "to place name" }}
+      renderDescription={({ distance, duration }) => `全程 *${distance}公里*  约行驶 *${duration}*`}
+      mapRef={setMap}
+      registerOverlay={registerFitVeiw}
+      onMapMounted={setFitView}
+    />
+  );
+});

package/src/components/Demo/DemoBusinessTaxiService.tsx

@@ -0,0 +1,53 @@
+import { BusinessTaxiServiceMap } from "../../business-components/BusinessTaxiServiceMap/BusinessTaxiServiceMap";
+import { useBusinessTaxiServiceMap } from "../../hooks-business/useBusinessTaxiServiceMap";
+import { defineSetup } from "../../types/helper";
+import type { Point } from "../../types/interface";
+import { MapProvider } from "../MapProvider/MapProvider";
+import * as css from "./Demo.css";
+
+const gmapApiKey = import.meta.env.VITE_GMAP_API_KEY;
+const gmapId = import.meta.env.VITE_GMAP_MAP_ID;
+const amapApiKey = import.meta.env.VITE_AMAP_API_KEY;
+const amapApiSecret = import.meta.env.VITE_AMAP_API_SECRET;
+
+export const DemoBusinessTaxiService = defineSetup(function DemoBusinessTaxiService() {
+  return () => (
+    <MapProvider
+      amapKey={amapApiKey}
+      amapSecret={amapApiSecret}
+      gmapId={gmapId}
+      gmapKey={gmapApiKey}
+      supplier={"amap"}
+    >
+      <TaxiCarServicePage />
+    </MapProvider>
+  );
+});
+
+export const TaxiCarServicePage = defineSetup(function TaxiCarServicePage() {
+  const { setMap, setFitView, registerFitVeiw } = useBusinessTaxiServiceMap();
+  const getDriverPosition = () => Promise.resolve([121.42, 31.25] as Point);
+  return () => (
+    <BusinessTaxiServiceMap
+      class={css.demo}
+      from={{ lng: 121.4, lat: 31.2, name: "from place name" }}
+      to={{ lng: 121.5, lat: 31.4, name: "to place name" }}
+      driverStatus="book-driverStartService"
+      bookDispatchingTitle="2月14日 11:00 用车"
+      bookDispatchedTitle="司机位置将在临近出发时间展示"
+      dispatchingTitle="正在为您搜索附近司机"
+      driverArrivedTitle="司机已等待 00:35"
+      renderStartSerivceTitle={({ distance, duration }) =>
+        `距你*${distance}*公里, *${duration}*分钟`
+      }
+      renderInServiceTitle={({ distance, duration }) =>
+        `距离终点${distance}公里, 预计${duration}分钟`
+      }
+      getDriverPosition={getDriverPosition}
+      interval={5000}
+      mapRef={setMap}
+      registerOverlay={registerFitVeiw}
+      onMapMounted={setFitView}
+    />
+  );
+});

package/src/components/Demo/HeycarDemo.tsx

@@ -1,8 +1,5 @@
 import { computed } from "vue-demi";
-import { DrivingLine } from "../../business-components/DrivingLine";
-import { DrivingRoute } from "../../business-components/DrivingRoute";
-import { PlaceCircle } from "../../business-components/PlaceCircle";
-import { TaxiCar } from "../../business-components/TaxiCar";
+import { PickupPoints } from "../../business-components/PickupPoints";
 import { useBusinessMapAutoComplete } from "../../hooks-business/useBusinessMapAutoComplete";
 import {
   useBusinessMapRecomendPlace,
@@ -27,7 +24,7 @@ export const HeycarDemo = defineSetup(function HeycarDemo() {
       amapSecret={amapApiSecret}
       gmapId={gmapId}
       gmapKey={gmapApiKey}
-      supplier={"gmap"}
+      supplier={"amap"}
     >
       <SomeHomePage />
     </MapProvider>
@@ -74,7 +71,10 @@ export const SomeHomePage = defineSetup(function SomeHomePage() {
   ) => {
     const { lat, lng } = place;
     console.log("getRecomendPlace context?.source = ", context?.source);
-    return [{ lat: lat + 0.0001, lng: lng + 0.0001, name: "place name 1" }];
+    return [
+      { lat: lat + 0.0001, lng: lng + 0.0001, name: "place name 1" },
+      { lat: lat + 0.002, lng: lng + 0.002, name: "place name 2" },
+    ];
   };
   const {
     centerPlace,
@@ -84,7 +84,9 @@ export const SomeHomePage = defineSetup(function SomeHomePage() {
     geoLoading,
     geoPosition,
     setCenterPlaceByRecomand,
+    setCenterByPlace,
   } = useBusinessMapRecomendPlace({
+    geoDefaultPosition: [0, 0],
     mapRef,
     recomendPlaceGeoLimit: 300,
     recomendPlaceDragLimit: 30,
@@ -135,7 +137,7 @@ export const SomeHomePage = defineSetup(function SomeHomePage() {
             title={"end point"}
             type="end"
           /> */}
-          {/* <PickupPoints places={placeCandidates.value} /> */}
+          <PickupPoints places={placeCandidates.value} onClick={setCenterByPlace} />
           {/* <AddressBox
             type="box"
             position={centerPoint.value}
@@ -150,16 +152,23 @@ export const SomeHomePage = defineSetup(function SomeHomePage() {
             ]}
             labels={["place name 1", "place name 2"]}
           /> */}
-          <DrivingRoute
+          {/* <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 />
+          {/* <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]}

package/src/components/GmapAdvancedMarkerView/GmapAdvancedMarkerView.ts

@@ -2,21 +2,31 @@ import { onMounted, onUnmounted, shallowRef, watch, watchPostEffect } from "vue-
 import { useGmap } from "../../hooks/useMap";
 import { GmapOverlay, MapRegisterOverlayProps, useMapOverlay } from "../../hooks/useOverlay";
 import { defineSetup } from "../../types/helper";
-import { watchNoneImmediatePostEffectForDeepOption } from "../../utils/compare";
+import type { MapEventHandler } from "../../types/mapHelper";
+import {
+  watchNoneImmediatePostEffectForDeepOption,
+  watchPostEffectForGMapEvent,
+} from "../../utils/compare";
 
-export type GmapAdvancedMarkerViewProps = google.maps.marker.AdvancedMarkerViewOptions &
-  MapRegisterOverlayProps<GmapOverlay>;
+export interface GmapAdvancedMarkerViewProps
+  extends google.maps.marker.AdvancedMarkerViewOptions,
+    MapRegisterOverlayProps<GmapOverlay> {
+  onClick?: MapEventHandler<google.maps.marker.AdvancedMarkerView>;
+}
 
 export const GmapAdvancedMarkerView = defineSetup(function GmapAdvancedMarkerView(
-  props: GmapAdvancedMarkerViewProps
+  props: GmapAdvancedMarkerViewProps,
+  { emit }
 ) {
   const { registerOverlay } = props;
   const markerRef = shallowRef<google.maps.marker.AdvancedMarkerView>();
   const mapRef = useGmap();
+  const handleClick: typeof emit = (name) => emit(name as any, { target: markerRef.value! });
   useMapOverlay({ registerOverlay, overlayRef: markerRef });
   onMounted(() => {
     const { registerOverlay, ...markerViewProps } = props;
     markerRef.value = new google.maps.marker.AdvancedMarkerView({ ...markerViewProps });
+    markerRef.value.addListener;
   });
   onUnmounted(() => {
     if (!markerRef.value) return;
@@ -48,5 +58,6 @@ export const GmapAdvancedMarkerView = defineSetup(function GmapAdvancedMarkerVie
       flush: "post",
     }
   );
+  watchPostEffectForGMapEvent(markerRef, props, handleClick, ["onClick"]);
   return () => null;
 });

package/src/hooks/useGeoLocation.ts

@@ -2,11 +2,13 @@ import { ref, watch } from "vue-demi";
 import type { Point } from "../types/interface";
 
 export interface UseGeoLocationProps {
+  geoDefaultPosition?: Point;
   onChange?: (value: { position: Point; coordinate: GeolocationCoordinates }) => any;
   onLoad?: (value: { position: Point; coordinate: GeolocationCoordinates }) => any;
+  onLoadDefault?: (value: { position: Point }) => any;
 }
 export const useGeoLocation = (props?: UseGeoLocationProps) => {
-  const { onChange, onLoad } = props ?? {};
+  const { onChange, onLoad, onLoadDefault, geoDefaultPosition } = props ?? {};
   const loading = ref(false);
   const readyRef = ref(false);
   const errorRef = ref<GeolocationPositionError>();
@@ -15,8 +17,8 @@ export const useGeoLocation = (props?: UseGeoLocationProps) => {
     altitude: 0,
     altitudeAccuracy: 0,
     heading: 0,
-    latitude: 0,
-    longitude: 0,
+    latitude: geoDefaultPosition?.[1] ?? 0,
+    longitude: geoDefaultPosition?.[0] ?? 0,
     speed: 0,
   });
   const positionRef = ref<Point>([coordinateRef.value.longitude, coordinateRef.value.latitude]);
@@ -40,6 +42,8 @@ export const useGeoLocation = (props?: UseGeoLocationProps) => {
         (error) => {
           loading.value = false;
           errorRef.value = error;
+          const position = props?.geoDefaultPosition;
+          if (position) onLoadDefault?.({ position });
           console.log("errorRef = ", errorRef);
         },
         // todo 要不要 timeout

package/src/hooks/useMap.ts

@@ -1,4 +1,4 @@
-import { inject, provide, ShallowRef } from "vue-demi";
+import { inject, provide, ShallowRef, watch } from "vue-demi";
 import type { MapShallowRef } from "../types/interface";
 import { useMapSupplier } from "./useMapSupplier";
 
@@ -27,3 +27,17 @@ export const provideMap = (mapRef: MapShallowRef) => {
     ? provideGmap(mapRef as MapShallowRef<google.maps.Map>)
     : provideAmap(mapRef as MapShallowRef<AMap.Map>);
 };
+
+export interface MapMountedProps {
+  onMapMounted?: () => any;
+}
+export const onMapMounted = (callback: (...args: any) => any) => {
+  const mapRef = useMap();
+  watch(
+    () => mapRef.value,
+    (map) => {
+      if (!map) return;
+      Promise.resolve().then(callback);
+    }
+  );
+};

package/src/hooks/useMapFitView.ts

@@ -13,6 +13,11 @@ type UseAmapFitViewPropsForListeners = {
   // onZoomEnd?: MapEventHandler<AMap.Map>;
 };
 
+export interface UseMapFitViewOutput<L> {
+  setFitView: () => void;
+  registerFitVeiw: RegisterOverlay<L>;
+}
+
 export interface UseMapFitViewProps<M = AMap.Map | google.maps.Map> {
   mapRef: MapShallowRef<M>;
   padding?: [number, number, number, number];
@@ -119,7 +124,9 @@ export const useGmapFitView = (props: UseMapFitViewProps<google.maps.Map>) => {
   return { registerFitVeiw, setFitView };
 };
 
-export const useMapFitView = (props: UseMapFitViewProps) => {
+export const useMapFitView = (
+  props: UseMapFitViewProps
+): UseMapFitViewOutput<AmapOverlay> | UseMapFitViewOutput<GmapOverlay> => {
   const { supplier } = useMapSupplier();
   return supplier === "gmap"
     ? useGmapFitView(props as UseMapFitViewProps<google.maps.Map>)

package/src/hooks/useOverlay.ts

@@ -1,6 +1,7 @@
 import { ShallowRef, watch } from "vue-demi";
 import type { RegisterOverlay } from "../types/interface";
 
+export type MROP = MapRegisterOverlayProps<AmapOverlay> | MapRegisterOverlayProps<GmapOverlay>;
 export interface MapRegisterOverlayProps<T> {
   registerOverlay?: RegisterOverlay<T>;
 }

package/src/hooks/useWalkingRoute.ts

@@ -19,11 +19,14 @@ export const useAWalkingRoute = (props: UseWalkingRouteProps) => {
           case "complete": {
             let path: Point[] = [];
             const walkingResult = result as AMap.WalkingResult;
-            for (const route of walkingResult.routes) {
-              for (const step of route.steps) {
-                const stepPath = step.path.map<Point>(({ lng, lat }) => [lng, lat]);
-                path = path.concat(stepPath);
-              }
+            if (!walkingResult.routes) {
+              return;
+            }
+            const firstRoute = walkingResult.routes[0];
+            console.log("firstRoute = ", firstRoute);
+            for (const step of firstRoute.steps) {
+              const stepPath = step.path.map<Point>(({ lng, lat }) => [lng, lat]);
+              path = path.concat(stepPath);
             }
             pathRef.value = path;
             return;
@@ -56,10 +59,12 @@ export const useGWalkingRoute = (props: UseWalkingRouteProps) => {
           switch (status) {
             case google.maps.DirectionsStatus.OK: {
               let path: Point[] = [];
-              result?.routes.map((route) => {
-                const stepPath = route.overview_path.map<Point>((item) => [item.lng(), item.lat()]);
-                path = path.concat(stepPath);
-              });
+              const firstRoute = result!.routes[0];
+              const stepPath = firstRoute.overview_path.map<Point>((item) => [
+                item.lng(),
+                item.lat(),
+              ]);
+              path = path.concat(stepPath);
               pathRef.value = path;
               return;
             }

package/src/hooks-business/useBusinessMapRecomendPlace.ts

@@ -13,9 +13,11 @@ export interface UseBusinessMapRecomendPlaceProps
   extends Pick<UseMapRecomendPlaceProps<CenterPlaceSource>, "getRecomendPlace"> {
   mapRef: MapShallowRef;
   defaultCenterPoint?: Point;
+  geoDefaultPosition?: Point;
   recomendPlaceGeoLimit: number;
   recomendPlaceDragLimit: number;
   onLoadGeoLocation?: UseGeoLocationProps["onLoad"];
+  onLoadDefaultGeoLocation?: UseGeoLocationProps["onLoadDefault"];
   onChangeByDrag?: UseMapDragProps["onChange"];
   onChangeGeoLocation?: UseGeoLocationProps["onChange"];
   onChangePlace?: UseMapPlaceProps["onChange"];
@@ -24,11 +26,13 @@ export interface UseBusinessMapRecomendPlaceProps
 export const useBusinessMapRecomendPlace = (props: UseBusinessMapRecomendPlaceProps) => {
   const {
     mapRef,
+    geoDefaultPosition,
     getRecomendPlace,
     defaultCenterPoint,
     recomendPlaceDragLimit,
     recomendPlaceGeoLimit,
     onLoadGeoLocation,
+    onLoadDefaultGeoLocation,
     onChangeByDrag,
     onChangeGeoLocation,
     onChangePlace,
@@ -49,6 +53,12 @@ export const useBusinessMapRecomendPlace = (props: UseBusinessMapRecomendPlacePr
     centerPlace.lat = point[1];
     updatePlace();
   };
+  const setCenterByPlace = (place: Place) => {
+    centerSource.source = "api";
+    centerPlace.lng = place.lng;
+    centerPlace.lat = place.lat;
+    centerPlace.name = place.name;
+  };
   if (defaultCenterPoint) {
     // default 主入口
     readyPromise.then(() => {
@@ -57,6 +67,7 @@ export const useBusinessMapRecomendPlace = (props: UseBusinessMapRecomendPlacePr
     });
   }
   const { geoLoading, geoError, geoPosition, geoCoordinate, geoReady } = useGeoLocation({
+    geoDefaultPosition,
     onLoad: async (value) => {
       // geo 主入口
       // 如果设置了默认位置，就不在拿 gps 作为默认位置
@@ -69,6 +80,18 @@ export const useBusinessMapRecomendPlace = (props: UseBusinessMapRecomendPlacePr
       }
       onLoadGeoLocation?.(value);
     },
+    onLoadDefault: async (value) => {
+      // geo default position 主入口
+      // 如果设置了默认位置，就不在拿 gps 作为默认位置
+      if (!defaultCenterPoint) {
+        await readyPromise;
+        centerSource.source = "geo";
+        centerPlace.lng = value.position[0];
+        centerPlace.lat = value.position[1];
+        updatePlace();
+      }
+      onLoadDefaultGeoLocation?.(value);
+    },
     onChange: onChangeGeoLocation,
   });
   const { isDragging } = useMapDrag({
@@ -123,5 +146,6 @@ export const useBusinessMapRecomendPlace = (props: UseBusinessMapRecomendPlacePr
     centerPoint,
     placeCandidates,
     setCenterPlaceByRecomand,
+    setCenterByPlace,
   };
 };

package/src/hooks-business/useBusinessQuotingMap.ts

@@ -0,0 +1,11 @@
+import { useHeycarMap } from "../hooks/useHeycarMap";
+import { useMapFitView } from "../hooks/useMapFitView";
+
+export const useBusinessQuotingMap = () => {
+  const { setMap, mapRef } = useHeycarMap();
+  const { registerFitVeiw, setFitView } = useMapFitView({
+    mapRef,
+    padding: [25, 20, 15, 15],
+  });
+  return { setMap, registerFitVeiw, setFitView };
+};

package/src/hooks-business/useBusinessTaxiServiceMap.ts

@@ -0,0 +1,12 @@
+import { useHeycarMap } from "../hooks/useHeycarMap";
+import { useMapFitView } from "../hooks/useMapFitView";
+
+export const useBusinessTaxiServiceMap = () => {
+  const { mapRef, setMap } = useHeycarMap();
+  const { registerFitVeiw, setFitView } = useMapFitView({
+    mapRef,
+    autoFitTimeout: 5000,
+    padding: [25, 20, 15, 15],
+  });
+  return { setMap, registerFitVeiw, setFitView };
+};

package/src/index.ts

@@ -1,5 +1,6 @@
 import "./style.css";
 export { AddressBox } from "./business-components/AddressBox";
+export { BusinessTaxiServiceMap } from "./business-components/BusinessTaxiServiceMap";
 export { DrivingLine } from "./business-components/DrivingLine";
 export { DrivingRoute } from "./business-components/DrivingRoute";
 export { PassengerCircle } from "./business-components/PassengerCircle";
@@ -12,8 +13,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/useBusinessMapFitView";
 export * from "./hooks-business/useBusinessMapRecomendPlace";
+export * from "./hooks-business/useBusinessTaxiServiceMap";
 export { useDrivingRoute } from "./hooks/useDrivingRoute";
 export { useGeoLocation } from "./hooks/useGeoLocation";
 export { useHeycarMap } from "./hooks/useHeycarMap";

package/src/types/interface.ts

@@ -7,6 +7,7 @@ export type Place = {
   lat: number;
   name: string;
   cityName?: string;
+  cityId?: string;
 };
 
 export interface AutoCompletePlace extends Place {
@@ -34,3 +35,15 @@ export interface Route {
   distance: number;
   duration: number;
 }
+
+export type DriverStatus =
+  | "dispatching"
+  | "book-dispatching"
+  | "dispatched"
+  | "driverStartService"
+  | "book-driverStartService"
+  | "book-dispatched"
+  | "driverArrived"
+  | "inService"
+  | "canceled"
+  | "endService";

package/src/utils/compare.ts

@@ -162,7 +162,10 @@ export function watchPostEffectForAMapEvent<
   });
 }
 
-export function watchPostEffectForGMapEvent<T extends google.maps.MVCObject, P>(
+export function watchPostEffectForGMapEvent<
+  T extends google.maps.MVCObject | google.maps.marker.AdvancedMarkerView,
+  P
+>(
   targetRef: ShallowRef<T | undefined> | Ref<T | undefined> | undefined,
   props: P,
   emit: EmitFn<EmitByProps<P>>,

package/todo.md

@@ -16,3 +16,10 @@ https://dawchihliou.github.io/articles/building-custom-google-maps-marker-react-
 5. home 页面用户 出发点与终点小于 200 米，需要提示，需要导出接口
 6. walkingRoute 显示报错
 7. 需要一个手段让 fitview 初始化起作用
+
+---
+
+1. locator 的气泡也要支持点击
+2. locator 气泡长度限制
+3. locator 拖动次数多了会不更新
+4. 郝瑞 searh Place 接口搜索次数多了会不更新

package/src/hooks-business/useBusinessMapFitView.ts

@@ -1,6 +0,0 @@
-import { useMapFitView, UseMapFitViewProps } from "../hooks/useMapFitView";
-
-export type UseBusinessMapFitViewProps = Pick<UseMapFitViewProps, "mapRef" | "autoFitTimeout">;
-export const useBusinessMapFitView = (props: UseBusinessMapFitViewProps) => {
-  return useMapFitView({ ...props, padding: [25, 20, 15, 15] });
-};