@heycar/heycars-map 0.2.4 → 0.2.5

package/dist/types/interface.d.ts

@@ -30,3 +30,4 @@ export interface Route {
     distance: number;
     duration: number;
 }
+export type DriverStatus = "dispatching" | "book-dispatching" | "dispatched" | "driverStartService" | "book-driverStartService" | "book-dispatched" | "driverArrived" | "inService" | "canceled" | "endService";

package/dist/utils/compare.d.ts

@@ -18,5 +18,5 @@ export declare function watchPostEffectForMapProperty<T, P>(targetRef: ShallowRe
 export declare function watchNoneImmediatePostEffectForMapProperty<T, P>(targetRef: ShallowRef<T | undefined> | Ref<T | undefined>, props: P, nameOptions: PickSettableOptions<T, keyof P>[], watchOptions?: WatchOptions<false>): void;
 type NamesRestrict<N, S extends string> = N extends `on${string}` ? Lowercase<N> extends `on${S}` ? N : never : never;
 export declare function watchPostEffectForAMapEvent<T extends AMap.Event, P, E extends string = AMap.EventType>(targetRef: ShallowRef<T | undefined> | Ref<T | undefined> | undefined, props: P, emit: EmitFn<EmitByProps<P>>, propertyNames: NamesRestrict<keyof P, E>[]): void;
-export declare function watchPostEffectForGMapEvent<T extends google.maps.MVCObject, P>(targetRef: ShallowRef<T | undefined> | Ref<T | undefined> | undefined, props: P, emit: EmitFn<EmitByProps<P>>, propertyNames: NamesRestrict<keyof P, string>[]): void;
+export declare function watchPostEffectForGMapEvent<T extends google.maps.MVCObject | google.maps.marker.AdvancedMarkerView, P>(targetRef: ShallowRef<T | undefined> | Ref<T | undefined> | undefined, props: P, emit: EmitFn<EmitByProps<P>>, propertyNames: NamesRestrict<keyof P, string>[]): void;
 export {};

package/package.json

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

package/src/App.tsx

@@ -6,6 +6,7 @@ export const App = defineComponent({
     // return () => <Hello class={"helloclass2"} qyc={2} style={{ color: "red" }} />;
     // return () => <ABusinessDemo />;
     // return () => <SearchDemo />;
+    // return () => <DemoBusinessTaxiService />;
     return () => <HeycarDemo />;
   },
 });

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

