@heycar/heycars-map 0.2.6 → 0.2.8

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

@@ -25,10 +25,11 @@ export type City = {
 export interface RegisterOverlay<T> {
     add: (overlay: T) => void;
     remove: (overlay: T) => void;
+    setFitView: () => void;
 }
 export interface Route {
     path: Point[];
     distance: number;
     duration: number;
 }
-export type DriverStatus = "dispatching" | "book-dispatching" | "dispatched" | "driverStartService" | "book-driverStartService" | "book-dispatched" | "driverArrived" | "inService" | "canceled" | "endService";
+export type DriverStatus = "dispatching" | "book-dispatching" | "dispatched" | "driverStartService" | "book-driverStartService" | "book-dispatched" | "driverArrived" | "inService" | "canceled" | "endService" | "completed" | "canceling" | "banlanceRefund" | "waitBanlanceRefund" | "rechargePayed" | "waitRechargePay" | "payed" | "waitpay" | "refund" | "confirmed";

package/package.json

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

package/src/App.tsx

@@ -1,5 +1,5 @@
 import { defineComponent } from "vue-demi";
-import { DemoBusinessQuoting } from "./components/Demo/DemoBusinessQuoting";
+import { HeycarDemo } from "./components/Demo/HeycarDemo";
 
 export const App = defineComponent({
   setup() {
@@ -7,7 +7,7 @@ export const App = defineComponent({
     // return () => <ABusinessDemo />;
     // return () => <SearchDemo />;
     // return () => <DemoBusinessTaxiService />;
-    return () => <DemoBusinessQuoting />;
-    // return () => <HeycarDemo />;
+    // return () => <DemoBusinessQuoting />;
+    return () => <HeycarDemo />;
   },
 });

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

@@ -0,0 +1,8 @@
+import { defineSetup } from "../../types/helper";
+import type { AddressBoxProps } from "../AddressBox";
+
+export const AbsoluteAddressBox = defineSetup((props: AddressBoxProps) => {
+  return () => {
+    return <div></div>;
+  };
+});

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

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

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

@@ -11,7 +11,7 @@ import { vec2lnglat } from "../../utils/transform";
 import { AAddressLocator, GAddressLocator } from "../AddressLocator";
 import * as css from "./AddressBox.css";
 
-interface AddressBoxProps {
+export interface AddressBoxProps {
   type: "box" | "locator";
   position: Point;
   title: string;

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

@@ -1,16 +1,15 @@
 import { HeycarMap, HeycarMapProps } from "../../components/MapProvider";
-import type { MapMountedProps } from "../../hooks/useMap";
 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"> &
-  MROP &
-  MapMountedProps & {
+  Required<MROP> & {
     from: Place;
     to: Place;
     renderDescription: (titleProps: { distance: number; duration: number }) => string;
@@ -42,7 +41,8 @@ export const BusinessQuotingMap = defineLagecySetup((props: BusinessQuotingMapPr
               description={renderDescription({ distance, duration })}
             />,
           ]}
-        ></DrivingRoute>
+        />
+        <FitViewOnce registerOverlay={registerOverlay} />
       </HeycarMap>
     );
   };

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

@@ -0,0 +1,157 @@
+import { computed, reactive, watchEffect } from "vue";
+import { HeycarMap, HeycarMapProps } from "../../components/MapProvider";
+import type { BusinessRecomendPlaceContext } from "../../hooks-business/useBusinessRecomendPlaceMap";
+import { useGeoLocation, UseGeoLocationProps } from "../../hooks/useGeoLocation";
+import { useHeycarMap } from "../../hooks/useHeycarMap";
+import { useMapDrag, UseMapDragProps } from "../../hooks/useMapDrag";
+import type { UseMapPlaceProps } from "../../hooks/useMapPlace";
+import { useMapRecomendPlace, UseMapRecomendPlaceProps } from "../../hooks/useMapRecomendPlace";
+import { useMapSupplier } from "../../hooks/useMapSupplier";
+import { defineLagecySetup } from "../../types/helper";
+import type { Place, Point } from "../../types/interface";
+import { AddressBox } from "../AddressBox";
+import { PassengerCircle } from "../PassengerCircle";
+import { PickupPoints } from "../PickupPoints";
+
+const RECOMMEND_PLACE_LIMIT = 30;
+
+export interface CenterPlaceSource {
+  source: "default" | "geo" | "drag" | "recomend" | "api";
+}
+export interface BusinessRecomendPlaceMapProps
+  extends Omit<HeycarMapProps, "center" | "zoom" | "mapRef">,
+    Pick<UseMapRecomendPlaceProps<CenterPlaceSource>, "getRecomendPlace"> {
+  title: string;
+  description: string;
+  geoDefaultPosition?: Point;
+  mapContext: BusinessRecomendPlaceContext;
+  onLoadGeoLocation?: UseGeoLocationProps["onLoad"];
+  onLoadDefaultGeoLocation?: UseGeoLocationProps["onLoadDefault"];
+  onChangeByDrag?: UseMapDragProps["onChange"];
+  onChangeGeoLocation?: UseGeoLocationProps["onChange"];
+  onChangePlace?: UseMapPlaceProps["onChange"];
+  onChangeRecomandPlace?: UseMapRecomendPlaceProps["onChange"];
+  onGeoError?: UseGeoLocationProps["onError"];
+}
+export const BusinessRecomendPlaceMap = defineLagecySetup(
+  (props: BusinessRecomendPlaceMapProps, { emit }) => {
+    const { geoDefaultPosition, getRecomendPlace, mapContext } = props;
+    const { mapRef, setMap, panTo } = useHeycarMap();
+    const { readyPromise } = useMapSupplier();
+    const centerPlace = reactive<Place>({
+      lng: geoDefaultPosition?.[0] ?? 0,
+      lat: geoDefaultPosition?.[1] ?? 0,
+      name: "",
+      cityName: undefined,
+    });
+    const centerPoint = computed<Point>(() => [centerPlace.lng, centerPlace.lat]);
+    const centerSource: CenterPlaceSource = { source: "geo" };
+    const setCenterPlaceByRecomand = (point: Point) => {
+      centerSource.source = "api";
+      centerPlace.lng = point[0];
+      centerPlace.lat = point[1];
+      updatePlace();
+    };
+    mapContext.setCenterPlaceByRecomand = setCenterPlaceByRecomand;
+    mapContext.panTo = panTo;
+    const setCenterByPlace = (place: Place) => {
+      centerSource.source = "api";
+      centerPlace.lng = place.lng;
+      centerPlace.lat = place.lat;
+      centerPlace.name = place.name;
+    };
+
+    const { geoPosition } = useGeoLocation({
+      geoDefaultPosition,
+      onLoad: async (value) => {
+        // geo 主入口
+        await readyPromise;
+        centerSource.source = "geo";
+        centerPlace.lng = value.position[0];
+        centerPlace.lat = value.position[1];
+        updatePlace();
+        emit("loadGeoLocation", value);
+      },
+      onLoadDefault: async (value) => {
+        // geo default position 主入口
+        await readyPromise;
+        centerSource.source = "geo";
+        centerPlace.lng = value.position[0];
+        centerPlace.lat = value.position[1];
+        updatePlace();
+        emit("loadDefaultGeoLocation", value);
+      },
+      onChange: (v) => emit("changeGeoLocation", v),
+      onError: (e) => emit("geoError", e),
+    });
+    const { isDragging } = useMapDrag({
+      mapRef,
+      onChange: (point) => {
+        centerSource.source = "drag";
+        centerPlace.lng = point[0];
+        centerPlace.lat = point[1];
+        updatePlace();
+        emit("changeByDrag", point);
+      },
+    });
+    const { updatePlace, updateRecomandPlace, placeCandidates } = useMapRecomendPlace({
+      pointRef: centerPoint,
+      context: centerSource,
+      getRecomendPlace,
+      getLimit: (context) => {
+        const source = context?.source;
+        switch (source) {
+          case "drag":
+          case "api":
+            return RECOMMEND_PLACE_LIMIT;
+          case "geo":
+          case "default":
+            return Infinity;
+          default:
+            throw new Error(`MyError: should not call getLimit on source: ${source}`);
+        }
+      },
+      onChangePlace: (place) => {
+        Object.assign(centerPlace, { ...place });
+        if (centerSource.source !== "recomend") {
+          updateRecomandPlace();
+        }
+        emit("changePlace", place);
+      },
+      onChange: (place) => {
+        centerSource.source = "recomend";
+        Object.assign(centerPlace, { ...place });
+        updatePlace();
+        emit("changeRecomandPlace", place);
+      },
+    });
+    watchEffect(() => {
+      mapContext.onChangeCenterPlace({ ...centerPlace });
+    });
+    watchEffect(() => {
+      mapContext.onChangeRecomendPlaces([...placeCandidates.value]);
+    });
+    return () => {
+      return (
+        <HeycarMap center={centerPoint.value} zoom={18} mapRef={setMap}>
+          <PassengerCircle position={geoPosition.value} />
+          <PickupPoints places={placeCandidates.value} onClick={setCenterByPlace} />
+          <AddressBox
+            position={centerPoint.value}
+            title={props.title}
+            description={props.description}
+            type={isDragging ? "locator" : "box"}
+          />
+        </HeycarMap>
+      );
+    };
+  }
+).props([
+  "description",
+  "fallback",
+  "geoDefaultPosition",
+  "getRecomendPlace",
+  "loading",
+  "mapContext",
+  "title",
+]);

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

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

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

@@ -222,8 +222,7 @@ const SectionEndService = defineSetup((props: SectionEndServiceProps, { emit })
 });
 
 export type BusinessTaxiServiceMapProps = Omit<HeycarMapProps, "center" | "zoom"> &
-  MROP &
-  MapMountedProps & {
+  Required<MROP> & {
     from: Place;
     to: Place;
     // @example 正在为您搜索附近司机
@@ -237,109 +236,124 @@ export type BusinessTaxiServiceMapProps = Omit<HeycarMapProps, "center" | "zoom"
     renderInServiceTitle: (titleProps: { distance: number; duration: number }) => string;
     getDriverPosition: () => Promise<Point>;
   };
-export const BusinessTaxiServiceMap = defineLagecySetup(
-  (props: BusinessTaxiServiceMapProps, { emit }) => {
+export const BusinessTaxiServiceMap = defineLagecySetup((props: BusinessTaxiServiceMapProps) => {
+  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,
+    (status, _, onCleanup) => {
+      if (!STATUS_NEED_CAR_POSITION.includes(status)) return;
+      const timer = setInterval(() => {
+        getDriverPosition().then((pos) => (carPositionRef.value = pos));
+      }, interval);
+      onCleanup(() => clearInterval(timer));
+    },
+    { immediate: true }
+  );
+  return () => {
     const {
+      driverStatus,
       from,
-      interval,
-      registerOverlay,
-      mapRef,
-      getDriverPosition,
-      renderStartSerivceTitle,
-      renderInServiceTitle,
+      to,
+      dispatchingTitle,
+      bookDispatchingTitle,
+      bookDispatchedTitle,
+      driverArrivedTitle,
     } = props;
-    const { geoPosition } = useGeoLocation({ geoDefaultPosition: place2point(from) });
-    const carPositionRef = ref<Point>(place2point(props.from));
-    const handleMounted = () => emit("mapMounted");
-    watch(
-      () => props.driverStatus,
-      (status, _, onCleanup) => {
-        if (!STATUS_NEED_CAR_POSITION.includes(status)) return;
-        const timer = setInterval(() => {
-          getDriverPosition().then((pos) => (carPositionRef.value = pos));
-        }, interval);
-        onCleanup(() => clearInterval(timer));
-      },
-      { immediate: true }
+    const carPosition = carPositionRef.value;
+    return (
+      <HeycarMap center={place2point(from)} zoom={13} mapRef={mapRef}>
+        {driverStatus === "dispatching" ? (
+          <SectionDispatching
+            from={from}
+            title={dispatchingTitle}
+            registerOverlay={registerOverlay}
+            onMapMounted={setFitView}
+          />
+        ) : driverStatus === "book-dispatching" ? (
+          <SectionDispatching
+            from={from}
+            title={bookDispatchingTitle}
+            registerOverlay={registerOverlay}
+            onMapMounted={setFitView}
+          />
+        ) : driverStatus === "dispatched" ||
+          driverStatus === "driverStartService" ||
+          driverStatus === "book-driverStartService" ? (
+          <SectionDriverStartService
+            from={from}
+            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}
+            registerOverlay={registerOverlay}
+            onMapMounted={setFitView}
+          />
+        ) : driverStatus === "driverArrived" ? (
+          <SectionDriverArrived
+            from={from}
+            carPosition={carPosition}
+            passengerPosition={geoPosition.value}
+            title={driverArrivedTitle}
+            registerOverlay={registerOverlay}
+            onMapMounted={setFitView}
+          />
+        ) : driverStatus === "canceled" || driverStatus === "canceling" ? (
+          <SectionCanceled from={from} to={to} registerOverlay={registerOverlay} />
+        ) : driverStatus === "endService" ||
+          driverStatus === "completed" ||
+          driverStatus === "banlanceRefund" ||
+          driverStatus === "waitBanlanceRefund" ||
+          driverStatus === "rechargePayed" ||
+          driverStatus === "waitRechargePay" ||
+          driverStatus === "payed" ||
+          driverStatus === "waitpay" ||
+          driverStatus === "refund" ||
+          driverStatus === "confirmed" ? (
+          <SectionEndService
+            from={from}
+            to={to}
+            registerOverlay={registerOverlay}
+            onMapMounted={setFitView}
+          />
+        ) : (
+          // 匹配不到就显示灰色路线
+          <SectionEndService
+            from={from}
+            to={to}
+            registerOverlay={registerOverlay}
+            onMapMounted={setFitView}
+          />
+        )}
+      </HeycarMap>
     );
-    return () => {
-      const {
-        driverStatus,
-        from,
-        to,
-        dispatchingTitle,
-        bookDispatchingTitle,
-        bookDispatchedTitle,
-        driverArrivedTitle,
-      } = props;
-      const carPosition = carPositionRef.value;
-      return (
-        <HeycarMap center={place2point(from)} zoom={13} mapRef={mapRef}>
-          {driverStatus === "dispatching" ? (
-            <SectionDispatching
-              from={from}
-              title={dispatchingTitle}
-              registerOverlay={registerOverlay}
-              onMapMounted={handleMounted}
-            />
-          ) : driverStatus === "book-dispatching" ? (
-            <SectionDispatching
-              from={from}
-              title={bookDispatchingTitle}
-              registerOverlay={registerOverlay}
-              onMapMounted={handleMounted}
-            />
-          ) : driverStatus === "dispatched" ||
-            driverStatus === "driverStartService" ||
-            driverStatus === "book-driverStartService" ? (
-            <SectionDriverStartService
-              from={from}
-              carPosition={carPosition}
-              passengerPosition={geoPosition.value}
-              renderTitle={renderStartSerivceTitle}
-              registerOverlay={registerOverlay}
-              onMapMounted={handleMounted}
-            />
-          ) : driverStatus === "book-dispatched" ? (
-            <SectionBookDispatched
-              from={from}
-              passengerPosition={geoPosition.value}
-              title={bookDispatchedTitle}
-              registerOverlay={registerOverlay}
-              onMapMounted={handleMounted}
-            />
-          ) : driverStatus === "inService" ? (
-            <SectionInService
-              to={to}
-              carPosition={carPosition}
-              renderTitle={renderInServiceTitle}
-              registerOverlay={registerOverlay}
-              onMapMounted={handleMounted}
-            />
-          ) : driverStatus === "driverArrived" ? (
-            <SectionDriverArrived
-              from={from}
-              carPosition={carPosition}
-              passengerPosition={geoPosition.value}
-              title={driverArrivedTitle}
-              registerOverlay={registerOverlay}
-              onMapMounted={handleMounted}
-            />
-          ) : driverStatus === "canceled" ? (
-            <SectionCanceled from={from} to={to} registerOverlay={registerOverlay} />
-          ) : driverStatus === "endService" ? (
-            <SectionEndService
-              from={from}
-              to={to}
-              registerOverlay={registerOverlay}
-              onMapMounted={handleMounted}
-            />
-          ) : null}
-        </HeycarMap>
-      );
-    };
-  }
-).props([
+  };
+}).props([
   "bookDispatchedTitle",
   "bookDispatchingTitle",
   "dispatchingTitle",

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/PlaceCircle/PlaceCircle.tsx

@@ -7,7 +7,7 @@ import {
 } from "../../components/GmapAdvancedMarkerView";
 import { useMapSupplier } from "../../hooks/useMapSupplier";
 import { AnchorType } from "../../types/amap/marker";
-import { createElement, defineLagecySetup, defineSetup } from "../../types/helper";
+import { createElement, defineSetup } from "../../types/helper";
 import type { Point } from "../../types/interface";
 import { createDom } from "../../utils/dom";
 import { vec2lnglat } from "../../utils/transform";
@@ -20,10 +20,7 @@ export interface PlaceCircleProps {
   hideIcon?: boolean;
   onClick?: (value: Point) => any;
 }
-export const APlaceCircle = defineLagecySetup(function APlaceCircle(
-  props: PlaceCircleProps,
-  { emit }
-) {
+export const APlaceCircle = defineSetup(function APlaceCircle(props: PlaceCircleProps, { emit }) {
   const textAlignRef = computed(() => props.textAlign ?? "right");
   const contentRef = computed(() => {
     const { hideIcon = false } = props;
@@ -46,20 +43,19 @@ export const APlaceCircle = defineLagecySetup(function APlaceCircle(
     console.log("on amap marker e = ", e);
     emit("click", props.position);
   };
-  return () => (
-    <AmapMarker
-      position={props.position}
-      content={props.label ? contentRef.value : contentWithoutLabelRef.value}
-      anchor={textAlignRef.value === "left" ? AnchorType.middleRight : AnchorType.middleLeft}
-      onClick={handleClick}
-    />
-  );
-}).props(["hideIcon", "label", "position", "textAlign"]);
+  return () => {
+    return (
+      <AmapMarker
+        position={props.position}
+        content={props.label ? contentRef.value : contentWithoutLabelRef.value}
+        anchor={textAlignRef.value === "left" ? AnchorType.middleRight : AnchorType.middleLeft}
+        onClick={handleClick}
+      />
+    );
+  };
+});
 
-export const GPlaceCircle = defineLagecySetup(function GPlaceCircle(
-  props: PlaceCircleProps,
-  { emit }
-) {
+export const GPlaceCircle = defineSetup(function GPlaceCircle(props: PlaceCircleProps, { emit }) {
   const textAlignRef = computed(() => props.textAlign ?? "right");
   const contentRef = computed(() => {
     const { hideIcon = false } = props;
@@ -96,7 +92,7 @@ export const GPlaceCircle = defineLagecySetup(function GPlaceCircle(
       onClick={handleClick}
     />
   );
-}).props(["hideIcon", "label", "position", "textAlign"]);
+});
 
 export const PlaceCircle = defineSetup(function PlaceCircle(props: PlaceCircleProps, { emit }) {
   const payload = useMapSupplier();

package/src/components/Demo/DemoBusinessQuoting.tsx

@@ -24,7 +24,7 @@ export const DemoBusinessQuoting = defineSetup(function DemoBusinessTaxiService(
 });
 
 const SomeQuotingPage = defineSetup(function SomeQuotingPage() {
-  const { setMap, setFitView, registerFitVeiw } = useBusinessQuotingMap();
+  const { setMap, registerFitVeiw } = useBusinessQuotingMap();
   return () => (
     <BusinessQuotingMap
       class={css.demo}
@@ -33,7 +33,6 @@ const SomeQuotingPage = defineSetup(function SomeQuotingPage() {
       renderDescription={({ distance, duration }) => `全程 *${distance}公里*  约行驶 *${duration}*`}
       mapRef={setMap}
       registerOverlay={registerFitVeiw}
-      onMapMounted={setFitView}
     />
   );
 });

package/src/components/Demo/DemoBusinessTaxiService.tsx

@@ -47,7 +47,6 @@ export const TaxiCarServicePage = defineSetup(function TaxiCarServicePage() {
       interval={5000}
       mapRef={setMap}
       registerOverlay={registerFitVeiw}
-      onMapMounted={setFitView}
     />
   );
 });