@heycar/heycars-map 0.2.4 → 0.2.6

package/dist/types/interface.d.ts

@@ -7,6 +7,7 @@ export type Place = {
     lat: number;
     name: string;
     cityName?: string;
+    cityId?: string;
 };
 export interface AutoCompletePlace extends Place {
     placeId?: string;
@@ -30,3 +31,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.6",
   "type": "module",
   "scripts": {
     "dev": "vite -c vite.config.dev.ts",

package/src/App.tsx

@@ -1,11 +1,13 @@
 import { defineComponent } from "vue-demi";
-import { HeycarDemo } from "./components/Demo/HeycarDemo";
+import { DemoBusinessQuoting } from "./components/Demo/DemoBusinessQuoting";
 
 export const App = defineComponent({
   setup() {
     // return () => <Hello class={"helloclass2"} qyc={2} style={{ color: "red" }} />;
     // return () => <ABusinessDemo />;
     // return () => <SearchDemo />;
-    return () => <HeycarDemo />;
+    // return () => <DemoBusinessTaxiService />;
+    return () => <DemoBusinessQuoting />;
+    // return () => <HeycarDemo />;
   },
 });

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

@@ -0,0 +1,49 @@
+import { HeycarMap, HeycarMapProps } from "../../components/MapProvider";
+import type { MapMountedProps } from "../../hooks/useMap";
+import type { MROP } from "../../hooks/useOverlay";
+import { defineLagecySetup } from "../../types/helper";
+import type { Place } from "../../types/interface";
+import { place2point } from "../../utils/transform";
+import { DrivingLine } from "../DrivingLine";
+import { DrivingRoute } from "../DrivingRoute";
+import { StartEndPoint } from "../StartEndPoint";
+
+export type BusinessQuotingMapProps = Omit<HeycarMapProps, "center" | "zoom"> &
+  MROP &
+  MapMountedProps & {
+    from: Place;
+    to: Place;
+    renderDescription: (titleProps: { distance: number; duration: number }) => string;
+  };
+export const BusinessQuotingMap = defineLagecySetup((props: BusinessQuotingMapProps) => {
+  const { registerOverlay, mapRef, renderDescription } = props;
+  return () => {
+    const { from: fromPlace, to: toPlace } = props;
+    const from = place2point(fromPlace);
+    const to = place2point(toPlace);
+    return (
+      <HeycarMap mapRef={mapRef} center={from} zoom={13}>
+        <StartEndPoint
+          type="start"
+          registerOverlay={registerOverlay}
+          position={from}
+          title={fromPlace.name}
+        />
+        <DrivingRoute
+          to={to}
+          from={from}
+          render={({ path, distance, duration }) => [
+            <DrivingLine path={path} />,
+            <StartEndPoint
+              type="end"
+              registerOverlay={registerOverlay}
+              position={to}
+              title={toPlace.name}
+              description={renderDescription({ distance, duration })}
+            />,
+          ]}
+        ></DrivingRoute>
+      </HeycarMap>
+    );
+  };
+}).props(["fallback", "from", "loading", "mapRef", "registerOverlay", "renderDescription", "to"]);

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

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

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

@@ -0,0 +1,358 @@
+import { ref, watch } from "vue-demi";
+import { HeycarMap, HeycarMapProps } from "../../components/MapProvider";
+import { useGeoLocation } from "../../hooks/useGeoLocation";
+import { MapMountedProps, onMapMounted } from "../../hooks/useMap";
+import type { MROP } from "../../hooks/useOverlay";
+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",
+];
+
+type SectionDispatchingProps = MROP &
+  MapMountedProps & {
+    title: string;
+    from: Place;
+  };
+const SectionDispatching = defineSetup((props: SectionDispatchingProps, { emit }) => {
+  onMapMounted(() => emit("mapMounted"));
+  return () => {
+    const { from: fromPlace, title, registerOverlay } = props;
+    const from = place2point(fromPlace);
+    return (
+      <div>
+        <StartEndPoint
+          type="start"
+          position={from}
+          title={title}
+          registerOverlay={registerOverlay}
+        />
+        <WaveCircle position={from} />
+        <PlaceCircle position={from} label={fromPlace.name} hideIcon />
+      </div>
+    );
+  };
+});
+
+type SectionDriverStartServiceProps = MROP &
+  MapMountedProps & {
+    passengerPosition: Point;
+    carPosition: Point;
+    from: Place;
+    renderTitle: (props: Pick<DrivingRouteRenderProps, "duration" | "distance">) => string;
+  };
+const SectionDriverStartService = defineSetup((props: SectionDriverStartServiceProps, { emit }) => {
+  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 />
+        <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} registerOverlay={registerOverlay} />
+      </div>
+    );
+  };
+});
+
+type SectionBookDispatchedProps = MROP &
+  MapMountedProps & {
+    passengerPosition: Point;
+    from: Place;
+    // @example 司机位置将在临近出发时间展示
+    title: string;
+  };
+const SectionBookDispatched = defineSetup((props: SectionBookDispatchedProps, { emit }) => {
+  onMapMounted(() => emit("mapMounted"));
+  return () => {
+    const { from: fromPlace, passengerPosition, title, registerOverlay } = props;
+    const from = place2point(fromPlace);
+    return (
+      <div>
+        <StartEndPoint
+          type="start"
+          position={from}
+          title={title}
+          registerOverlay={registerOverlay}
+        />
+        <PlaceCircle position={from} label={fromPlace.name} hideIcon />
+        <PassengerCircle position={passengerPosition} registerOverlay={registerOverlay} />
+      </div>
+    );
+  };
+});
+
+type SectionDriverArrivedProps = MROP &
+  MapMountedProps & {
+    from: Place;
+    carPosition: Point;
+    passengerPosition: Point;
+    // @example 司机已等待 *00:35*
+    title: string;
+  };
+const SectionDriverArrived = defineSetup((props: SectionDriverArrivedProps, { emit }) => {
+  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 />
+        <WalkingRoute
+          from={passengerPosition}
+          to={from}
+          render={({ path }) => <WalkingLine path={path} />}
+        />
+        <PassengerCircle
+          position={passengerPosition}
+          size="small"
+          registerOverlay={registerOverlay}
+        />
+      </div>
+    );
+  };
+});
+
+type SectionInServiceProps = MROP &
+  MapMountedProps & {
+    to: Place;
+    carPosition: Point;
+    renderTitle: (props: Pick<DrivingRouteRenderProps, "duration" | "distance">) => string;
+  };
+const SectionInService = defineSetup((props: SectionInServiceProps, { emit }) => {
+  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 />
+        <DrivingRoute
+          from={carPosition}
+          to={to}
+          render={({ path, distance, duration }) => [
+            <DrivingLine path={path} />,
+            <TaxiCar
+              position={carPosition}
+              title={renderTitle({ distance, duration })}
+              registerOverlay={registerOverlay}
+            />,
+          ]}
+        />
+      </div>
+    );
+  };
+});
+
+type SectionCanceledProps = MROP &
+  MapMountedProps & {
+    from: Place;
+    to: Place;
+  };
+const SectionCanceled = defineSetup((props: SectionCanceledProps, { emit }) => {
+  onMapMounted(() => emit("mapMounted"));
+  return () => {
+    const { from: fromPlace, to: toPlace, registerOverlay } = props;
+    const from = place2point(fromPlace);
+    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 />
+      </div>
+    );
+  };
+});
+
+type SectionEndServiceProps = MROP &
+  MapMountedProps & {
+    from: Place;
+    to: Place;
+  };
+const SectionEndService = defineSetup((props: SectionEndServiceProps, { emit }) => {
+  onMapMounted(() => emit("mapMounted"));
+  return () => {
+    const { from: fromPlace, to: toPlace, registerOverlay } = props;
+    const from = place2point(fromPlace);
+    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 />} />
+      </div>
+    );
+  };
+});
+
+export type BusinessTaxiServiceMapProps = Omit<HeycarMapProps, "center" | "zoom"> &
+  MROP &
+  MapMountedProps & {
+    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, { emit }) => {
+    const {
+      from,
+      interval,
+      registerOverlay,
+      mapRef,
+      getDriverPosition,
+      renderStartSerivceTitle,
+      renderInServiceTitle,
+    } = props;
+    const { geoPosition } = useGeoLocation({ geoDefaultPosition: place2point(from) });
+    const carPositionRef = ref<Point>(place2point(props.from));
+    const handleMounted = () => emit("mapMounted");
+    watch(
+      () => props.driverStatus,
+      (status, _, onCleanup) => {
+        if (!STATUS_NEED_CAR_POSITION.includes(status)) return;
+        const timer = setInterval(() => {
+          getDriverPosition().then((pos) => (carPositionRef.value = pos));
+        }, interval);
+        onCleanup(() => clearInterval(timer));
+      },
+      { immediate: true }
+    );
+    return () => {
+      const {
+        driverStatus,
+        from,
+        to,
+        dispatchingTitle,
+        bookDispatchingTitle,
+        bookDispatchedTitle,
+        driverArrivedTitle,
+      } = props;
+      const carPosition = carPositionRef.value;
+      return (
+        <HeycarMap center={place2point(from)} zoom={13} mapRef={mapRef}>
+          {driverStatus === "dispatching" ? (
+            <SectionDispatching
+              from={from}
+              title={dispatchingTitle}
+              registerOverlay={registerOverlay}
+              onMapMounted={handleMounted}
+            />
+          ) : driverStatus === "book-dispatching" ? (
+            <SectionDispatching
+              from={from}
+              title={bookDispatchingTitle}
+              registerOverlay={registerOverlay}
+              onMapMounted={handleMounted}
+            />
+          ) : driverStatus === "dispatched" ||
+            driverStatus === "driverStartService" ||
+            driverStatus === "book-driverStartService" ? (
+            <SectionDriverStartService
+              from={from}
+              carPosition={carPosition}
+              passengerPosition={geoPosition.value}
+              renderTitle={renderStartSerivceTitle}
+              registerOverlay={registerOverlay}
+              onMapMounted={handleMounted}
+            />
+          ) : driverStatus === "book-dispatched" ? (
+            <SectionBookDispatched
+              from={from}
+              passengerPosition={geoPosition.value}
+              title={bookDispatchedTitle}
+              registerOverlay={registerOverlay}
+              onMapMounted={handleMounted}
+            />
+          ) : driverStatus === "inService" ? (
+            <SectionInService
+              to={to}
+              carPosition={carPosition}
+              renderTitle={renderInServiceTitle}
+              registerOverlay={registerOverlay}
+              onMapMounted={handleMounted}
+            />
+          ) : driverStatus === "driverArrived" ? (
+            <SectionDriverArrived
+              from={from}
+              carPosition={carPosition}
+              passengerPosition={geoPosition.value}
+              title={driverArrivedTitle}
+              registerOverlay={registerOverlay}
+              onMapMounted={handleMounted}
+            />
+          ) : driverStatus === "canceled" ? (
+            <SectionCanceled from={from} to={to} registerOverlay={registerOverlay} />
+          ) : driverStatus === "endService" ? (
+            <SectionEndService
+              from={from}
+              to={to}
+              registerOverlay={registerOverlay}
+              onMapMounted={handleMounted}
+            />
+          ) : null}
+        </HeycarMap>
+      );
+    };
+  }
+).props([
+  "bookDispatchedTitle",
+  "bookDispatchingTitle",
+  "dispatchingTitle",
+  "driverArrivedTitle",
+  "driverStatus",
+  "fallback",
+  "from",
+  "getDriverPosition",
+  "interval",
+  "loading",
+  "mapRef",
+  "renderInServiceTitle",
+  "renderStartSerivceTitle",
+  "to",
+  "registerOverlay",
+]);

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