@@ -0,0 +1,285 @@
+import { ref, watch } from "vue-demi";
+import { HeycarMap, HeycarMapProps } from "../../components/MapProvider";
+import { useGeoLocation } from "../../hooks/useGeoLocation";
+import { defineLagecySetup, defineSetup } from "../../types/helper";
+import type { DriverStatus, Place, Point } from "../../types/interface";
+import { place2point } from "../../utils/transform";
+import { DrivingLine } from "../DrivingLine";
+import { DrivingRoute, DrivingRouteRenderProps } from "../DrivingRoute";
+import { PassengerCircle } from "../PassengerCircle";
+import { PlaceCircle } from "../PlaceCircle";
+import { StartEndPoint } from "../StartEndPoint";
+import { TaxiCar } from "../TaxiCar";
+import { WalkingLine } from "../WalkingLine";
+import { WalkingRoute } from "../WalkingRoute";
+import { WaveCircle } from "../WaveCircle";
+
+const STATUS_NEED_CAR_POSITION: DriverStatus[] = [
+  "book-driverStartService",
+  "dispatched",
+  "driverStartService",
+  "inService",
+  "driverArrived",
+];
+
+interface SectionDispatchingProps {
+  title: string;
+  from: Place;
+}
+const SectionDispatching = defineSetup((props: SectionDispatchingProps) => {
+  return () => {
+    const { from: fromPlace, title } = props;
+    const from = place2point(fromPlace);
+    return (
+      <div>
+        <StartEndPoint type="start" position={from} title={title} />
+        <WaveCircle position={from} />
+        <PlaceCircle position={from} label={fromPlace.name} hideIcon />
+      </div>
+    );
+  };
+});
+
+interface SectionDriverStartServiceProps {
+  passengerPosition: Point;
+  carPosition: Point;
+  from: Place;
+  renderTitle: (props: Pick<DrivingRouteRenderProps, "duration" | "distance">) => string;
+}
+const SectionDriverStartService = defineSetup((props: SectionDriverStartServiceProps) => {
+  return () => {
+    const { from: fromPlace, carPosition, passengerPosition, renderTitle } = props;
+    const from = place2point(fromPlace);
+    return (
+      <div>
+        <StartEndPoint type="start" position={from} />
+        <PlaceCircle position={from} label={fromPlace.name} hideIcon />
+        <DrivingRoute
+          from={carPosition}
+          to={from}
+          render={({ path, distance, duration }) => [
+            <DrivingLine path={path} />,
+            <TaxiCar position={carPosition} title={renderTitle({ distance, duration })} />,
+          ]}
+        />
+        <WalkingRoute
+          from={passengerPosition}
+          to={from}
+          render={({ path }) => <WalkingLine path={path} />}
+        />
+        <PassengerCircle position={passengerPosition} />
+      </div>
+    );
+  };
+});
+
+interface SectionBookDispatchedProps {
+  passengerPosition: Point;
+  from: Place;
+  // @example 司机位置将在临近出发时间展示
+  title: string;
+}
+const SectionBookDispatched = defineSetup((props: SectionBookDispatchedProps) => {
+  return () => {
+    const { from: fromPlace, passengerPosition, title } = props;
+    const from = place2point(fromPlace);
+    return (
+      <div>
+        <StartEndPoint type="start" position={from} title={title} />
+        <PlaceCircle position={from} label={fromPlace.name} hideIcon />
+        <PassengerCircle position={passengerPosition}></PassengerCircle>
+      </div>
+    );
+  };
+});
+
+interface SectionDriverArrivedProps {
+  from: Place;
+  carPosition: Point;
+  passengerPosition: Point;
+  // @example 司机已等待 *00:35*
+  title: string;
+}
+const SectionDriverArrived = defineSetup((props: SectionDriverArrivedProps) => {
+  return () => {
+    const { from: fromPlace, carPosition, passengerPosition, title } = props;
+    const from = place2point(fromPlace);
+    return (
+      <div>
+        <TaxiCar position={carPosition} title={title} />
+        <StartEndPoint type="start" position={from} />
+        <PlaceCircle position={from} label={fromPlace.name} hideIcon />
+        <WalkingRoute
+          from={passengerPosition}
+          to={from}
+          render={({ path }) => <WalkingLine path={path} />}
+        />
+        <PassengerCircle position={passengerPosition} size="small" />
+      </div>
+    );
+  };
+});
+
+interface SectionInServiceProps {
+  to: Place;
+  carPosition: Point;
+  renderTitle: (props: Pick<DrivingRouteRenderProps, "duration" | "distance">) => string;
+}
+const SectionInService = defineSetup((props: SectionInServiceProps) => {
+  return () => {
+    const { to: toPlace, carPosition, renderTitle } = props;
+    const to = place2point(toPlace);
+    return (
+      <div>
+        <StartEndPoint type="end" position={to} />
+        <PlaceCircle position={carPosition} label="'WebSter Dental Plaza'" hide-icon="true" />
+        <DrivingRoute
+          from={carPosition}
+          to={to}
+          render={({ path, distance, duration }) => [
+            <DrivingLine path={path} />,
+            <TaxiCar position={carPosition} title={renderTitle({ distance, duration })} />,
+          ]}
+        />
+      </div>
+    );
+  };
+});
+
+interface SectionCanceledProps {
+  from: Place;
+  to: Place;
+}
+const SectionCanceled = defineSetup((props: SectionCanceledProps) => {
+  return () => {
+    const { from: fromPlace, to: toPlace } = props;
+    const from = place2point(fromPlace);
+    const to = place2point(toPlace);
+    return (
+      <div>
+        <StartEndPoint type="start" position={from} />
+        <StartEndPoint type="end" position={to} />
+        <PlaceCircle position={from} label={fromPlace.name} hideIcon />
+        <PlaceCircle position={to} label={toPlace.name} hideIcon />
+      </div>
+    );
+  };
+});
+
+interface SectionEndServiceProps {
+  from: Place;
+  to: Place;
+}
+const SectionEndService = defineSetup((props: SectionEndServiceProps) => {
+  return () => {
+    const { from: fromPlace, to: toPlace } = props;
+    const from = place2point(fromPlace);
+    const to = place2point(toPlace);
+    return (
+      <div>
+        <StartEndPoint type="start" position={from} />
+        <StartEndPoint type="end" position={to} />
+        <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 />} />
+      </div>
+    );
+  };
+});
+
+export interface BusinessTaxiServiceMapProps extends Omit<HeycarMapProps, "center" | "zoom"> {
+  from: Place;
+  to: Place;
+  // @example 正在为您搜索附近司机
+  dispatchingTitle: string;
+  bookDispatchingTitle: string;
+  bookDispatchedTitle: string;
+  driverArrivedTitle: string;
+  driverStatus: DriverStatus;
+  interval: number;
+  renderStartSerivceTitle: (titleProps: { distance: number; duration: number }) => string;
+  renderInServiceTitle: (titleProps: { distance: number; duration: number }) => string;
+  getDriverPosition: () => Promise<Point>;
+}
+export const BusinessTaxiServiceMap = defineLagecySetup((props: BusinessTaxiServiceMapProps) => {
+  const { interval, getDriverPosition } = props;
+  const { geoPosition } = useGeoLocation();
+  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,
+      to,
+      dispatchingTitle,
+      bookDispatchingTitle,
+      bookDispatchedTitle,
+      driverArrivedTitle,
+      renderStartSerivceTitle,
+      renderInServiceTitle,
+    } = props;
+    const carPosition = carPositionRef.value;
+    return (
+      <HeycarMap center={place2point(from)} zoom={13}>
+        {driverStatus === "dispatching" ? (
+          <SectionDispatching from={from} title={dispatchingTitle} />
+        ) : driverStatus === "book-dispatching" ? (
+          <SectionDispatching from={from} title={bookDispatchingTitle} />
+        ) : driverStatus === "dispatched" ||
+          driverStatus === "driverStartService" ||
+          driverStatus === "book-driverStartService" ? (
+          <SectionDriverStartService
+            from={from}
+            carPosition={carPosition}
+            passengerPosition={geoPosition.value}
+            renderTitle={renderStartSerivceTitle}
+          />
+        ) : driverStatus === "book-dispatched" ? (
+          <SectionBookDispatched
+            from={from}
+            passengerPosition={geoPosition.value}
+            title={bookDispatchedTitle}
+          />
+        ) : driverStatus === "inService" ? (
+          <SectionInService to={to} carPosition={carPosition} renderTitle={renderInServiceTitle} />
+        ) : driverStatus === "driverArrived" ? (
+          <SectionDriverArrived
+            from={from}
+            carPosition={carPosition}
+            passengerPosition={geoPosition.value}
+            title={driverArrivedTitle}
+          />
+        ) : driverStatus === "canceled" ? (
+          <SectionCanceled from={from} to={to} />
+        ) : driverStatus === "endService" ? (
+          <SectionEndService from={from} to={to} />
+        ) : null}
+      </HeycarMap>
+    );
+  };
+}).props([
+  "bookDispatchedTitle",
+  "bookDispatchingTitle",
+  "dispatchingTitle",
+  "driverArrivedTitle",
+  "driverStatus",
+  "fallback",
+  "from",
+  "getDriverPosition",
+  "interval",
+  "loading",
+  "mapRef",
+  "renderInServiceTitle",
+  "renderStartSerivceTitle",
+  "to",
+]);

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

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

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

