@heycar/heycars-map 0.2.10 → 0.2.11

package/package.json

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

package/src/App.tsx

@@ -1,6 +1,6 @@
 import { defineComponent } from "vue-demi";
 import { MapProvider } from "./components/MapProvider";
-import { DemoBusinessTaxiEnd } from "./Demo/DemoBusinessTaxiEnd";
+import { DemoBusinessTaxiService } from "./Demo/DemoBusinessTaxiService";
 
 const gmapApiKey = import.meta.env.VITE_GMAP_API_KEY;
 const gmapId = import.meta.env.VITE_GMAP_MAP_ID;
@@ -19,8 +19,8 @@ export const App = defineComponent({
       >
         {/* <DemoBusinessRecomendPlace /> */}
         {/* <DemoBusinessQuoting /> */}
-        {/* <DemoBusinessTaxiService /> */}
-        <DemoBusinessTaxiEnd />
+        <DemoBusinessTaxiService />
+        {/* <DemoBusinessTaxiEnd /> */}
       </MapProvider>
     );
   },

package/src/Demo/DemoBusinessTaxiService.tsx

@@ -1,32 +1,58 @@
+import { defineComponent } from "vue";
 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 type { Place, Point } from "../types/interface";
+import { isPlace } from "../utils/helper";
 import * as css from "./Demo.css";
 
-export const DemoBusinessTaxiService = defineSetup(function DemoBusinessTaxiService() {
-  const { setMap, 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="completed"
-      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}
-    />
-  );
+export const DemoBusinessTaxiService = defineComponent({
+  setup() {
+    const { setMap, registerFitVeiw } = useBusinessTaxiServiceMap();
+    return { setMap, registerFitVeiw };
+  },
+  data() {
+    return {
+      from: {} as Partial<Place>,
+      to: {} as Partial<Place>,
+    };
+  },
+  created() {
+    setTimeout(() => {
+      this.from = { lng: 121.4, lat: 31.2, name: "from place name" };
+      this.to = { lng: 121.5, lat: 31.4, name: "to place name" };
+    }, 1000);
+  },
+  methods: {
+    getDriverPosition() {
+      return Promise.resolve([121.42, 31.25] as Point);
+    },
+  },
+  render() {
+    const { setMap, getDriverPosition, registerFitVeiw, from, to } = this;
+    const isReady = isPlace(from) && isPlace(to);
+    if (!isReady) return null;
+    return (
+      <BusinessTaxiServiceMap
+        class={css.demo}
+        from={from}
+        to={to}
+        driverStatus="completed"
+        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}
+        log
+      />
+    );
+  },
 });

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

@@ -26,11 +26,13 @@ const STATUS_NEED_CAR_POSITION: DriverStatus[] = [
 ];
 
 type SectionDispatchingProps = MROP &