@@ -4,17 +4,20 @@ import imgPlaceCircle from "../../assets/icons/svg/place-circle.svg";
 import { AmapMarker } from "../../components/AmapMarker";
 import { GmapAdvancedMarkerView } from "../../components/GmapAdvancedMarkerView";
 import { useMapSupplier } from "../../hooks/useMapSupplier";
+import type { AmapOverlay, GmapOverlay, MapRegisterOverlayProps } from "../../hooks/useOverlay";
 import { createElement, defineSetup } from "../../types/helper";
 import { createDom } from "../../utils/dom";
 import { vec2lnglat } from "../../utils/transform";
 
 import * as css from "./PassengerCircle.css";
 
-interface PassengerCircleProps {
+interface PassengerCircleProps<T> extends MapRegisterOverlayProps<T> {
   position: [number, number];
   size?: "small" | "large";
 }
-export const APassengerCircle = defineSetup(function APassengerCircle(props: PassengerCircleProps) {
+export const APassengerCircle = defineSetup(function APassengerCircle(
+  props: PassengerCircleProps<AmapOverlay>
+) {
   const contentRef = computed(() => {
     const { size = "large" } = props;
     const src = size === "large" ? imgPassengerCircle : imgPlaceCircle;
@@ -22,23 +25,38 @@ export const APassengerCircle = defineSetup(function APassengerCircle(props: Pas
         <img src="${src}" class="${css.passengerCircle({ size })}">
       `;
   });
-  return () => (
-    <AmapMarker position={props.position} content={contentRef.value} anchor={"bottom-center"} />
-  );
+  return () => {
+    return (
+      <AmapMarker
+        position={props.position}
+        content={contentRef.value}
+        anchor={"bottom-center"}
+        registerOverlay={props.registerOverlay}
+      />
+    );
+  };
 });
 
-export const GPassengerCircle = defineSetup(function GPassengerCircle(props: PassengerCircleProps) {
+export const GPassengerCircle = defineSetup(function GPassengerCircle(
+  props: PassengerCircleProps<GmapOverlay>
+) {
   const contentRef = computed(() => {
     const { size = "large" } = props;
     const src = size === "large" ? imgPassengerCircle : imgPlaceCircle;
     return createDom("img", { class: css.passengerCircle({ size }), src });
   });
   return () => (
-    <GmapAdvancedMarkerView position={vec2lnglat(props.position)} content={contentRef.value} />
+    <GmapAdvancedMarkerView
+      position={vec2lnglat(props.position)}
+      content={contentRef.value}
+      registerOverlay={props.registerOverlay}
+    />
   );
 });
 
-export const PassengerCircle = defineSetup(function PassengerCircle(props: PassengerCircleProps) {
+export const PassengerCircle = defineSetup(function PassengerCircle(
+  props: PassengerCircleProps<AmapOverlay> | PassengerCircleProps<GmapOverlay>
+) {
   const payload = useMapSupplier();
   return () => {
     return createElement(payload.supplier === "gmap" ? GPassengerCircle : APassengerCircle, {

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),
+      },
     });
   };
 });