@@ -0,0 +1,14 @@
+import { useMap } from "../../hooks/useMap";
+import { useMapFitView, UseMapFitViewOutput, UseMapFitViewProps } from "../../hooks/useMapFitView";
+import type { AmapOverlay, GmapOverlay } from "../../hooks/useOverlay";
+import { defineSetup, VNodeChild } from "../../types/helper";
+
+type FitViewRenderProps = UseMapFitViewOutput<AmapOverlay> | UseMapFitViewOutput<GmapOverlay>;
+export interface FitViewProps extends Omit<UseMapFitViewProps, "mapRef"> {
+  render?: (props: FitViewRenderProps) => VNodeChild;
+}
+export const FitView = defineSetup(function FitView(props: FitViewProps, { slots }) {
+  const mapRef = useMap();
+  const ctx = useMapFitView({ ...props, mapRef });
+  return () => <div>{slots.render?.(ctx)}</div>;
+});

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

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

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

@@ -5,12 +5,18 @@ import { PlaceCircle } from "../PlaceCircle";
 
 export interface PickupPointsProps {
   places: Place[];
+  onClick?: (value: Place) => any;
 }
-export const PickupPoints = defineSetup(function PickupPoints(props: PickupPointsProps) {
+export const PickupPoints = defineSetup(function PickupPoints(props: PickupPointsProps, { emit }) {
   return () => (
     <div>
       {props.places.map((place) => (
-        <PlaceCircle position={place2point(place)} label={place.name} textAlign="left" />
+        <PlaceCircle
+          position={place2point(place)}
+          label={place.name}
+          textAlign="left"
+          onClick={() => emit("click", place)}
+        />
       ))}
     </div>
   );

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

@@ -1,10 +1,14 @@
 import { computed } from "vue-demi";
 import imgPlaceCircle from "../../assets/icons/svg/place-circle.svg";
-import { AmapMarker } from "../../components/AmapMarker";
-import { GmapAdvancedMarkerView } from "../../components/GmapAdvancedMarkerView";
+import { AmapMarker, AmapMarkerProps } from "../../components/AmapMarker";
+import {
+  GmapAdvancedMarkerView,
+  GmapAdvancedMarkerViewProps,
+} from "../../components/GmapAdvancedMarkerView";
 import { useMapSupplier } from "../../hooks/useMapSupplier";
 import { AnchorType } from "../../types/amap/marker";
 import { createElement, defineLagecySetup, defineSetup } from "../../types/helper";
+import type { Point } from "../../types/interface";
 import { createDom } from "../../utils/dom";
 import { vec2lnglat } from "../../utils/transform";
 import * as css from "./PlaceCircle.css";
@@ -14,8 +18,12 @@ export interface PlaceCircleProps {
   label?: string;
   textAlign?: "left" | "right";
   hideIcon?: boolean;
+  onClick?: (value: Point) => any;
 }
-export const APlaceCircle = defineLagecySetup(function APlaceCircle(props: PlaceCircleProps) {
+export const APlaceCircle = defineLagecySetup(function APlaceCircle(
+  props: PlaceCircleProps,
+  { emit }
+) {
   const textAlignRef = computed(() => props.textAlign ?? "right");
   const contentRef = computed(() => {
     const { hideIcon = false } = props;
@@ -34,16 +42,24 @@ export const APlaceCircle = defineLagecySetup(function APlaceCircle(props: Place
       textAlign: textAlignRef.value,
     })}" src="${imgPlaceCircle}">`;
   });
+  const handleClick: AmapMarkerProps["onClick"] = (e) => {
+    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"]);
 
-export const GPlaceCircle = defineLagecySetup(function GPlaceCircle(props: PlaceCircleProps) {
+export const GPlaceCircle = defineLagecySetup(function GPlaceCircle(
+  props: PlaceCircleProps,
+  { emit }
+) {
   const textAlignRef = computed(() => props.textAlign ?? "right");
   const contentRef = computed(() => {
     const { hideIcon = false } = props;
@@ -69,19 +85,27 @@ export const GPlaceCircle = defineLagecySetup(function GPlaceCircle(props: Place
       src: imgPlaceCircle,
     });
   });
+  const handleClick: GmapAdvancedMarkerViewProps["onClick"] = (e) => {
+    console.log("on gmap advanced marker view e = ", e);
+    emit("click", props.position);
+  };
   return () => (
     <GmapAdvancedMarkerView
       position={vec2lnglat(props.position)}
       content={props.label ? contentRef.value : contentWithoutLabelRef.value}
+      onClick={handleClick}
     />
   );
 }).props(["hideIcon", "label", "position", "textAlign"]);
 
-export const PlaceCircle = defineSetup(function PlaceCircle(props: PlaceCircleProps) {
+export const PlaceCircle = defineSetup(function PlaceCircle(props: PlaceCircleProps, { emit }) {
   const payload = useMapSupplier();
   return () => {
     return createElement(payload.supplier === "gmap" ? GPlaceCircle : APlaceCircle, {
       attrs: props,
+      on: {
+        click: (value: any) => emit("click", value),
+      },
     });
   };
 });

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

@@ -10,7 +10,6 @@ import type { Point } from "../../types/interface";
 
 export type WalkingRouteRenderProps = {
   path: Point[];
-  angle?: number;
 };
 export interface WalkingRouteProps extends UseWalkingRouteProps {
   render?: (props: WalkingRouteRenderProps) => VNodeChild;

package/src/components/AmapMarker/AmapMarker.ts

@@ -2,11 +2,17 @@ import { onMounted, onUnmounted, shallowRef, watchPostEffect } from "vue-demi";
 import { useAmap } from "../../hooks/useMap";
 import { AmapOverlay, MapRegisterOverlayProps, useMapOverlay } from "../../hooks/useOverlay";
 import { defineSetup } from "../../types/helper";
-import { watchNoneImmediatePostEffectForMapProperty } from "../../utils/compare";
+import type { MapEventHandler } from "../../types/mapHelper";
+import {
+  watchNoneImmediatePostEffectForMapProperty,
+  watchPostEffectForAMapEvent,
+} from "../../utils/compare";
 
-export type AmapMarkerProps = AMap.MarkerOptions & MapRegisterOverlayProps<AmapOverlay>;
+export interface AmapMarkerProps extends AMap.MarkerOptions, MapRegisterOverlayProps<AmapOverlay> {
+  onClick?: MapEventHandler<AMap.Marker>;
+}
 
-export const AmapMarker = defineSetup(function AmapMarker(props: AmapMarkerProps) {
+export const AmapMarker = defineSetup(function AmapMarker(props: AmapMarkerProps, { emit }) {
   const { registerOverlay } = props;
   const markerRef = shallowRef<AMap.Marker>();
   const mapRef = useAmap();
@@ -37,5 +43,6 @@ export const AmapMarker = defineSetup(function AmapMarker(props: AmapMarkerProps
     { name: "title", defaultValue: "" },
     { name: "extData", defaultValue: "" },
   ]);
+  watchPostEffectForAMapEvent(markerRef, props, emit, ["onClick"]);
   return () => null;
 });

package/src/components/Demo/DemoBusinessTaxiService.tsx

@@ -0,0 +1,48 @@
+import { BusinessTaxiServiceMap } from "../../business-components/BusinessTaxiServiceMap/BusinessTaxiServiceMap";
+import { defineSetup } from "../../types/helper";
+import type { Point } from "../../types/interface";
+import { MapProvider } from "../MapProvider/MapProvider";
+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 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="driverStartService"
+      bookDispatchingTitle="2月14日 11:00 用车"
+      bookDispatchedTitle="司机位置将在临近出发时间展示"
+      dispatchingTitle="正在为您搜索附近司机"
+      driverArrivedTitle="司机已等待 00:35"
+      renderStartSerivceTitle={({ distance, duration }) =>
+        `距你*${distance}*公里, *${duration}*分钟`
+      }
+      renderInServiceTitle={({ distance, duration }) =>
+        `距离终点${distance}公里, 预计${duration}分钟`
+      }
+      getDriverPosition={getDriverPosition}
+      interval={5000}
+    />
+  );
+});

package/src/components/Demo/HeycarDemo.tsx

@@ -1,8 +1,5 @@
 import { computed } from "vue-demi";
-import { DrivingLine } from "../../business-components/DrivingLine";
-import { DrivingRoute } from "../../business-components/DrivingRoute";
-import { PlaceCircle } from "../../business-components/PlaceCircle";
-import { TaxiCar } from "../../business-components/TaxiCar";
+import { PickupPoints } from "../../business-components/PickupPoints";
 import { useBusinessMapAutoComplete } from "../../hooks-business/useBusinessMapAutoComplete";
 import {
   useBusinessMapRecomendPlace,
@@ -27,7 +24,7 @@ export const HeycarDemo = defineSetup(function HeycarDemo() {
       amapSecret={amapApiSecret}
       gmapId={gmapId}
       gmapKey={gmapApiKey}
-      supplier={"gmap"}
+      supplier={"amap"}
     >
       <SomeHomePage />
     </MapProvider>
@@ -74,7 +71,10 @@ export const SomeHomePage = defineSetup(function SomeHomePage() {
   ) => {
     const { lat, lng } = place;
     console.log("getRecomendPlace context?.source = ", context?.source);
-    return [{ lat: lat + 0.0001, lng: lng + 0.0001, name: "place name 1" }];
+    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,
@@ -84,7 +84,9 @@ export const SomeHomePage = defineSetup(function SomeHomePage() {
     geoLoading,
     geoPosition,
     setCenterPlaceByRecomand,
+    setCenterByPlace,
   } = useBusinessMapRecomendPlace({
+    geoDefaultPosition: [0, 0],
     mapRef,
     recomendPlaceGeoLimit: 300,
     recomendPlaceDragLimit: 30,
@@ -135,7 +137,7 @@ export const SomeHomePage = defineSetup(function SomeHomePage() {
             title={"end point"}
             type="end"
           /> */}
-          {/* <PickupPoints places={placeCandidates.value} /> */}
+          <PickupPoints places={placeCandidates.value} onClick={setCenterByPlace} />
           {/* <AddressBox
             type="box"
             position={centerPoint.value}
@@ -150,16 +152,23 @@ export const SomeHomePage = defineSetup(function SomeHomePage() {
             ]}
             labels={["place name 1", "place name 2"]}
           /> */}
-          <DrivingRoute
+          {/* <DrivingRoute
             from={[121, 31]}
             to={[121.6, 31.3]}
             render={({ path, angle }) => [
               <DrivingLine path={path} />,
               <TaxiCar position={[121, 31]} angle={angle} />,
             ]}
-          />
+          /> */}
           {/* <PassengerCircle position={centerPoint.value} size="small" /> */}
-          <PlaceCircle position={centerPoint.value} label={"some place"} hideIcon />
+          {/* <PlaceCircle
+            position={centerPoint.value}
+            label={"some place"}
+            hideIcon
+            onClick={() => {
+              debugger;
+            }}
+          /> */}
           {/* <WalkingRoute
             from={centerPoint.value}
             to={[centerPoint.value[0] + 0.01, centerPoint.value[1] + 0.01]}

package/src/components/GmapAdvancedMarkerView/GmapAdvancedMarkerView.ts

@@ -2,21 +2,31 @@ import { onMounted, onUnmounted, shallowRef, watch, watchPostEffect } from "vue-
 import { useGmap } from "../../hooks/useMap";
 import { GmapOverlay, MapRegisterOverlayProps, useMapOverlay } from "../../hooks/useOverlay";
 import { defineSetup } from "../../types/helper";
-import { watchNoneImmediatePostEffectForDeepOption } from "../../utils/compare";
+import type { MapEventHandler } from "../../types/mapHelper";
+import {
+  watchNoneImmediatePostEffectForDeepOption,
+  watchPostEffectForGMapEvent,
+} from "../../utils/compare";
 
-export type GmapAdvancedMarkerViewProps = google.maps.marker.AdvancedMarkerViewOptions &
-  MapRegisterOverlayProps<GmapOverlay>;
+export interface GmapAdvancedMarkerViewProps
+  extends google.maps.marker.AdvancedMarkerViewOptions,
+    MapRegisterOverlayProps<GmapOverlay> {
+  onClick?: MapEventHandler<google.maps.marker.AdvancedMarkerView>;
+}
 
 export const GmapAdvancedMarkerView = defineSetup(function GmapAdvancedMarkerView(
-  props: GmapAdvancedMarkerViewProps
+  props: GmapAdvancedMarkerViewProps,
+  { emit }
 ) {
   const { registerOverlay } = props;
   const markerRef = shallowRef<google.maps.marker.AdvancedMarkerView>();
   const mapRef = useGmap();
+  const handleClick: typeof emit = (name) => emit(name as any, { target: markerRef.value! });
   useMapOverlay({ registerOverlay, overlayRef: markerRef });
   onMounted(() => {
     const { registerOverlay, ...markerViewProps } = props;
     markerRef.value = new google.maps.marker.AdvancedMarkerView({ ...markerViewProps });
+    markerRef.value.addListener;
   });
   onUnmounted(() => {
     if (!markerRef.value) return;
@@ -48,5 +58,6 @@ export const GmapAdvancedMarkerView = defineSetup(function GmapAdvancedMarkerVie
       flush: "post",
     }
   );
+  watchPostEffectForGMapEvent(markerRef, props, handleClick, ["onClick"]);
   return () => null;
 });