@heycar/heycars-map 0.2.5 → 0.2.7

package/dist/style.css

@@ -1 +1 @@
-.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}._1l6offo1{width:4.53vw;height:4.53vw;margin-bottom:-2.265vw}._1l6offo2{width:16.27vw;height:16.27vw;margin-bottom:-8.135vw}.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{opacity:0}.fhyw8b{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}._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}._1l6offo0{display:flex}._1l6offo1{width:4.53vw;height:4.53vw;margin-bottom:-2.265vw}._1l6offo2{width:16.27vw;height:16.27vw;margin-bottom:-8.135vw}.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{opacity:0}.fhyw8b{font-size:3.47vw;font-family:PingFangSC-Semibold,PingFang SC;font-weight:600;color:#243e66;line-height:4.53vw;white-space:nowrap}._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

@@ -7,6 +7,7 @@ export type Place = {
     lat: number;
     name: string;
     cityName?: string;
+    cityId?: string;
 };
 export interface AutoCompletePlace extends Place {
     placeId?: string;
@@ -24,6 +25,7 @@ export type City = {
 export interface RegisterOverlay<T> {
     add: (overlay: T) => void;
     remove: (overlay: T) => void;
+    setFitView: () => void;
 }
 export interface Route {
     path: Point[];

package/package.json

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

package/src/App.tsx

@@ -1,12 +1,13 @@
 import { defineComponent } from "vue-demi";
-import { HeycarDemo } from "./components/Demo/HeycarDemo";
+import { DemoBusinessTaxiService } from "./components/Demo/DemoBusinessTaxiService";
 
 export const App = defineComponent({
   setup() {
     // return () => <Hello class={"helloclass2"} qyc={2} style={{ color: "red" }} />;
     // return () => <ABusinessDemo />;
     // return () => <SearchDemo />;
-    // return () => <DemoBusinessTaxiService />;
-    return () => <HeycarDemo />;
+    return () => <DemoBusinessTaxiService />;
+    // return () => <DemoBusinessQuoting />;
+    // return () => <HeycarDemo />;
   },
 });

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

@@ -0,0 +1,49 @@
+import { HeycarMap, HeycarMapProps } from "../../components/MapProvider";
+import type { MROP } from "../../hooks/useOverlay";
+import { defineLagecySetup } from "../../types/helper";
+import type { Place } from "../../types/interface";
+import { place2point } from "../../utils/transform";
+import { DrivingLine } from "../DrivingLine";
+import { DrivingRoute } from "../DrivingRoute";
+import { FitViewOnce } from "../FitView";
+import { StartEndPoint } from "../StartEndPoint";
+
+export type BusinessQuotingMapProps = Omit<HeycarMapProps, "center" | "zoom"> &
+  Required<MROP> & {
+    from: Place;
+    to: Place;
+    renderDescription: (titleProps: { distance: number; duration: number }) => string;
+  };
+export const BusinessQuotingMap = defineLagecySetup((props: BusinessQuotingMapProps) => {
+  const { registerOverlay, mapRef, renderDescription } = props;
+  return () => {
+    const { from: fromPlace, to: toPlace } = props;
+    const from = place2point(fromPlace);
+    const to = place2point(toPlace);
+    return (
+      <HeycarMap mapRef={mapRef} center={from} zoom={13}>
+        <StartEndPoint
+          type="start"
+          registerOverlay={registerOverlay}
+          position={from}
+          title={fromPlace.name}
+        />
+        <DrivingRoute
+          to={to}
+          from={from}
+          render={({ path, distance, duration }) => [
+            <DrivingLine path={path} />,
+            <StartEndPoint
+              type="end"
+              registerOverlay={registerOverlay}
+              position={to}
+              title={toPlace.name}
+              description={renderDescription({ distance, duration })}
+            />,
+          ]}
+        />
+        <FitViewOnce registerOverlay={registerOverlay} />
+      </HeycarMap>
+    );
+  };
+}).props(["fallback", "from", "loading", "mapRef", "registerOverlay", "renderDescription", "to"]);

package/src/business-components/BusinessQuotingMap/index.ts

@@ -0,0 +1 @@
+export * from "./BusinessQuotingMap";

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

@@ -1,6 +1,8 @@
 import { ref, watch } from "vue-demi";
 import { HeycarMap, HeycarMapProps } from "../../components/MapProvider";
 import { useGeoLocation } from "../../hooks/useGeoLocation";
+import { MapMountedProps, onMapMounted } from "../../hooks/useMap";
+import type { MROP } from "../../hooks/useOverlay";
 import { defineLagecySetup, defineSetup } from "../../types/helper";
 import type { DriverStatus, Place, Point } from "../../types/interface";
 import { place2point } from "../../utils/transform";
@@ -22,17 +24,24 @@ const STATUS_NEED_CAR_POSITION: DriverStatus[] = [
   "driverArrived",
 ];
 
-interface SectionDispatchingProps {
-  title: string;
-  from: Place;
-}
-const SectionDispatching = defineSetup((props: SectionDispatchingProps) => {
+type SectionDispatchingProps = MROP &
+  MapMountedProps & {
+    title: string;
+    from: Place;
+  };
+const SectionDispatching = defineSetup((props: SectionDispatchingProps, { emit }) => {
+  onMapMounted(() => emit("mapMounted"));
   return () => {
-    const { from: fromPlace, title } = props;
+    const { from: fromPlace, title, registerOverlay } = props;
     const from = place2point(fromPlace);
     return (
       <div>
-        <StartEndPoint type="start" position={from} title={title} />
+        <StartEndPoint
+          type="start"
+          position={from}
+          title={title}
+          registerOverlay={registerOverlay}
+        />
         <WaveCircle position={from} />
         <PlaceCircle position={from} label={fromPlace.name} hideIcon />
       </div>
@@ -40,19 +49,21 @@ const SectionDispatching = defineSetup((props: SectionDispatchingProps) => {
   };
 });
 
-interface SectionDriverStartServiceProps {
-  passengerPosition: Point;
-  carPosition: Point;
-  from: Place;
-  renderTitle: (props: Pick<DrivingRouteRenderProps, "duration" | "distance">) => string;
-}
-const SectionDriverStartService = defineSetup((props: SectionDriverStartServiceProps) => {
+type SectionDriverStartServiceProps = MROP &
+  MapMountedProps & {
+    passengerPosition: Point;
+    carPosition: Point;
+    from: Place;
+    renderTitle: (props: Pick<DrivingRouteRenderProps, "duration" | "distance">) => string;
+  };
+const SectionDriverStartService = defineSetup((props: SectionDriverStartServiceProps, { emit }) => {
+  onMapMounted(() => emit("mapMounted"));
   return () => {
-    const { from: fromPlace, carPosition, passengerPosition, renderTitle } = props;
+    const { from: fromPlace, carPosition, passengerPosition, renderTitle, registerOverlay } = props;
     const from = place2point(fromPlace);
     return (
       <div>
-        <StartEndPoint type="start" position={from} />
+        <StartEndPoint type="start" position={from} registerOverlay={registerOverlay} />
         <PlaceCircle position={from} label={fromPlace.name} hideIcon />
         <DrivingRoute
           from={carPosition}
@@ -67,78 +78,97 @@ const SectionDriverStartService = defineSetup((props: SectionDriverStartServiceP
           to={from}
           render={({ path }) => <WalkingLine path={path} />}
         />
-        <PassengerCircle position={passengerPosition} />
+        <PassengerCircle position={passengerPosition} registerOverlay={registerOverlay} />
       </div>
     );
   };
 });
 
-interface SectionBookDispatchedProps {
-  passengerPosition: Point;
-  from: Place;
-  // @example 司机位置将在临近出发时间展示
-  title: string;
-}
-const SectionBookDispatched = defineSetup((props: SectionBookDispatchedProps) => {
+type SectionBookDispatchedProps = MROP &
+  MapMountedProps & {
+    passengerPosition: Point;
+    from: Place;
+    // @example 司机位置将在临近出发时间展示
+    title: string;
+  };
+const SectionBookDispatched = defineSetup((props: SectionBookDispatchedProps, { emit }) => {
+  onMapMounted(() => emit("mapMounted"));
   return () => {
-    const { from: fromPlace, passengerPosition, title } = props;
+    const { from: fromPlace, passengerPosition, title, registerOverlay } = props;
     const from = place2point(fromPlace);
     return (
       <div>
-        <StartEndPoint type="start" position={from} title={title} />
+        <StartEndPoint
+          type="start"
+          position={from}
+          title={title}
+          registerOverlay={registerOverlay}
+        />
         <PlaceCircle position={from} label={fromPlace.name} hideIcon />
-        <PassengerCircle position={passengerPosition}></PassengerCircle>
+        <PassengerCircle position={passengerPosition} registerOverlay={registerOverlay} />
       </div>
     );
   };
 });
 
-interface SectionDriverArrivedProps {
-  from: Place;
-  carPosition: Point;
-  passengerPosition: Point;
-  // @example 司机已等待 *00:35*
-  title: string;
-}
-const SectionDriverArrived = defineSetup((props: SectionDriverArrivedProps) => {
+type SectionDriverArrivedProps = MROP &
+  MapMountedProps & {
+    from: Place;
+    carPosition: Point;
+    passengerPosition: Point;
+    // @example 司机已等待 *00:35*
+    title: string;
+  };
+const SectionDriverArrived = defineSetup((props: SectionDriverArrivedProps, { emit }) => {
+  onMapMounted(() => emit("mapMounted"));
   return () => {
-    const { from: fromPlace, carPosition, passengerPosition, title } = props;
+    const { from: fromPlace, carPosition, passengerPosition, title, registerOverlay } = props;
     const from = place2point(fromPlace);
     return (
       <div>
-        <TaxiCar position={carPosition} title={title} />
-        <StartEndPoint type="start" position={from} />
+        <TaxiCar position={carPosition} title={title} registerOverlay={registerOverlay} />
+        <StartEndPoint type="start" position={from} registerOverlay={registerOverlay} />
         <PlaceCircle position={from} label={fromPlace.name} hideIcon />
         <WalkingRoute
           from={passengerPosition}
           to={from}
           render={({ path }) => <WalkingLine path={path} />}
         />
-        <PassengerCircle position={passengerPosition} size="small" />
+        <PassengerCircle
+          position={passengerPosition}
+          size="small"
+          registerOverlay={registerOverlay}
+        />
       </div>
     );
   };
 });
 
-interface SectionInServiceProps {
-  to: Place;
-  carPosition: Point;
-  renderTitle: (props: Pick<DrivingRouteRenderProps, "duration" | "distance">) => string;
-}
-const SectionInService = defineSetup((props: SectionInServiceProps) => {
+type SectionInServiceProps = MROP &
+  MapMountedProps & {
+    to: Place;
+    carPosition: Point;
+    renderTitle: (props: Pick<DrivingRouteRenderProps, "duration" | "distance">) => string;
+  };
+const SectionInService = defineSetup((props: SectionInServiceProps, { emit }) => {
+  onMapMounted(() => emit("mapMounted"));
   return () => {
-    const { to: toPlace, carPosition, renderTitle } = props;
+    const { to: toPlace, carPosition, renderTitle, registerOverlay } = props;
     const to = place2point(toPlace);
     return (
       <div>
-        <StartEndPoint type="end" position={to} />
-        <PlaceCircle position={carPosition} label="'WebSter Dental Plaza'" hide-icon="true" />
+        <StartEndPoint type="end" position={to} registerOverlay={registerOverlay} />
+        <PlaceCircle position={carPosition} label="'WebSter Dental Plaza'" hideIcon />
         <DrivingRoute
           from={carPosition}
           to={to}
           render={({ path, distance, duration }) => [
             <DrivingLine path={path} />,
-            <TaxiCar position={carPosition} title={renderTitle({ distance, duration })} />,
+            <TaxiCar
+              position={carPosition}
+              title={renderTitle({ distance, duration })}
+              registerOverlay={registerOverlay}
+            />,
           ]}
         />
       </div>
@@ -146,19 +176,21 @@ const SectionInService = defineSetup((props: SectionInServiceProps) => {
   };
 });
 
-interface SectionCanceledProps {
-  from: Place;
-  to: Place;
-}
-const SectionCanceled = defineSetup((props: SectionCanceledProps) => {
+type SectionCanceledProps = MROP &
+  MapMountedProps & {
+    from: Place;
+    to: Place;
+  };
+const SectionCanceled = defineSetup((props: SectionCanceledProps, { emit }) => {
+  onMapMounted(() => emit("mapMounted"));
   return () => {
-    const { from: fromPlace, to: toPlace } = props;
+    const { from: fromPlace, to: toPlace, registerOverlay } = props;
     const from = place2point(fromPlace);
     const to = place2point(toPlace);
     return (
       <div>
-        <StartEndPoint type="start" position={from} />
-        <StartEndPoint type="end" position={to} />
+        <StartEndPoint type="start" position={from} registerOverlay={registerOverlay} />
+        <StartEndPoint type="end" position={to} registerOverlay={registerOverlay} />
         <PlaceCircle position={from} label={fromPlace.name} hideIcon />
         <PlaceCircle position={to} label={toPlace.name} hideIcon />
       </div>
@@ -166,19 +198,21 @@ const SectionCanceled = defineSetup((props: SectionCanceledProps) => {
   };
 });
 
-interface SectionEndServiceProps {
-  from: Place;
-  to: Place;
-}
-const SectionEndService = defineSetup((props: SectionEndServiceProps) => {
+type SectionEndServiceProps = MROP &
+  MapMountedProps & {
+    from: Place;
+    to: Place;
+  };
+const SectionEndService = defineSetup((props: SectionEndServiceProps, { emit }) => {
+  onMapMounted(() => emit("mapMounted"));
   return () => {
-    const { from: fromPlace, to: toPlace } = props;
+    const { from: fromPlace, to: toPlace, registerOverlay } = props;
     const from = place2point(fromPlace);
     const to = place2point(toPlace);
     return (
       <div>
-        <StartEndPoint type="start" position={from} />
-        <StartEndPoint type="end" position={to} />
+        <StartEndPoint type="start" position={from} registerOverlay={registerOverlay} />
+        <StartEndPoint type="end" position={to} registerOverlay={registerOverlay} />
         <PlaceCircle position={from} label={fromPlace.name} hideIcon />
         <PlaceCircle position={to} label={toPlace.name} hideIcon />
         <DrivingRoute from={from} to={to} render={({ path }) => <DrivingLine path={path} done />} />
@@ -187,23 +221,33 @@ const SectionEndService = defineSetup((props: SectionEndServiceProps) => {
   };
 });
 
-export interface BusinessTaxiServiceMapProps extends Omit<HeycarMapProps, "center" | "zoom"> {
-  from: Place;
-  to: Place;
-  // @example 正在为您搜索附近司机
-  dispatchingTitle: string;
-  bookDispatchingTitle: string;
-  bookDispatchedTitle: string;
-  driverArrivedTitle: string;
-  driverStatus: DriverStatus;
-  interval: number;
-  renderStartSerivceTitle: (titleProps: { distance: number; duration: number }) => string;
-  renderInServiceTitle: (titleProps: { distance: number; duration: number }) => string;
-  getDriverPosition: () => Promise<Point>;
-}
+export type BusinessTaxiServiceMapProps = Omit<HeycarMapProps, "center" | "zoom"> &
+  Required<MROP> & {
+    from: Place;
+    to: Place;
+    // @example 正在为您搜索附近司机
+    dispatchingTitle: string;
+    bookDispatchingTitle: string;
+    bookDispatchedTitle: string;
+    driverArrivedTitle: string;
+    driverStatus: DriverStatus;
+    interval: number;
+    renderStartSerivceTitle: (titleProps: { distance: number; duration: number }) => string;
+    renderInServiceTitle: (titleProps: { distance: number; duration: number }) => string;
+    getDriverPosition: () => Promise<Point>;
+  };
 export const BusinessTaxiServiceMap = defineLagecySetup((props: BusinessTaxiServiceMapProps) => {
-  const { interval, getDriverPosition } = props;
-  const { geoPosition } = useGeoLocation();
+  const {
+    from,
+    interval,
+    registerOverlay,
+    mapRef,
+    getDriverPosition,
+    renderStartSerivceTitle,
+    renderInServiceTitle,
+  } = props;
+  const { setFitView } = registerOverlay;
+  const { geoPosition } = useGeoLocation({ geoDefaultPosition: place2point(from) });
   const carPositionRef = ref<Point>(place2point(props.from));
   watch(
     () => props.driverStatus,
@@ -225,16 +269,24 @@ export const BusinessTaxiServiceMap = defineLagecySetup((props: BusinessTaxiServ
       bookDispatchingTitle,
       bookDispatchedTitle,
       driverArrivedTitle,
-      renderStartSerivceTitle,
-      renderInServiceTitle,
     } = props;
     const carPosition = carPositionRef.value;
     return (
-      <HeycarMap center={place2point(from)} zoom={13}>
+      <HeycarMap center={place2point(from)} zoom={13} mapRef={mapRef}>
         {driverStatus === "dispatching" ? (
-          <SectionDispatching from={from} title={dispatchingTitle} />
+          <SectionDispatching
+            from={from}
+            title={dispatchingTitle}
+            registerOverlay={registerOverlay}
+            onMapMounted={setFitView}
+          />
         ) : driverStatus === "book-dispatching" ? (
-          <SectionDispatching from={from} title={bookDispatchingTitle} />
+          <SectionDispatching
+            from={from}
+            title={bookDispatchingTitle}
+            registerOverlay={registerOverlay}
+            onMapMounted={setFitView}
+          />
         ) : driverStatus === "dispatched" ||
           driverStatus === "driverStartService" ||
           driverStatus === "book-driverStartService" ? (
@@ -243,26 +295,43 @@ export const BusinessTaxiServiceMap = defineLagecySetup((props: BusinessTaxiServ
             carPosition={carPosition}
             passengerPosition={geoPosition.value}
             renderTitle={renderStartSerivceTitle}
+            registerOverlay={registerOverlay}
+            onMapMounted={setFitView}
           />
         ) : driverStatus === "book-dispatched" ? (
           <SectionBookDispatched
             from={from}
             passengerPosition={geoPosition.value}
             title={bookDispatchedTitle}
+            registerOverlay={registerOverlay}
+            onMapMounted={setFitView}
           />
         ) : driverStatus === "inService" ? (
-          <SectionInService to={to} carPosition={carPosition} renderTitle={renderInServiceTitle} />
+          <SectionInService
+            to={to}
+            carPosition={carPosition}
+            renderTitle={renderInServiceTitle}
+            registerOverlay={registerOverlay}
+            onMapMounted={setFitView}
+          />
         ) : driverStatus === "driverArrived" ? (
           <SectionDriverArrived
             from={from}
             carPosition={carPosition}
             passengerPosition={geoPosition.value}
             title={driverArrivedTitle}
+            registerOverlay={registerOverlay}
+            onMapMounted={setFitView}
           />
         ) : driverStatus === "canceled" ? (
-          <SectionCanceled from={from} to={to} />
+          <SectionCanceled from={from} to={to} registerOverlay={registerOverlay} />
         ) : driverStatus === "endService" ? (
-          <SectionEndService from={from} to={to} />
+          <SectionEndService
+            from={from}
+            to={to}
+            registerOverlay={registerOverlay}
+            onMapMounted={setFitView}
+          />
         ) : null}
       </HeycarMap>
     );
@@ -282,4 +351,5 @@ export const BusinessTaxiServiceMap = defineLagecySetup((props: BusinessTaxiServ
   "renderInServiceTitle",
   "renderStartSerivceTitle",
   "to",
+  "registerOverlay",
 ]);

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

@@ -1,6 +1,6 @@
-import { useMap } from "../../hooks/useMap";
+import { onMapMounted, useMap } from "../../hooks/useMap";
 import { useMapFitView, UseMapFitViewOutput, UseMapFitViewProps } from "../../hooks/useMapFitView";
-import type { AmapOverlay, GmapOverlay } from "../../hooks/useOverlay";
+import type { AmapOverlay, GmapOverlay, MROP } from "../../hooks/useOverlay";
 import { defineSetup, VNodeChild } from "../../types/helper";
 
 type FitViewRenderProps = UseMapFitViewOutput<AmapOverlay> | UseMapFitViewOutput<GmapOverlay>;
@@ -12,3 +12,11 @@ export const FitView = defineSetup(function FitView(props: FitViewProps, { slots
   const ctx = useMapFitView({ ...props, mapRef });
   return () => <div>{slots.render?.(ctx)}</div>;
 });
+
+export type FitViewOnceProps = Required<MROP>;
+export const FitViewOnce = defineSetup(function FitViewOnce(props: FitViewOnceProps, { slots }) {
+  const { registerOverlay } = props;
+  const { setFitView } = registerOverlay;
+  onMapMounted(setFitView);
+  return () => <div>{slots.default?.()}</div>;
+});

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

@@ -4,17 +4,20 @@ import imgPlaceCircle from "../../assets/icons/svg/place-circle.svg";
 import { AmapMarker } from "../../components/AmapMarker";
 import { GmapAdvancedMarkerView } from "../../components/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 { vec2lnglat } from "../../utils/transform";
 
 import * as css from "./PassengerCircle.css";
 
-interface PassengerCircleProps {
+interface PassengerCircleProps<T> extends MapRegisterOverlayProps<T> {
   position: [number, number];
   size?: "small" | "large";
 }
-export const APassengerCircle = defineSetup(function APassengerCircle(props: PassengerCircleProps) {
+export const APassengerCircle = defineSetup(function APassengerCircle(
+  props: PassengerCircleProps<AmapOverlay>
+) {
   const contentRef = computed(() => {
     const { size = "large" } = props;
     const src = size === "large" ? imgPassengerCircle : imgPlaceCircle;
@@ -22,23 +25,38 @@ export const APassengerCircle = defineSetup(function APassengerCircle(props: Pas
         <img src="${src}" class="${css.passengerCircle({ size })}">
       `;
   });
-  return () => (
-    <AmapMarker position={props.position} content={contentRef.value} anchor={"bottom-center"} />
-  );
+  return () => {
+    return (
+      <AmapMarker
+        position={props.position}
+        content={contentRef.value}
+        anchor={"bottom-center"}
+        registerOverlay={props.registerOverlay}
+      />
+    );
+  };
 });
 
-export const GPassengerCircle = defineSetup(function GPassengerCircle(props: PassengerCircleProps) {
+export const GPassengerCircle = defineSetup(function GPassengerCircle(
+  props: PassengerCircleProps<GmapOverlay>
+) {
   const contentRef = computed(() => {
     const { size = "large" } = props;
     const src = size === "large" ? imgPassengerCircle : imgPlaceCircle;
     return createDom("img", { class: css.passengerCircle({ size }), src });
   });
   return () => (
-    <GmapAdvancedMarkerView position={vec2lnglat(props.position)} content={contentRef.value} />
+    <GmapAdvancedMarkerView
+      position={vec2lnglat(props.position)}
+      content={contentRef.value}
+      registerOverlay={props.registerOverlay}
+    />
   );
 });
 
-export const PassengerCircle = defineSetup(function PassengerCircle(props: PassengerCircleProps) {
+export const PassengerCircle = defineSetup(function PassengerCircle(
+  props: PassengerCircleProps<AmapOverlay> | PassengerCircleProps<GmapOverlay>
+) {
   const payload = useMapSupplier();
   return () => {
     return createElement(payload.supplier === "gmap" ? GPassengerCircle : APassengerCircle, {

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, {