@heycar/heycars-map 0.2.9 → 0.2.11

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

@@ -2,6 +2,7 @@ import { ref, watch } from "vue-demi";
 import { HeycarMap, HeycarMapProps } from "../../components/MapProvider";
 import { useGeoLocation } from "../../hooks/useGeoLocation";
 import { MapMountedProps, onMapMounted } from "../../hooks/useMap";
+import { MapLogProps, useMapLog } from "../../hooks/useMapLog";
 import type { MROP } from "../../hooks/useOverlay";
 import { defineLagecySetup, defineSetup } from "../../types/helper";
 import type { DriverStatus, Place, Point } from "../../types/interface";
@@ -25,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;
@@ -41,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;
@@ -57,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;
@@ -92,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;
@@ -103,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;
@@ -120,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>
     );
@@ -145,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}
             />,
           ]}
         />
@@ -177,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;
@@ -189,21 +242,28 @@ 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>
     );
   };
 });
 
 export type SectionEndServiceProps = MROP &
+  MapLogProps &
   MapMountedProps & {
     from: Place;
     to: Place;
   };
 export const SectionEndService = defineSetup((props: SectionEndServiceProps, { emit }) => {
+  useMapLog(props, "SectionEndService");
   onMapMounted(() => emit("mapMounted"));
   return () => {
     const { from: fromPlace, to: toPlace, registerOverlay } = props;
@@ -211,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 正在为您搜索附近司机
@@ -237,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,
@@ -272,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
@@ -286,6 +359,7 @@ export const BusinessTaxiServiceMap = defineLagecySetup((props: BusinessTaxiServ
             title={bookDispatchingTitle}
             registerOverlay={registerOverlay}
             onMapMounted={setFitView}
+            log={props.log}
           />
         ) : driverStatus === "dispatched" ||
           driverStatus === "driverStartService" ||
@@ -297,6 +371,7 @@ export const BusinessTaxiServiceMap = defineLagecySetup((props: BusinessTaxiServ
             renderTitle={renderStartSerivceTitle}
             registerOverlay={registerOverlay}
             onMapMounted={setFitView}
+            log={props.log}
           />
         ) : driverStatus === "book-dispatched" ? (
           <SectionBookDispatched
@@ -305,6 +380,7 @@ export const BusinessTaxiServiceMap = defineLagecySetup((props: BusinessTaxiServ
             title={bookDispatchedTitle}
             registerOverlay={registerOverlay}
             onMapMounted={setFitView}
+            log={props.log}
           />
         ) : driverStatus === "inService" ? (
           <SectionInService
@@ -313,6 +389,7 @@ export const BusinessTaxiServiceMap = defineLagecySetup((props: BusinessTaxiServ
             renderTitle={renderInServiceTitle}
             registerOverlay={registerOverlay}
             onMapMounted={setFitView}
+            log={props.log}
           />
         ) : driverStatus === "driverArrived" ? (
           <SectionDriverArrived
@@ -322,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" ||
@@ -340,6 +418,7 @@ export const BusinessTaxiServiceMap = defineLagecySetup((props: BusinessTaxiServ
             to={to}
             registerOverlay={registerOverlay}
             onMapMounted={setFitView}
+            log={props.log}
           />
         ) : (
           // 匹配不到就显示灰色路线
@@ -348,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/PassengerCircle/PassengerCircle.tsx

@@ -3,6 +3,7 @@ import imgPassengerCircle from "../../assets/icons/svg/passenger-circle.svg";
 import imgPlaceCircle from "../../assets/icons/svg/place-circle.svg";
 import { AmapMarker } from "../../components/AmapMarker";
 import { GmapAdvancedMarkerView } from "../../components/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";
@@ -11,13 +12,14 @@ import { vec2lnglat } from "../../utils/transform";
 
 import * as css from "./PassengerCircle.css";
 
-interface PassengerCircleProps<T> extends MapRegisterOverlayProps<T> {
+interface PassengerCircleProps<T> extends MapRegisterOverlayProps<T>, MapLogProps {
   position: [number, number];
   size?: "small" | "large";
 }
 export const APassengerCircle = defineSetup(function APassengerCircle(
   props: PassengerCircleProps<AmapOverlay>
 ) {
+  useMapLog(props, "APassengerCircle");
   const contentRef = computed(() => {
     const { size = "large" } = props;
     const src = size === "large" ? imgPassengerCircle : imgPlaceCircle;
@@ -40,6 +42,7 @@ export const APassengerCircle = defineSetup(function APassengerCircle(
 export const GPassengerCircle = defineSetup(function GPassengerCircle(
   props: PassengerCircleProps<GmapOverlay>
 ) {
+  useMapLog(props, "GPassengerCircle");
   const contentRef = computed(() => {
     const { size = "large" } = props;
     const src = size === "large" ? imgPassengerCircle : imgPlaceCircle;

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

@@ -1,13 +1,15 @@
+import { MapLogProps, useMapLog } from "../../hooks/useMapLog";
 import { defineSetup } from "../../types/helper";
 import type { Place } from "../../types/interface";
 import { place2point } from "../../utils/transform";
 import { PlaceCircle } from "../PlaceCircle";
 
-export interface PickupPointsProps {
+export interface PickupPointsProps extends MapLogProps {
   places: Place[];
   onClick?: (value: Place) => any;
 }
 export const PickupPoints = defineSetup(function PickupPoints(props: PickupPointsProps, { emit }) {
+  useMapLog(props, "PickupPoints");
   return () => (
     <div>
       {props.places.map((place) => (

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
       ? ""

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

@@ -1,14 +1,16 @@
 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 WalkingLineProps {
+export interface WalkingLineProps extends MapLogProps {
   path: [number, number][];
 }
 export const AWalkingLine = defineSetup(function AWalkingLine(props: WalkingLineProps) {
+  useMapLog(props, "AWalkingLine");
   return () => {
     const { path } = props;
     if (path.length === 0) return null;
@@ -30,6 +32,7 @@ export const AWalkingLine = defineSetup(function AWalkingLine(props: WalkingLine
 });
 
 export const GWalkingLine = defineSetup(function GWalkingLine(props: WalkingLineProps) {
+  useMapLog(props, "GWalkingLine");
   const pathRef = computed(() => props.path.map(vec2lnglat));
   return () => {
     const path = pathRef.value;

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

@@ -1,4 +1,5 @@
 import { reactive, VNodeData } from "vue-demi";
+import { MapLogProps, useMapLog } from "../../hooks/useMapLog";
 import { useMapSupplier } from "../../hooks/useMapSupplier";
 import {
   useAWalkingRoute,
@@ -11,13 +12,14 @@ import type { Point } from "../../types/interface";
 export type WalkingRouteRenderProps = {
   path: Point[];
 };
-export interface WalkingRouteProps extends UseWalkingRouteProps {
+export interface WalkingRouteProps extends UseWalkingRouteProps, MapLogProps {
   render?: (props: WalkingRouteRenderProps) => VNodeChild;
 }
 export const AWalkingRoute = defineSetup(function WalkingRoute(
   props: WalkingRouteProps,
   { slots }
 ) {
+  useMapLog(props, "AWalkingRoute");
   const path = useAWalkingRoute(props);
   return () => <div>{slots.render?.(reactive({ path }))}</div>;
 });
@@ -26,6 +28,7 @@ export const GWalkingRoute = defineSetup(function WalkingRoute(
   props: WalkingRouteProps,
   { slots }
 ) {
+  useMapLog(props, "GWalkingRoute");
   const path = useGWalkingRoute(props);
   return () => <div>{slots.render?.(reactive({ path }))}</div>;
 });