@heycar/heycars-map 0.2.5 → 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;

package/package.json

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

package/src/App.tsx

@@ -1,5 +1,5 @@
 import { defineComponent } from "vue-demi";
-import { HeycarDemo } from "./components/Demo/HeycarDemo";
+import { DemoBusinessQuoting } from "./components/Demo/DemoBusinessQuoting";
 
 export const App = defineComponent({
   setup() {
@@ -7,6 +7,7 @@ export const App = defineComponent({
     // return () => <ABusinessDemo />;
     // return () => <SearchDemo />;
     // return () => <DemoBusinessTaxiService />;
-    return () => <HeycarDemo />;
+    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

@@ -1,6 +1,8 @@
 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";
@@ -22,17 +24,24 @@ const STATUS_NEED_CAR_POSITION: DriverStatus[] = [
   "driverArrived",
 ];
 
-interface SectionDispatchingProps {
-  title: string;
-  from: Place;
-}
-const SectionDispatching = defineSetup((props: SectionDispatchingProps) => {
+type SectionDispatchingProps = MROP &
+  MapMountedProps & {
+    title: string;
+    from: Place;
+  };
+const SectionDispatching = defineSetup((props: SectionDispatchingProps, { emit }) => {
+  onMapMounted(() => emit("mapMounted"));
   return () => {
-    const { from: fromPlace, title } = props;
+    const { from: fromPlace, title, registerOverlay } = props;
     const from = place2point(fromPlace);
     return (
       <div>
-        <StartEndPoint type="start" position={from} title={title} />
+        <StartEndPoint
+          type="start"
+          position={from}
+          title={title}
+          registerOverlay={registerOverlay}
+        />
         <WaveCircle position={from} />
         <PlaceCircle position={from} label={fromPlace.name} hideIcon />
       </div>
@@ -40,19 +49,21 @@ const SectionDispatching = defineSetup((props: SectionDispatchingProps) => {
   };
 });
 
-interface SectionDriverStartServiceProps {
-  passengerPosition: Point;
-  carPosition: Point;
-  from: Place;
-  renderTitle: (props: Pick<DrivingRouteRenderProps, "duration" | "distance">) => string;
-}
-const SectionDriverStartService = defineSetup((props: SectionDriverStartServiceProps) => {
+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 } = props;
+    const { from: fromPlace, carPosition, passengerPosition, renderTitle, registerOverlay } = props;
     const from = place2point(fromPlace);
     return (
       <div>
-        <StartEndPoint type="start" position={from} />
+        <StartEndPoint type="start" position={from} registerOverlay={registerOverlay} />
         <PlaceCircle position={from} label={fromPlace.name} hideIcon />
         <DrivingRoute
           from={carPosition}
@@ -67,78 +78,97 @@ const SectionDriverStartService = defineSetup((props: SectionDriverStartServiceP
           to={from}
           render={({ path }) => <WalkingLine path={path} />}
         />
-        <PassengerCircle position={passengerPosition} />
+        <PassengerCircle position={passengerPosition} registerOverlay={registerOverlay} />
       </div>
     );
   };
 });
 
-interface SectionBookDispatchedProps {
-  passengerPosition: Point;
-  from: Place;
-  // @example 司机位置将在临近出发时间展示
-  title: string;
-}
-const SectionBookDispatched = defineSetup((props: SectionBookDispatchedProps) => {
+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 } = props;
+    const { from: fromPlace, passengerPosition, title, registerOverlay } = props;
     const from = place2point(fromPlace);
     return (
       <div>
-        <StartEndPoint type="start" position={from} title={title} />
+        <StartEndPoint
+          type="start"
+          position={from}
+          title={title}
+          registerOverlay={registerOverlay}
+        />
         <PlaceCircle position={from} label={fromPlace.name} hideIcon />
-        <PassengerCircle position={passengerPosition}></PassengerCircle>
+        <PassengerCircle position={passengerPosition} registerOverlay={registerOverlay} />
       </div>
     );
   };
 });
 
-interface SectionDriverArrivedProps {
-  from: Place;
-  carPosition: Point;
-  passengerPosition: Point;
-  // @example 司机已等待 *00:35*
-  title: string;
-}
-const SectionDriverArrived = defineSetup((props: SectionDriverArrivedProps) => {
+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 } = props;
+    const { from: fromPlace, carPosition, passengerPosition, title, registerOverlay } = props;
     const from = place2point(fromPlace);
     return (
       <div>
-        <TaxiCar position={carPosition} title={title} />
-        <StartEndPoint type="start" position={from} />
+        <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" />
+        <PassengerCircle
+          position={passengerPosition}
+          size="small"
+          registerOverlay={registerOverlay}
+        />
       </div>
     );
   };
 });
 
-interface SectionInServiceProps {
-  to: Place;
-  carPosition: Point;
-  renderTitle: (props: Pick<DrivingRouteRenderProps, "duration" | "distance">) => string;
-}
-const SectionInService = defineSetup((props: SectionInServiceProps) => {
+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 } = props;
+    const { to: toPlace, carPosition, renderTitle, registerOverlay } = props;
     const to = place2point(toPlace);
     return (
       <div>
-        <StartEndPoint type="end" position={to} />
-        <PlaceCircle position={carPosition} label="'WebSter Dental Plaza'" hide-icon="true" />
+        <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 })} />,
+            <TaxiCar
+              position={carPosition}
+              title={renderTitle({ distance, duration })}
+              registerOverlay={registerOverlay}
+            />,
           ]}
         />
       </div>
@@ -146,19 +176,21 @@ const SectionInService = defineSetup((props: SectionInServiceProps) => {
   };
 });
 
-interface SectionCanceledProps {
-  from: Place;
-  to: Place;
-}
-const SectionCanceled = defineSetup((props: SectionCanceledProps) => {
+type SectionCanceledProps = MROP &
+  MapMountedProps & {
+    from: Place;
+    to: Place;
+  };
+const SectionCanceled = defineSetup((props: SectionCanceledProps, { emit }) => {
+  onMapMounted(() => emit("mapMounted"));
   return () => {
-    const { from: fromPlace, to: toPlace } = props;
+    const { from: fromPlace, to: toPlace, registerOverlay } = props;
     const from = place2point(fromPlace);
     const to = place2point(toPlace);
     return (
       <div>
-        <StartEndPoint type="start" position={from} />
-        <StartEndPoint type="end" position={to} />
+        <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>
@@ -166,19 +198,21 @@ const SectionCanceled = defineSetup((props: SectionCanceledProps) => {
   };
 });
 
-interface SectionEndServiceProps {
-  from: Place;
-  to: Place;
-}
-const SectionEndService = defineSetup((props: SectionEndServiceProps) => {
+type SectionEndServiceProps = MROP &
+  MapMountedProps & {
+    from: Place;
+    to: Place;
+  };
+const SectionEndService = defineSetup((props: SectionEndServiceProps, { emit }) => {
+  onMapMounted(() => emit("mapMounted"));
   return () => {
-    const { from: fromPlace, to: toPlace } = props;
+    const { from: fromPlace, to: toPlace, registerOverlay } = props;
     const from = place2point(fromPlace);
     const to = place2point(toPlace);
     return (
       <div>
-        <StartEndPoint type="start" position={from} />
-        <StartEndPoint type="end" position={to} />
+        <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 />} />
@@ -187,87 +221,125 @@ const SectionEndService = defineSetup((props: SectionEndServiceProps) => {
   };
 });
 
-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 () => {
+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 {
-      driverStatus,
       from,
-      to,
-      dispatchingTitle,
-      bookDispatchingTitle,
-      bookDispatchedTitle,
-      driverArrivedTitle,
+      interval,
+      registerOverlay,
+      mapRef,
+      getDriverPosition,
       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>
+    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 }
     );
-  };
-}).props([
+    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",
@@ -282,4 +354,5 @@ export const BusinessTaxiServiceMap = defineLagecySetup((props: BusinessTaxiServ
   "renderInServiceTitle",
   "renderStartSerivceTitle",
   "to",
+  "registerOverlay",
 ]);

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, {