@heycar/heycars-map 0.2.8 → 0.2.10

package/dist/types/interface.d.ts

@@ -7,7 +7,7 @@ export type Place = {
     lat: number;
     name: string;
     cityName?: string;
-    cityId?: string;
+    countryName?: string;
 };
 export interface AutoCompletePlace extends Place {
     placeId?: string;

package/dist/utils/helper.d.ts

@@ -0,0 +1,2 @@
+import type { Place } from "../types/interface";
+export declare const isPlace: (place: Partial<Place>) => place is Place;

package/package.json

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

package/src/App.tsx

@@ -1,13 +1,27 @@
 import { defineComponent } from "vue-demi";
-import { HeycarDemo } from "./components/Demo/HeycarDemo";
+import { MapProvider } from "./components/MapProvider";
+import { DemoBusinessTaxiEnd } from "./Demo/DemoBusinessTaxiEnd";
+
+const gmapApiKey = import.meta.env.VITE_GMAP_API_KEY;
+const gmapId = import.meta.env.VITE_GMAP_MAP_ID;
+const amapApiKey = import.meta.env.VITE_AMAP_API_KEY;
+const amapApiSecret = import.meta.env.VITE_AMAP_API_SECRET;
 
 export const App = defineComponent({
   setup() {
-    // return () => <Hello class={"helloclass2"} qyc={2} style={{ color: "red" }} />;
-    // return () => <ABusinessDemo />;
-    // return () => <SearchDemo />;
-    // return () => <DemoBusinessTaxiService />;
-    // return () => <DemoBusinessQuoting />;
-    return () => <HeycarDemo />;
+    return () => (
+      <MapProvider
+        amapKey={amapApiKey}
+        amapSecret={amapApiSecret}
+        gmapId={gmapId}
+        gmapKey={gmapApiKey}
+        supplier={"amap"}
+      >
+        {/* <DemoBusinessRecomendPlace /> */}
+        {/* <DemoBusinessQuoting /> */}
+        {/* <DemoBusinessTaxiService /> */}
+        <DemoBusinessTaxiEnd />
+      </MapProvider>
+    );
   },
 });

package/src/{components/Demo → Demo/CityBound}/SearchDemo.tsx

@@ -1,9 +1,9 @@
 import { watchPostEffect } from "vue-demi";
+import { HeycarMap, MapProvider } from "../../components/MapProvider/MapProvider";
 import { useHeycarMap } from "../../hooks/useHeycarMap";
 import { defineSetup } from "../../types/helper";
-import { HeycarMap, MapProvider } from "../MapProvider/MapProvider";
+import * as css from "../Demo.css";
 import { citiesWithCountry } from "./country";
-import * as css from "./Demo.css";
 import { searchResult } from "./searchResult";
 
 const gmapApiKey = import.meta.env.VITE_GMAP_API_KEY;

package/src/{components/Demo → Demo}/Demo.tsx

@@ -1,17 +1,17 @@
 import { ref } from "vue-demi";
-import { defineSetup } from "../../types/helper";
-import { Amap } from "../Amap";
-import { AmapInfoWindow } from "../AmapInfoWindow";
-import { AmapLoader } from "../AmapLoader";
-import { AmapMarker } from "../AmapMarker";
-import { AmapPolygon } from "../AmapPolygon";
-import { AmapPolyline } from "../AmapPolyline";
-import { Gmap } from "../Gmap";
-import { GmapInfoWindow } from "../GmapInfoWindow";
-import { GmapLoader } from "../GmapLoader";
-import { GmapMarker } from "../GmapMarker";
-import { GmapPolygon } from "../GmapPolygon";
-import { GmapPolyline } from "../GmapPolyline";
+import { Amap } from "../components/Amap";
+import { AmapInfoWindow } from "../components/AmapInfoWindow";
+import { AmapLoader } from "../components/AmapLoader";
+import { AmapMarker } from "../components/AmapMarker";
+import { AmapPolygon } from "../components/AmapPolygon";
+import { AmapPolyline } from "../components/AmapPolyline";
+import { Gmap } from "../components/Gmap";
+import { GmapInfoWindow } from "../components/GmapInfoWindow";
+import { GmapLoader } from "../components/GmapLoader";
+import { GmapMarker } from "../components/GmapMarker";
+import { GmapPolygon } from "../components/GmapPolygon";
+import { GmapPolyline } from "../components/GmapPolyline";
+import { defineSetup } from "../types/helper";
 
 import * as css from "./Demo.css";
 const gmapApiKey = import.meta.env.VITE_GMAP_API_KEY;

package/src/Demo/DemoBusinessQuoting.tsx

@@ -0,0 +1,18 @@
+import { BusinessQuotingMap } from "../business-components/BusinessQuotingMap";
+import { useBusinessQuotingMap } from "../hooks-business/useBusinessQuotingMap";
+import { defineSetup } from "../types/helper";
+import * as css from "./Demo.css";
+
+export const DemoBusinessQuoting = defineSetup(function DemoBusinessQuoting() {
+  const { setMap, registerFitVeiw } = useBusinessQuotingMap();
+  return () => (
+    <BusinessQuotingMap
+      class={css.demo}
+      from={{ lng: 121.4, lat: 31.2, name: "from place name" }}
+      to={{ lng: 121.5, lat: 31.4, name: "to place name" }}
+      renderDescription={({ distance, duration }) => `全程 *${distance}公里*  约行驶 *${duration}*`}
+      mapRef={setMap}
+      registerOverlay={registerFitVeiw}
+    />
+  );
+});

package/src/Demo/DemoBusinessRecomendPlace.tsx

@@ -0,0 +1,96 @@
+import { computed } from "vue-demi";
+import {
+  BusinessRecomendPlaceMap,
+  BusinessRecomendPlaceMapProps,
+} from "../business-components/BusinessRecomendPlaceMap";
+import { useBusinessMapAutoComplete } from "../hooks-business/useBusinessMapAutoComplete";
+import { useBusinessRecomendPlaceMap } from "../hooks-business/useBusinessRecomendPlaceMap";
+import { defineSetup } from "../types/helper";
+import * as css from "./Demo.css";
+
+const SomeAutoComplete = defineSetup(function SomeAutoComplete(props: { cityName: string }) {
+  const { autoCompletePlaces, handleKeywordInput, setCity } = useBusinessMapAutoComplete({
+    cityNameRef: computed(() => props.cityName),
+  });
+  (window as any).setCity = setCity;
+  return () => {
+    const list = autoCompletePlaces.value.map((place) => (
+      <div>
+        {place.lng} | {place.lat} | {place.name} | {place.description}
+      </div>
+    ));
+    return (
+      <div>
+        <div>
+          <input onInput={handleKeywordInput} />
+        </div>
+        {list}
+      </div>
+    );
+  };
+});
+
+export const DemoBusinessRecomendPlace = defineSetup(function DemoBusinessRecomendPlace() {
+  const getRecomendPlace: BusinessRecomendPlaceMapProps["getRecomendPlace"] = async (
+    place,
+    context
+  ) => {
+    const { lat, lng } = place;
+    console.log("getRecomendPlace context?.source = ", context?.source);
+    return [
+      {
+        address: "2 College Ave West, Stephen Riady Centre, Singapore 138607",
+        distance: 68,
+        lat: 1.2961134,
+        lng: 103.7722912,
+        name: "2 College Ave West, Stephen Riady Centre, Singapore 138607",
+        reqFrom: "Recent",
+      },
+      {
+        address: "10 Architecture Drive, Singapore",
+        distance: 71,
+        lat: 1.2969847,
+        lng: 103.7714507,
+        name: "Centre for English Language Communication (CELC)",
+        reqFrom: "public",
+      },
+      {
+        address: "10 Kent Ridge Crescent, #01-02 Block AS8",
+        distance: 75,
+        lat: 1.295979,
+        lng: 103.7720608,
+        name: "The Coffee Roaster Cafe @ NUS",
+        reqFrom: "public",
+      },
+    ];
+
+    return [
+      { lat: lat + 0.0001, lng: lng + 0.0001, name: "place name 1" },
+      { lat: lat + 0.002, lng: lng + 0.002, name: "place name 2" },
+    ];
+  };
+  const { centerPlace, placeCandidates, setCenterPlaceByRecomand, mapContext, apiMapDistance } =
+    useBusinessRecomendPlaceMap();
+  (window as any).setCenterPlaceByRecomand = setCenterPlaceByRecomand;
+  return () => {
+    return (
+      <div>
+        placeCandidates: {placeCandidates} <br />
+        centerPlace: {centerPlace.lng} | {centerPlace.lat} | {centerPlace.name} |{" "}
+        {centerPlace.cityName} | {centerPlace.countryName} <br />
+        <SomeAutoComplete cityName="Taiwan"></SomeAutoComplete>
+        <BusinessRecomendPlaceMap
+          log
+          class={css.demo}
+          unavailableTitle={"当前区域暂未开通服务"}
+          noRecomendDescription={"附近无推荐上车地点"}
+          recomendDescription={"最佳上车地点"}
+          geoDefaultPosition={[103.771994, 1.296648]}
+          getRecomendPlace={getRecomendPlace}
+          mapContext={mapContext}
+          onGeoError={(e) => console.log("onGeoError e = ", e)}
+        />
+      </div>
+    );
+  };
+});

package/src/Demo/DemoBusinessTaxiEnd.tsx

@@ -0,0 +1,38 @@
+import { defineComponent } from "vue";
+import { BusinessTaxiEndMap } from "../business-components/BusinessTaxiEndMap";
+import * as css from "./Demo.css";
+
+export const DemoBusinessTaxiEnd = defineComponent({
+  name: "DemoBusinessTaxiEnd",
+  data() {
+    return {
+      from: {},
+      to: {},
+    };
+  },
+  created() {
+    setTimeout(() => {
+      this.from = {
+        lng: 103.7719939,
+        lat: 1.296648,
+        name: "2 College Ave West, Stephen Riady Centre, Singapore 138607",
+      };
+      this.to = {
+        lng: 103.781421,
+        lat: 1.283855,
+        name: "虎豹别墅 (Haw Par Villa)",
+      };
+    }, 2000);
+  },
+  render() {
+    const { from, to } = this;
+    return (
+      <div>
+        <div>
+          {JSON.stringify(from)} | {JSON.stringify(to)}
+        </div>
+        <BusinessTaxiEndMap class={css.demo} from={from} to={to} log />
+      </div>
+    );
+  },
+});

package/src/{components/Demo → Demo}/DemoBusinessTaxiService.tsx

@@ -1,38 +1,18 @@
-import { BusinessTaxiServiceMap } from "../../business-components/BusinessTaxiServiceMap/BusinessTaxiServiceMap";
-import { useBusinessTaxiServiceMap } from "../../hooks-business/useBusinessTaxiServiceMap";
-import { defineSetup } from "../../types/helper";
-import type { Point } from "../../types/interface";
-import { MapProvider } from "../MapProvider/MapProvider";
+import { BusinessTaxiServiceMap } from "../business-components/BusinessTaxiServiceMap/BusinessTaxiServiceMap";
+import { useBusinessTaxiServiceMap } from "../hooks-business/useBusinessTaxiServiceMap";
+import { defineSetup } from "../types/helper";
+import type { Point } from "../types/interface";
 import * as css from "./Demo.css";
 
-const gmapApiKey = import.meta.env.VITE_GMAP_API_KEY;
-const gmapId = import.meta.env.VITE_GMAP_MAP_ID;
-const amapApiKey = import.meta.env.VITE_AMAP_API_KEY;
-const amapApiSecret = import.meta.env.VITE_AMAP_API_SECRET;
-
 export const DemoBusinessTaxiService = defineSetup(function DemoBusinessTaxiService() {
-  return () => (
-    <MapProvider
-      amapKey={amapApiKey}
-      amapSecret={amapApiSecret}
-      gmapId={gmapId}
-      gmapKey={gmapApiKey}
-      supplier={"amap"}
-    >
-      <TaxiCarServicePage />
-    </MapProvider>
-  );
-});
-
-export const TaxiCarServicePage = defineSetup(function TaxiCarServicePage() {
-  const { setMap, setFitView, registerFitVeiw } = useBusinessTaxiServiceMap();
+  const { 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="book-driverStartService"
+      driverStatus="completed"
       bookDispatchingTitle="2月14日 11:00 用车"
       bookDispatchedTitle="司机位置将在临近出发时间展示"
       dispatchingTitle="正在为您搜索附近司机"

package/src/api/contants.ts

@@ -0,0 +1,3 @@
+import type { Point } from "../types/interface";
+
+export const BEIJIN_POINT: Point = [116.2317, 39.5427];

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

@@ -3,6 +3,7 @@ import imgArrowRight from "../../assets/icons/svg/arrow-right.svg";
 import imgPlaceCircle from "../../assets/icons/svg/place-circle.svg";
 import { AmapMarker } from "../../components/AmapMarker";
 import { GmapAdvancedMarkerView } from "../../components/GmapAdvancedMarkerView/GmapAdvancedMarkerView";
+import { MapLogProps, useMapLog } from "../../hooks/useMapLog";
 import { useMapSupplier } from "../../hooks/useMapSupplier";
 import { createElement, defineSetup } from "../../types/helper";
 import type { Point } from "../../types/interface";
@@ -11,13 +12,14 @@ import { vec2lnglat } from "../../utils/transform";
 import { AAddressLocator, GAddressLocator } from "../AddressLocator";
 import * as css from "./AddressBox.css";
 
-export interface AddressBoxProps {
+export interface AddressBoxProps extends MapLogProps {
   type: "box" | "locator";
   position: Point;
   title: string;
   description?: string;
 }
 export const AAddressBox = defineSetup(function AAddressBox(props: AddressBoxProps) {
+  useMapLog(props, "AAddressBox");
   const contentRef = computed(
     () => `
       <div class="${css.addressBoxLayout}">
@@ -42,6 +44,7 @@ export const AAddressBox = defineSetup(function AAddressBox(props: AddressBoxPro
 });
 
 export const GAddressBox = defineSetup(function GAddressBox(props: AddressBoxProps) {
+  useMapLog(props, "GAddressBox");
   const contentRef = computed(() =>
     createDom(
       "div",

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

@@ -4,6 +4,7 @@ import type { BusinessRecomendPlaceContext } from "../../hooks-business/useBusin
 import { useGeoLocation, UseGeoLocationProps } from "../../hooks/useGeoLocation";
 import { useHeycarMap } from "../../hooks/useHeycarMap";
 import { useMapDrag, UseMapDragProps } from "../../hooks/useMapDrag";
+import { MapLogProps, useMapLog } from "../../hooks/useMapLog";
 import type { UseMapPlaceProps } from "../../hooks/useMapPlace";
 import { useMapRecomendPlace, UseMapRecomendPlaceProps } from "../../hooks/useMapRecomendPlace";
 import { useMapSupplier } from "../../hooks/useMapSupplier";
@@ -20,9 +21,11 @@ export interface CenterPlaceSource {
 }
 export interface BusinessRecomendPlaceMapProps
   extends Omit<HeycarMapProps, "center" | "zoom" | "mapRef">,
-    Pick<UseMapRecomendPlaceProps<CenterPlaceSource>, "getRecomendPlace"> {
-  title: string;
-  description: string;
+    Pick<UseMapRecomendPlaceProps<CenterPlaceSource>, "getRecomendPlace">,
+    MapLogProps {
+  unavailableTitle: string;
+  recomendDescription: string;
+  noRecomendDescription: string;
   geoDefaultPosition?: Point;
   mapContext: BusinessRecomendPlaceContext;
   onLoadGeoLocation?: UseGeoLocationProps["onLoad"];
@@ -35,6 +38,7 @@ export interface BusinessRecomendPlaceMapProps
 }
 export const BusinessRecomendPlaceMap = defineLagecySetup(
   (props: BusinessRecomendPlaceMapProps, { emit }) => {
+    useMapLog(props, "BusinessRecomendPlaceMap");
     const { geoDefaultPosition, getRecomendPlace, mapContext } = props;
     const { mapRef, setMap, panTo } = useHeycarMap();
     const { readyPromise } = useMapSupplier();
@@ -94,37 +98,39 @@ export const BusinessRecomendPlaceMap = defineLagecySetup(
         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);
-      },
-    });
+    const { updatePlace, updateRecomandPlace, placeCandidates, availableRef } = 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 });
     });
@@ -132,26 +138,34 @@ export const BusinessRecomendPlaceMap = defineLagecySetup(
       mapContext.onChangeRecomendPlaces([...placeCandidates.value]);
     });
     return () => {
+      const description = !availableRef.value
+        ? undefined
+        : placeCandidates.value.length > 0
+        ? props.recomendDescription
+        : props.noRecomendDescription;
       return (
-        <HeycarMap center={centerPoint.value} zoom={18} mapRef={setMap}>
+        <HeycarMap center={centerPoint.value} zoom={18} mapRef={setMap} log={props.log}>
           <PassengerCircle position={geoPosition.value} />
-          <PickupPoints places={placeCandidates.value} onClick={setCenterByPlace} />
+          <PickupPoints places={placeCandidates.value} onClick={setCenterByPlace} log={props.log} />
           <AddressBox
             position={centerPoint.value}
-            title={props.title}
-            description={props.description}
-            type={isDragging ? "locator" : "box"}
+            title={availableRef.value ? centerPlace.name : props.unavailableTitle}
+            description={description}
+            type={isDragging.value ? "locator" : "box"}
+            log={props.log}
           />
         </HeycarMap>
       );
     };
   }
 ).props([
-  "description",
+  "log",
+  "unavailableTitle",
+  "recomendDescription",
+  "noRecomendDescription",
   "fallback",
   "geoDefaultPosition",
   "getRecomendPlace",
   "loading",
   "mapContext",
-  "title",
 ]);

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

@@ -0,0 +1,43 @@
+import { BEIJIN_POINT } from "../../api/contants";
+import { HeycarMap } from "../../components/MapProvider";
+import { useHeycarMap } from "../../hooks/useHeycarMap";
+import { useMapFitView } from "../../hooks/useMapFitView";
+import { MapLogProps, useMapLog } from "../../hooks/useMapLog";
+import { defineSetup } from "../../types/helper";
+import type { Place, Point } from "../../types/interface";
+import { isPlace } from "../../utils/helper";
+import { place2point } from "../../utils/transform";
+import { SectionEndService } from "../BusinessTaxiServiceMap";
+
+export interface BusinessTaxiEndMapProps extends MapLogProps {
+  from: Partial<Place>;
+  to: Partial<Place>;
+}
+export const BusinessTaxiEndMap = defineSetup((props: BusinessTaxiEndMapProps) => {
+  useMapLog(props, "BusinessTaxiEndMap");
+  const { mapRef, setMap } = useHeycarMap();
+  const { registerFitVeiw, setFitView } = useMapFitView({
+    mapRef,
+    autoFitTimeout: 5000,
+    padding: [25, 20, 15, 15],
+  });
+  return () => {
+    const { from, to } = props;
+    const isReady = isPlace(from) && isPlace(to);
+    const center = isReady ? place2point(from) : ([...BEIJIN_POINT] as Point);
+    const zoom = isReady ? 13 : 3;
+    return (
+      <HeycarMap center={center} zoom={zoom} mapRef={setMap} log={props.log}>
+        {isReady && (
+          <SectionEndService
+            from={from}
+            to={to}
+            registerOverlay={registerFitVeiw}
+            onMapMounted={setFitView}
+            log={props.log}
+          />
+        )}
+      </HeycarMap>
+    );
+  };
+});

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

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

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";
@@ -198,12 +199,14 @@ const SectionCanceled = defineSetup((props: SectionCanceledProps, { emit }) => {
   };
 });
 
-type SectionEndServiceProps = MROP &
+export type SectionEndServiceProps = MROP &
+  MapLogProps &
   MapMountedProps & {
     from: Place;
     to: Place;
   };
-const SectionEndService = defineSetup((props: SectionEndServiceProps, { emit }) => {
+export const SectionEndService = defineSetup((props: SectionEndServiceProps, { emit }) => {
+  useMapLog(props, "SectionEndService");
   onMapMounted(() => emit("mapMounted"));
   return () => {
     const { from: fromPlace, to: toPlace, registerOverlay } = props;

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/components/MapProvider/MapProvider.tsx

@@ -1,5 +1,6 @@
 import type { SetMap } from "../../hooks/useHeycarMap";
 import { GmapLoaderProps, Status, useMapLoader, UseMapLoaderProps } from "../../hooks/useMapLoader";
+import { MapLogProps, useMapLog } from "../../hooks/useMapLog";
 import { MapSupplierPayolad, provideMapSupplier, useMapSupplier } from "../../hooks/useMapSupplier";
 import { defineLagecySetup } from "../../types/helper";
 import { language2vectorMapForeign, vec2lnglat } from "../../utils/transform";
@@ -25,7 +26,8 @@ export const MapProvider = defineLagecySetup(function MapProvider(
 
 export interface HeycarMapProps
   extends Pick<GmapLoaderProps, "fallback" | "loading">,
-    Pick<AmapProps, "center" | "zoom"> {
+    Pick<AmapProps, "center" | "zoom">,
+    MapLogProps {
   mapRef?: SetMap<AMap.Map> | SetMap<google.maps.Map>;
   onDragEnd?: (value: [number, number]) => any;
 }
@@ -33,6 +35,7 @@ export const HeycarMap = defineLagecySetup(function HeycarMap(
   props: HeycarMapProps,
   { slots, emit }
 ) {
+  useMapLog(props, "HeycarMap");
   const payload = useMapSupplier();
   const gmapDebouncedEmit: GmapProps["onDragEnd"] = ({ target }) => {
     const { lng, lat } = target.getCenter() as google.maps.LatLng;