+  MapLogProps &
   MapMountedProps & {
     title: string;
     from: Place;
   };
 const SectionDispatching = defineSetup((props: SectionDispatchingProps, { emit }) => {
+  useMapLog(props, "SectionDispatching");
   onMapMounted(() => emit("mapMounted"));
   return () => {
     const { from: fromPlace, title, registerOverlay } = props;
@@ -42,15 +44,17 @@ const SectionDispatching = defineSetup((props: SectionDispatchingProps, { emit }
           position={from}
           title={title}
           registerOverlay={registerOverlay}
+          log={props.log}
         />
-        <WaveCircle position={from} />
-        <PlaceCircle position={from} label={fromPlace.name} hideIcon />
+        <WaveCircle position={from} log={props.log} />
+        <PlaceCircle position={from} label={fromPlace.name} hideIcon log={props.log} />
       </div>
     );
   };
 });
 
 type SectionDriverStartServiceProps = MROP &
+  MapLogProps &
   MapMountedProps & {
     passengerPosition: Point;
     carPosition: Point;
@@ -58,34 +62,51 @@ type SectionDriverStartServiceProps = MROP &
     renderTitle: (props: Pick<DrivingRouteRenderProps, "duration" | "distance">) => string;
   };
 const SectionDriverStartService = defineSetup((props: SectionDriverStartServiceProps, { emit }) => {
+  useMapLog(props, "SectionDriverStartService");
   onMapMounted(() => emit("mapMounted"));
   return () => {
     const { from: fromPlace, carPosition, passengerPosition, renderTitle, registerOverlay } = props;
     const from = place2point(fromPlace);
     return (
       <div>
-        <StartEndPoint type="start" position={from} registerOverlay={registerOverlay} />
-        <PlaceCircle position={from} label={fromPlace.name} hideIcon />
+        <StartEndPoint
+          type="start"
+          position={from}
+          registerOverlay={registerOverlay}
+          log={props.log}
+        />
+        <PlaceCircle position={from} label={fromPlace.name} hideIcon log={props.log} />
         <DrivingRoute
           from={carPosition}
           to={from}
+          log={props.log}
           render={({ path, distance, duration }) => [
-            <DrivingLine path={path} />,
-            <TaxiCar position={carPosition} title={renderTitle({ distance, duration })} />,
+            <DrivingLine path={path} log={props.log} />,
+            <TaxiCar
+              position={carPosition}
+              title={renderTitle({ distance, duration })}
+              log={props.log}
+            />,
           ]}
         />
         <WalkingRoute
           from={passengerPosition}
           to={from}
-          render={({ path }) => <WalkingLine path={path} />}
+          log={props.log}
+          render={({ path }) => <WalkingLine path={path} log={props.log} />}
+        />
+        <PassengerCircle
+          position={passengerPosition}
+          registerOverlay={registerOverlay}
+          log={props.log}
         />
-        <PassengerCircle position={passengerPosition} registerOverlay={registerOverlay} />
       </div>
     );
   };
 });
 
 type SectionBookDispatchedProps = MROP &
+  MapLogProps &
   MapMountedProps & {
     passengerPosition: Point;
     from: Place;
@@ -93,6 +114,7 @@ type SectionBookDispatchedProps = MROP &
     title: string;
   };
 const SectionBookDispatched = defineSetup((props: SectionBookDispatchedProps, { emit }) => {
+  useMapLog(props, "SectionBookDispatched");
   onMapMounted(() => emit("mapMounted"));
   return () => {
     const { from: fromPlace, passengerPosition, title, registerOverlay } = props;
@@ -104,15 +126,21 @@ const SectionBookDispatched = defineSetup((props: SectionBookDispatchedProps, {
           position={from}
           title={title}
           registerOverlay={registerOverlay}
+          log={props.log}
+        />
+        <PlaceCircle position={from} label={fromPlace.name} hideIcon log={props.log} />
+        <PassengerCircle
+          position={passengerPosition}
+          registerOverlay={registerOverlay}
+          log={props.log}
         />
-        <PlaceCircle position={from} label={fromPlace.name} hideIcon />
-        <PassengerCircle position={passengerPosition} registerOverlay={registerOverlay} />
       </div>
     );
   };
 });
 
 type SectionDriverArrivedProps = MROP &
+  MapLogProps &
   MapMountedProps & {
     from: Place;
     carPosition: Point;
@@ -121,24 +149,37 @@ type SectionDriverArrivedProps = MROP &
     title: string;
   };
 const SectionDriverArrived = defineSetup((props: SectionDriverArrivedProps, { emit }) => {
+  useMapLog(props, "SectionDriverArrived");
   onMapMounted(() => emit("mapMounted"));
   return () => {
     const { from: fromPlace, carPosition, passengerPosition, title, registerOverlay } = props;
     const from = place2point(fromPlace);
     return (
       <div>
-        <TaxiCar position={carPosition} title={title} registerOverlay={registerOverlay} />
-        <StartEndPoint type="start" position={from} registerOverlay={registerOverlay} />
-        <PlaceCircle position={from} label={fromPlace.name} hideIcon />
+        <TaxiCar
+          position={carPosition}
+          title={title}
+          registerOverlay={registerOverlay}
+          log={props.log}
+        />
+        <StartEndPoint
+          type="start"
+          position={from}
+          registerOverlay={registerOverlay}
+          log={props.log}
+        />
+        <PlaceCircle position={from} label={fromPlace.name} hideIcon log={props.log} />
         <WalkingRoute
           from={passengerPosition}
           to={from}
+          log={props.log}
           render={({ path }) => <WalkingLine path={path} />}
         />
         <PassengerCircle
           position={passengerPosition}
           size="small"
           registerOverlay={registerOverlay}
+          log={props.log}
         />
       </div>
     );
@@ -146,29 +187,38 @@ const SectionDriverArrived = defineSetup((props: SectionDriverArrivedProps, { em
 });
 
 type SectionInServiceProps = MROP &
+  MapLogProps &
   MapMountedProps & {
     to: Place;
     carPosition: Point;
     renderTitle: (props: Pick<DrivingRouteRenderProps, "duration" | "distance">) => string;
   };
 const SectionInService = defineSetup((props: SectionInServiceProps, { emit }) => {
+  useMapLog(props, "SectionInService");
   onMapMounted(() => emit("mapMounted"));
   return () => {
     const { to: toPlace, carPosition, renderTitle, registerOverlay } = props;
     const to = place2point(toPlace);
     return (
       <div>
-        <StartEndPoint type="end" position={to} registerOverlay={registerOverlay} />
-        <PlaceCircle position={carPosition} label="'WebSter Dental Plaza'" hideIcon />
+        <StartEndPoint type="end" position={to} registerOverlay={registerOverlay} log={props.log} />
+        <PlaceCircle
+          position={carPosition}
+          label="'WebSter Dental Plaza'"
+          hideIcon
+          log={props.log}
+        />
         <DrivingRoute
           from={carPosition}
           to={to}
+          log={props.log}
           render={({ path, distance, duration }) => [
-            <DrivingLine path={path} />,
+            <DrivingLine path={path} log={props.log} />,
             <TaxiCar
               position={carPosition}
               title={renderTitle({ distance, duration })}
               registerOverlay={registerOverlay}
+              log={props.log}
             />,
           ]}
         />
@@ -178,11 +228,13 @@ const SectionInService = defineSetup((props: SectionInServiceProps, { emit }) =>
 });
 
 type SectionCanceledProps = MROP &
+  MapLogProps &
   MapMountedProps & {
     from: Place;
     to: Place;
   };
 const SectionCanceled = defineSetup((props: SectionCanceledProps, { emit }) => {
+  useMapLog(props, "SectionCanceled");
   onMapMounted(() => emit("mapMounted"));
   return () => {
     const { from: fromPlace, to: toPlace, registerOverlay } = props;
@@ -190,10 +242,15 @@ const SectionCanceled = defineSetup((props: SectionCanceledProps, { emit }) => {
     const to = place2point(toPlace);
     return (
       <div>
-        <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 />
+        <StartEndPoint
+          type="start"
+          position={from}
+          registerOverlay={registerOverlay}
+          log={props.log}
+        />
+        <StartEndPoint type="end" position={to} registerOverlay={registerOverlay} log={props.log} />
+        <PlaceCircle position={from} label={fromPlace.name} hideIcon log={props.log} />
+        <PlaceCircle position={to} label={toPlace.name} hideIcon log={props.log} />
       </div>
     );
   };
@@ -214,18 +271,29 @@ export const SectionEndService = defineSetup((props: SectionEndServiceProps, { e
     const to = place2point(toPlace);
     return (
       <div>
-        <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 />} />
+        <StartEndPoint
+          type="start"
+          position={from}
+          registerOverlay={registerOverlay}
+          log={props.log}
+        />
+        <StartEndPoint type="end" position={to} registerOverlay={registerOverlay} log={props.log} />
+        <PlaceCircle position={from} label={fromPlace.name} hideIcon log={props.log} />
+        <PlaceCircle position={to} label={toPlace.name} hideIcon log={props.log} />
+        <DrivingRoute
+          from={from}
+          to={to}
+          render={({ path }) => <DrivingLine path={path} done log={props.log} />}
+          log={props.log}
+        />
       </div>
     );
   };
 });
 
 export type BusinessTaxiServiceMapProps = Omit<HeycarMapProps, "center" | "zoom"> &
-  Required<MROP> & {
+  Required<MROP> &
+  MapLogProps & {
     from: Place;
     to: Place;
     // @example 正在为您搜索附近司机
@@ -240,6 +308,7 @@ export type BusinessTaxiServiceMapProps = Omit<HeycarMapProps, "center" | "zoom"
     getDriverPosition: () => Promise<Point>;
   };
 export const BusinessTaxiServiceMap = defineLagecySetup((props: BusinessTaxiServiceMapProps) => {
+  useMapLog(props, "BusinessTaxiServiceMap");
   const {
     from,
     interval,
@@ -275,13 +344,14 @@ export const BusinessTaxiServiceMap = defineLagecySetup((props: BusinessTaxiServ
     } = props;
     const carPosition = carPositionRef.value;
     return (
-      <HeycarMap center={place2point(from)} zoom={13} mapRef={mapRef}>
+      <HeycarMap center={place2point(from)} zoom={13} mapRef={mapRef} log={props.log}>
         {driverStatus === "dispatching" ? (
           <SectionDispatching
             from={from}
             title={dispatchingTitle}
             registerOverlay={registerOverlay}
             onMapMounted={setFitView}
+            log={props.log}
           />
         ) : driverStatus === "book-dispatching" ? (
           <SectionDispatching
@@ -289,6 +359,7 @@ export const BusinessTaxiServiceMap = defineLagecySetup((props: BusinessTaxiServ
             title={bookDispatchingTitle}
             registerOverlay={registerOverlay}
             onMapMounted={setFitView}
+            log={props.log}
           />
         ) : driverStatus === "dispatched" ||
           driverStatus === "driverStartService" ||
@@ -300,6 +371,7 @@ export const BusinessTaxiServiceMap = defineLagecySetup((props: BusinessTaxiServ
             renderTitle={renderStartSerivceTitle}
             registerOverlay={registerOverlay}
             onMapMounted={setFitView}
+            log={props.log}
           />
         ) : driverStatus === "book-dispatched" ? (
           <SectionBookDispatched
@@ -308,6 +380,7 @@ export const BusinessTaxiServiceMap = defineLagecySetup((props: BusinessTaxiServ
             title={bookDispatchedTitle}
             registerOverlay={registerOverlay}
             onMapMounted={setFitView}
+            log={props.log}
           />
         ) : driverStatus === "inService" ? (
           <SectionInService
@@ -316,6 +389,7 @@ export const BusinessTaxiServiceMap = defineLagecySetup((props: BusinessTaxiServ
             renderTitle={renderInServiceTitle}
             registerOverlay={registerOverlay}
             onMapMounted={setFitView}
+            log={props.log}
           />
         ) : driverStatus === "driverArrived" ? (
           <SectionDriverArrived
@@ -325,9 +399,10 @@ export const BusinessTaxiServiceMap = defineLagecySetup((props: BusinessTaxiServ
             title={driverArrivedTitle}
             registerOverlay={registerOverlay}
             onMapMounted={setFitView}
+            log={props.log}
           />
         ) : driverStatus === "canceled" || driverStatus === "canceling" ? (
-          <SectionCanceled from={from} to={to} registerOverlay={registerOverlay} />
+          <SectionCanceled from={from} to={to} registerOverlay={registerOverlay} log={props.log} />
         ) : driverStatus === "endService" ||
           driverStatus === "completed" ||
           driverStatus === "banlanceRefund" ||
@@ -343,6 +418,7 @@ export const BusinessTaxiServiceMap = defineLagecySetup((props: BusinessTaxiServ
             to={to}
             registerOverlay={registerOverlay}
             onMapMounted={setFitView}
+            log={props.log}
           />
         ) : (
           // 匹配不到就显示灰色路线
@@ -351,12 +427,14 @@ export const BusinessTaxiServiceMap = defineLagecySetup((props: BusinessTaxiServ
             to={to}
             registerOverlay={registerOverlay}
             onMapMounted={setFitView}
+            log={props.log}
           />
         )}
       </HeycarMap>
     );
   };
 }).props([
+  "log",
   "bookDispatchedTitle",
   "bookDispatchingTitle",
   "dispatchingTitle",

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

@@ -1,15 +1,17 @@
 import { computed } from "vue-demi";
 import { AmapPolyline } from "../../components/AmapPolyline";
 import { GmapPolyline } from "../../components/GmapPolyline";
+import { MapLogProps, useMapLog } from "../../hooks/useMapLog";
 import { useMapSupplier } from "../../hooks/useMapSupplier";
 import { createElement, defineSetup } from "../../types/helper";
 import { vec2lnglat } from "../../utils/transform";
 
-export interface DrivingLineProps {
+export interface DrivingLineProps extends MapLogProps {
   done?: boolean;
   path: [number, number][];
 }
 export const ADrivingLine = defineSetup(function ADrivingLine(props: DrivingLineProps) {
+  useMapLog(props, "ADrivingLine");
   return () => {
     const vw = window.innerWidth * 0.01;
     const strokeWidth = 2.5 * vw;
@@ -63,6 +65,7 @@ export const ADrivingLine = defineSetup(function ADrivingLine(props: DrivingLine
 });
 
 export const GDrivingLine = defineSetup(function GDrivingLine(props: DrivingLineProps) {
+  useMapLog(props, "ADrivingLine");
   const pathRef = computed(() => props.path.map(vec2lnglat));
   return () => {
     const vw = window.innerWidth * 0.01;

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

@@ -6,6 +6,7 @@ import {
 } from "../../hooks/useDrivingRoute";
 import { useAmap, useGmap } from "../../hooks/useMap";
 import { useAmapAngle, useGmapAngle } from "../../hooks/useMapAngle";
+import { MapLogProps, useMapLog } from "../../hooks/useMapLog";
 import { useMapSupplier } from "../../hooks/useMapSupplier";
 import { createElement, defineSetup, VNodeChild } from "../../types/helper";
 import type { Point } from "../../types/interface";
@@ -16,13 +17,14 @@ export type DrivingRouteRenderProps = {
   distance: number;
   duration: number;
 };
-export interface DrivingRouteProps extends UseDrivingRouteProps {
+export interface DrivingRouteProps extends UseDrivingRouteProps, MapLogProps {
   render?: (props: DrivingRouteRenderProps) => VNodeChild;
 }
 export const ADrivingRoute = defineSetup(function DrivingRoute(
   props: DrivingRouteProps,
   { slots }
 ) {
+  useMapLog(props, "ADrivingRoute");
   const map = useAmap();
   const { path, distance, duration } = toRefs(useADrivingRoute(props));
   const angle = useAmapAngle(reactive({ path, map }));
@@ -33,6 +35,7 @@ export const GDrivingRoute = defineSetup(function DrivingRoute(
   props: DrivingRouteProps,
   { slots }
 ) {
+  useMapLog(props, "GDrivingRoute");
   const map = useGmap();
   const { path, distance, duration } = toRefs(useGDrivingRoute(props));
   const angle = useGmapAngle(reactive({ path, map }));

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

@@ -5,6 +5,7 @@ import {
   GmapAdvancedMarkerView,
   GmapAdvancedMarkerViewProps,
 } from "../../components/GmapAdvancedMarkerView";
+import { MapLogProps, useMapLog } from "../../hooks/useMapLog";
 import { useMapSupplier } from "../../hooks/useMapSupplier";
 import { AnchorType } from "../../types/amap/marker";
 import { createElement, defineSetup } from "../../types/helper";
@@ -13,7 +14,7 @@ import { createDom } from "../../utils/dom";
 import { vec2lnglat } from "../../utils/transform";
 import * as css from "./PlaceCircle.css";
 
-export interface PlaceCircleProps {
+export interface PlaceCircleProps extends MapLogProps {
   position: [number, number];
   label?: string;
   textAlign?: "left" | "right";
@@ -21,6 +22,7 @@ export interface PlaceCircleProps {
   onClick?: (value: Point) => any;
 }
 export const APlaceCircle = defineSetup(function APlaceCircle(props: PlaceCircleProps, { emit }) {
+  useMapLog(props, "APlaceCircle");
   const textAlignRef = computed(() => props.textAlign ?? "right");
   const contentRef = computed(() => {
     const { hideIcon = false } = props;
@@ -56,6 +58,7 @@ export const APlaceCircle = defineSetup(function APlaceCircle(props: PlaceCircle
 });
 
 export const GPlaceCircle = defineSetup(function GPlaceCircle(props: PlaceCircleProps, { emit }) {
+  useMapLog(props, "GPlaceCircle");
   const textAlignRef = computed(() => props.textAlign ?? "right");
   const contentRef = computed(() => {
     const { hideIcon = false } = props;

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

@@ -3,22 +3,24 @@ import imgEndPoint from "../../assets/icons/svg/end-point.svg";
 import imgStartPoint from "../../assets/icons/svg/start-point.svg";
 import { AmapMarker } from "../../components/AmapMarker";
 import { GmapAdvancedMarkerView } from "../../components/GmapAdvancedMarkerView/GmapAdvancedMarkerView";
+import { MapLogProps, useMapLog } from "../../hooks/useMapLog";
 import { useMapSupplier } from "../../hooks/useMapSupplier";
 import type { AmapOverlay, GmapOverlay, MapRegisterOverlayProps } from "../../hooks/useOverlay";
-import { createElement, defineLagecySetup, defineSetup } from "../../types/helper";
+import { createElement, defineSetup } from "../../types/helper";
 import { createDom } from "../../utils/dom";
 import { decodeAsterisk, vec2lnglat } from "../../utils/transform";
 import * as css from "./StartEndPoint.css";
 
-export interface StartEndPointProps<T> extends MapRegisterOverlayProps<T> {
+export interface StartEndPointProps<T> extends MapRegisterOverlayProps<T>, MapLogProps {
   type: "start" | "end";
   position: [number, number];
   title?: string;
   description?: string;
 }
-export const AStartEndPoint = defineLagecySetup(function AStartEndPoint(
+export const AStartEndPoint = defineSetup(function AStartEndPoint(
   props: StartEndPointProps<AmapOverlay>
 ) {
+  useMapLog(props, "AStartEndPoint");
   const contentRef = computed(() => {
     const icon = props.type === "start" ? imgStartPoint : imgEndPoint;
     const descriptionRow = !props.description
@@ -57,11 +59,12 @@ export const AStartEndPoint = defineLagecySetup(function AStartEndPoint(
       anchor={"bottom-center"}
     />
   );
-}).props(["type", "title", "registerOverlay", "position", "description"]);
+});
 
-export const GStartEndPoint = defineLagecySetup(function GStartEndPoint(
+export const GStartEndPoint = defineSetup(function GStartEndPoint(
   props: StartEndPointProps<GmapOverlay>
 ) {
+  useMapLog(props, "GStartEndPoint");
   const contentRef = computed(() => {
     const icon = props.type === "start" ? imgStartPoint : imgEndPoint;
     const descriptionRow = !props.description
@@ -105,7 +108,7 @@ export const GStartEndPoint = defineLagecySetup(function GStartEndPoint(
       />
     );
   };
-}).props(["type", "title", "registerOverlay", "position", "description"]);
+});
 
 export const StartEndPoint = defineSetup(function StartEndPoint(
   props: StartEndPointProps<AmapOverlay> | StartEndPointProps<GmapOverlay>

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

@@ -2,6 +2,7 @@ import { computed } from "vue-demi";
 import imgTaxicar from "../../assets/icons/svg/taxi-car.svg";
 import { AmapMarker } from "../../components/AmapMarker";
 import { GmapAdvancedMarkerView } from "../../components/GmapAdvancedMarkerView/GmapAdvancedMarkerView";
+import { MapLogProps, useMapLog } from "../../hooks/useMapLog";
 import { useMapSupplier } from "../../hooks/useMapSupplier";
 import type { AmapOverlay, GmapOverlay, MapRegisterOverlayProps } from "../../hooks/useOverlay";
 import { createElement, defineSetup } from "../../types/helper";
@@ -9,12 +10,13 @@ import { createDom } from "../../utils/dom";
 import { decodeAsterisk, vec2lnglat } from "../../utils/transform";
 import * as css from "./TaxiCar.css";
 
-export interface TaxiCarProps<T> extends MapRegisterOverlayProps<T> {
+export interface TaxiCarProps<T> extends MapRegisterOverlayProps<T>, MapLogProps {
   position: [number, number];
   angle?: number;
   title?: string;
 }
 export const ATaxiCar = defineSetup(function ATaxiCar(props: TaxiCarProps<AmapOverlay>) {
+  useMapLog(props, "ATaxiCar");
   const contentRef = computed(() => {
     const titleRow = !props.title
       ? ""
@@ -45,6 +47,7 @@ export const ATaxiCar = defineSetup(function ATaxiCar(props: TaxiCarProps<AmapOv
 });
 
 export const GTaxiCar = defineSetup(function GTaxiCar(props: TaxiCarProps<GmapOverlay>) {
+  useMapLog(props, "GTaxiCar");
   const contentRef = computed(() => {
     const titleRow = !props.title
       ? ""