@heycar/heycars-map 0.2.6 → 0.2.7

package/dist/style.css

@@ -1 +1 @@
-.rgf09w0{width:7.1045vw;height:10.93vw;display:flex}._15rq2xn0{display:flex;flex-direction:column;align-items:center;margin-bottom:-1.6vw}._15rq2xn1{padding:2.13vw 4.5vw 2.67vw 4.27vw;display:flex;align-items:center;background:linear-gradient(90deg,#79AFFF 0%,#5C8DFF 32%,#507FFF 75%,#4471FF 100%);border-radius:3.2vw}._15rq2xn2{font-size:3.47vw;font-family:PingFangSC-Semibold,PingFang SC;font-weight:600;color:#fff;line-height:4.8vw;white-space:nowrap}._15rq2xn3{font-size:2.93vw;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#eafaf8;line-height:4.27vw;white-space:nowrap;opacity:.8}._15rq2xn4{margin-left:3.2vw;width:1.44vw;height:2.4vw}._15rq2xn5{width:.8vw;height:4vw;background:#4C80FF;border-radius:0vw 0vw 26.67vw 26.67vw;z-index:1}._15rq2xn6{margin-top:-1.5vw;width:3.2vw;height:3.2vw}._1l6offo0{display:flex}._1l6offo1{width:4.53vw;height:4.53vw;margin-bottom:-2.265vw}._1l6offo2{width:16.27vw;height:16.27vw;margin-bottom:-8.135vw}.fhyw80{display:flex;align-items:center}.fhyw81{flex-direction:row-reverse}.fhyw83{margin-right:-2.265vw}.fhyw84{margin-left:-2.265vw}.fhyw85{margin-bottom:-2.265vw}.fhyw86{margin-right:calc(50% - 2.265vw)}.fhyw87{margin-left:calc(50% - 2.265vw)}.fhyw88{display:flex;width:4.53vw;height:4.53vw}.fhyw89{opacity:0}.fhyw8b{font-size:3.47vw;font-family:PingFangSC-Semibold,PingFang SC;font-weight:600;color:#243e66;line-height:4.53vw;white-space:nowrap}._4a4ovk0{margin-bottom:-.4vw;display:flex;flex-direction:column;align-items:center}._4a4ovk1{padding:1.07vw 2.4vw 1.6vw 2.67vw;background:#FFFFFF;box-shadow:0 .53vw 2.4vw #3f3f3f33;border-radius:2.13vw}._4a4ovk2{padding:2.67vw 2.67vw 2.4vw 3.2vw;background:#FFFFFF;box-shadow:0 0 2.67vw #4e556c26;border-radius:4.8vw;font-size:3.2vw;font-family:PingFangSC-Medium,PingFang SC;font-weight:500;color:#1e1e1e;line-height:4.53vw;white-space:nowrap}._4a4ovk3{font-size:3.2vw;font-family:PingFangSC-Medium,PingFang SC;font-weight:500;color:#1e1e1e;line-height:4.53vw;white-space:nowrap}._4a4ovk4{font-size:2.4vw;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#7e7e7e;line-height:3.47vw;white-space:nowrap}._4a4ovk5{color:#4471ff;font-family:PingFangSC-Medium,PingFang SC;font-weight:500}._4a4ovk6{margin-top:1.33vw;width:6.192vw;height:7.998vw}._4a4ovk7{margin-top:2.4vw;width:6.192vw;height:7.998vw}._65j3sr1{margin-top:1.87vw;margin-bottom:-5.5vw;width:6vw;height:11vw}@keyframes rrvp0y0{0%{transform:scale(0);opacity:1}33.33%{transform:scale(.5);opacity:1}66.66%{transform:scale(1);opacity:0}to{transform:scale(1);opacity:0}}@keyframes rrvp0y1{0%{transform:scale(0);opacity:0}33.33%{transform:scale(0);opacity:1}66.66%{transform:scale(.5);opacity:1}to{transform:scale(1);opacity:0}}.rrvp0y2{display:flex;margin-bottom:-30.935vw;width:61.87vw;height:61.87vw;animation-name:rrvp0y0;animation-duration:3s;animation-iteration-count:infinite;animation-timing-function:linear}.rrvp0y3{animation-name:rrvp0y1}
+.rgf09w0{width:7.1045vw;height:10.93vw;display:flex}._15rq2xn0{display:flex;flex-direction:column;align-items:center;margin-bottom:-1.6vw}._15rq2xn1{padding:2.13vw 4.5vw 2.67vw 4.27vw;display:flex;align-items:center;background:linear-gradient(90deg,#79AFFF 0%,#5C8DFF 32%,#507FFF 75%,#4471FF 100%);border-radius:3.2vw}._15rq2xn2{font-size:3.47vw;font-family:PingFangSC-Semibold,PingFang SC;font-weight:600;color:#fff;line-height:4.8vw;white-space:nowrap}._15rq2xn3{font-size:2.93vw;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#eafaf8;line-height:4.27vw;white-space:nowrap;opacity:.8}._15rq2xn4{margin-left:3.2vw;width:1.44vw;height:2.4vw}._15rq2xn5{width:.8vw;height:4vw;background:#4C80FF;border-radius:0vw 0vw 26.67vw 26.67vw;z-index:1}._15rq2xn6{margin-top:-1.5vw;width:3.2vw;height:3.2vw}._4a4ovk0{margin-bottom:-.4vw;display:flex;flex-direction:column;align-items:center}._4a4ovk1{padding:1.07vw 2.4vw 1.6vw 2.67vw;background:#FFFFFF;box-shadow:0 .53vw 2.4vw #3f3f3f33;border-radius:2.13vw}._4a4ovk2{padding:2.67vw 2.67vw 2.4vw 3.2vw;background:#FFFFFF;box-shadow:0 0 2.67vw #4e556c26;border-radius:4.8vw;font-size:3.2vw;font-family:PingFangSC-Medium,PingFang SC;font-weight:500;color:#1e1e1e;line-height:4.53vw;white-space:nowrap}._4a4ovk3{font-size:3.2vw;font-family:PingFangSC-Medium,PingFang SC;font-weight:500;color:#1e1e1e;line-height:4.53vw;white-space:nowrap}._4a4ovk4{font-size:2.4vw;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#7e7e7e;line-height:3.47vw;white-space:nowrap}._4a4ovk5{color:#4471ff;font-family:PingFangSC-Medium,PingFang SC;font-weight:500}._4a4ovk6{margin-top:1.33vw;width:6.192vw;height:7.998vw}._4a4ovk7{margin-top:2.4vw;width:6.192vw;height:7.998vw}._1l6offo0{display:flex}._1l6offo1{width:4.53vw;height:4.53vw;margin-bottom:-2.265vw}._1l6offo2{width:16.27vw;height:16.27vw;margin-bottom:-8.135vw}.fhyw80{display:flex;align-items:center}.fhyw81{flex-direction:row-reverse}.fhyw83{margin-right:-2.265vw}.fhyw84{margin-left:-2.265vw}.fhyw85{margin-bottom:-2.265vw}.fhyw86{margin-right:calc(50% - 2.265vw)}.fhyw87{margin-left:calc(50% - 2.265vw)}.fhyw88{display:flex;width:4.53vw;height:4.53vw}.fhyw89{opacity:0}.fhyw8b{font-size:3.47vw;font-family:PingFangSC-Semibold,PingFang SC;font-weight:600;color:#243e66;line-height:4.53vw;white-space:nowrap}._65j3sr1{margin-top:1.87vw;margin-bottom:-5.5vw;width:6vw;height:11vw}@keyframes rrvp0y0{0%{transform:scale(0);opacity:1}33.33%{transform:scale(.5);opacity:1}66.66%{transform:scale(1);opacity:0}to{transform:scale(1);opacity:0}}@keyframes rrvp0y1{0%{transform:scale(0);opacity:0}33.33%{transform:scale(0);opacity:1}66.66%{transform:scale(.5);opacity:1}to{transform:scale(1);opacity:0}}.rrvp0y2{display:flex;margin-bottom:-30.935vw;width:61.87vw;height:61.87vw;animation-name:rrvp0y0;animation-duration:3s;animation-iteration-count:infinite;animation-timing-function:linear}.rrvp0y3{animation-name:rrvp0y1}

package/dist/types/interface.d.ts

@@ -25,6 +25,7 @@ export type City = {
 export interface RegisterOverlay<T> {
     add: (overlay: T) => void;
     remove: (overlay: T) => void;
+    setFitView: () => void;
 }
 export interface Route {
     path: Point[];

package/package.json

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

package/src/App.tsx

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

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

@@ -1,16 +1,15 @@
 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 { FitViewOnce } from "../FitView";
 import { StartEndPoint } from "../StartEndPoint";
 
 export type BusinessQuotingMapProps = Omit<HeycarMapProps, "center" | "zoom"> &
-  MROP &
-  MapMountedProps & {
+  Required<MROP> & {
     from: Place;
     to: Place;
     renderDescription: (titleProps: { distance: number; duration: number }) => string;
@@ -42,7 +41,8 @@ export const BusinessQuotingMap = defineLagecySetup((props: BusinessQuotingMapPr
               description={renderDescription({ distance, duration })}
             />,
           ]}
-        ></DrivingRoute>
+        />
+        <FitViewOnce registerOverlay={registerOverlay} />
       </HeycarMap>
     );
   };

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

@@ -222,8 +222,7 @@ const SectionEndService = defineSetup((props: SectionEndServiceProps, { emit })
 });
 
 export type BusinessTaxiServiceMapProps = Omit<HeycarMapProps, "center" | "zoom"> &
-  MROP &
-  MapMountedProps & {
+  Required<MROP> & {
     from: Place;
     to: Place;
     // @example 正在为您搜索附近司机
@@ -237,109 +236,107 @@ export type BusinessTaxiServiceMapProps = Omit<HeycarMapProps, "center" | "zoom"
     renderInServiceTitle: (titleProps: { distance: number; duration: number }) => string;
     getDriverPosition: () => Promise<Point>;
   };
-export const BusinessTaxiServiceMap = defineLagecySetup(
-  (props: BusinessTaxiServiceMapProps, { emit }) => {
+export const BusinessTaxiServiceMap = defineLagecySetup((props: BusinessTaxiServiceMapProps) => {
+  const {
+    from,
+    interval,
+    registerOverlay,
+    mapRef,
+    getDriverPosition,
+    renderStartSerivceTitle,
+    renderInServiceTitle,
+  } = props;
+  const { setFitView } = registerOverlay;
+  const { geoPosition } = useGeoLocation({ geoDefaultPosition: place2point(from) });
+  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,
-      interval,
-      registerOverlay,
-      mapRef,
-      getDriverPosition,
-      renderStartSerivceTitle,
-      renderInServiceTitle,
+      to,
+      dispatchingTitle,
+      bookDispatchingTitle,
+      bookDispatchedTitle,
+      driverArrivedTitle,
     } = 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 }
+    const carPosition = carPositionRef.value;
+    return (
+      <HeycarMap center={place2point(from)} zoom={13} mapRef={mapRef}>
+        {driverStatus === "dispatching" ? (
+          <SectionDispatching
+            from={from}
+            title={dispatchingTitle}
+            registerOverlay={registerOverlay}
+            onMapMounted={setFitView}
+          />
+        ) : driverStatus === "book-dispatching" ? (
+          <SectionDispatching
+            from={from}
+            title={bookDispatchingTitle}
+            registerOverlay={registerOverlay}
+            onMapMounted={setFitView}
+          />
+        ) : driverStatus === "dispatched" ||
+          driverStatus === "driverStartService" ||
+          driverStatus === "book-driverStartService" ? (
+          <SectionDriverStartService
+            from={from}
+            carPosition={carPosition}
+            passengerPosition={geoPosition.value}
+            renderTitle={renderStartSerivceTitle}
+            registerOverlay={registerOverlay}
+            onMapMounted={setFitView}
+          />
+        ) : driverStatus === "book-dispatched" ? (
+          <SectionBookDispatched
+            from={from}
+            passengerPosition={geoPosition.value}
+            title={bookDispatchedTitle}
+            registerOverlay={registerOverlay}
+            onMapMounted={setFitView}
+          />
+        ) : driverStatus === "inService" ? (
+          <SectionInService
+            to={to}
+            carPosition={carPosition}
+            renderTitle={renderInServiceTitle}
+            registerOverlay={registerOverlay}
+            onMapMounted={setFitView}
+          />
+        ) : driverStatus === "driverArrived" ? (
+          <SectionDriverArrived
+            from={from}
+            carPosition={carPosition}
+            passengerPosition={geoPosition.value}
+            title={driverArrivedTitle}
+            registerOverlay={registerOverlay}
+            onMapMounted={setFitView}
+          />
+        ) : driverStatus === "canceled" ? (
+          <SectionCanceled from={from} to={to} registerOverlay={registerOverlay} />
+        ) : driverStatus === "endService" ? (
+          <SectionEndService
+            from={from}
+            to={to}
+            registerOverlay={registerOverlay}
+            onMapMounted={setFitView}
+          />
+        ) : null}
+      </HeycarMap>
     );
-    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([
+  };
+}).props([
   "bookDispatchedTitle",
   "bookDispatchingTitle",
   "dispatchingTitle",

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

@@ -1,6 +1,6 @@
-import { useMap } from "../../hooks/useMap";
+import { onMapMounted, useMap } from "../../hooks/useMap";
 import { useMapFitView, UseMapFitViewOutput, UseMapFitViewProps } from "../../hooks/useMapFitView";
-import type { AmapOverlay, GmapOverlay } from "../../hooks/useOverlay";
+import type { AmapOverlay, GmapOverlay, MROP } from "../../hooks/useOverlay";
 import { defineSetup, VNodeChild } from "../../types/helper";
 
 type FitViewRenderProps = UseMapFitViewOutput<AmapOverlay> | UseMapFitViewOutput<GmapOverlay>;
@@ -12,3 +12,11 @@ export const FitView = defineSetup(function FitView(props: FitViewProps, { slots
   const ctx = useMapFitView({ ...props, mapRef });
   return () => <div>{slots.render?.(ctx)}</div>;
 });
+
+export type FitViewOnceProps = Required<MROP>;
+export const FitViewOnce = defineSetup(function FitViewOnce(props: FitViewOnceProps, { slots }) {
+  const { registerOverlay } = props;
+  const { setFitView } = registerOverlay;
+  onMapMounted(setFitView);
+  return () => <div>{slots.default?.()}</div>;
+});

package/src/components/Demo/DemoBusinessQuoting.tsx

@@ -24,7 +24,7 @@ export const DemoBusinessQuoting = defineSetup(function DemoBusinessTaxiService(
 });
 
 const SomeQuotingPage = defineSetup(function SomeQuotingPage() {
-  const { setMap, setFitView, registerFitVeiw } = useBusinessQuotingMap();
+  const { setMap, registerFitVeiw } = useBusinessQuotingMap();
   return () => (
     <BusinessQuotingMap
       class={css.demo}
@@ -33,7 +33,6 @@ const SomeQuotingPage = defineSetup(function SomeQuotingPage() {
       renderDescription={({ distance, duration }) => `全程 *${distance}公里*  约行驶 *${duration}*`}
       mapRef={setMap}
       registerOverlay={registerFitVeiw}
-      onMapMounted={setFitView}
     />
   );
 });

package/src/components/Demo/DemoBusinessTaxiService.tsx

@@ -47,7 +47,6 @@ export const TaxiCarServicePage = defineSetup(function TaxiCarServicePage() {
       interval={5000}
       mapRef={setMap}
       registerOverlay={registerFitVeiw}
-      onMapMounted={setFitView}
     />
   );
 });

package/src/hooks/useMapFitView.ts

@@ -27,14 +27,6 @@ export const useAmapFitView = (props: UseMapFitViewProps<AMap.Map>) => {
   const { mapRef, autoFitTimeout } = props;
   const overlayGroup: Set<AmapOverlay> = new Set();
   let timer: number | undefined = undefined;
-  const registerFitVeiw: RegisterOverlay<AmapOverlay> = {
-    add: (overlay: AmapOverlay) => {
-      overlayGroup.add(overlay);
-    },
-    remove: (overlay: AmapOverlay) => {
-      overlayGroup.delete(overlay);
-    },
-  };
   const setFitView = () => {
     const map = mapRef.value;
     if (!map) return;
@@ -43,6 +35,15 @@ export const useAmapFitView = (props: UseMapFitViewProps<AMap.Map>) => {
     console.log([...overlayGroup]);
     map.setFitView([...overlayGroup], false, [top * vw, bottom * vw, left * vw, right * vw]);
   };
+  const registerFitVeiw: RegisterOverlay<AmapOverlay> = {
+    add: (overlay: AmapOverlay) => {
+      overlayGroup.add(overlay);
+    },
+    remove: (overlay: AmapOverlay) => {
+      overlayGroup.delete(overlay);
+    },
+    setFitView,
+  };
   const handleMoveEndOrZomEnd = () => {
     if (!autoFitTimeout) return;
     if (timer) clearTimeout(timer);
@@ -82,14 +83,6 @@ export const useGmapFitView = (props: UseMapFitViewProps<google.maps.Map>) => {
   const { executeMapApi } = useMapEventSource();
   const overlayGroup = new SimpleGmapOverLayerGroup();
   let timer: number | undefined = undefined;
-  const registerFitVeiw: RegisterOverlay<GmapOverlay> = {
-    add: (overlay: GmapOverlay) => {
-      overlayGroup.add(overlay);
-    },
-    remove: (overlay: GmapOverlay) => {
-      overlayGroup.delete(overlay);
-    },
-  };
   const setFitView = () => {
     const map = mapRef.value;
     if (!map) return;
@@ -104,6 +97,15 @@ export const useGmapFitView = (props: UseMapFitViewProps<google.maps.Map>) => {
       })
     );
   };
+  const registerFitVeiw: RegisterOverlay<GmapOverlay> = {
+    add: (overlay: GmapOverlay) => {
+      overlayGroup.add(overlay);
+    },
+    remove: (overlay: GmapOverlay) => {
+      overlayGroup.delete(overlay);
+    },
+    setFitView,
+  };
   const handleMoveEnd = (name: string) => {
     const eventSource = getMapEvnetSource();
     console.log("handleMoveEndOrZomEnd name, eventSource = ", name, eventSource);

package/src/index.ts

@@ -1,5 +1,6 @@
 import "./style.css";
 export { AddressBox } from "./business-components/AddressBox";
+export { BusinessQuotingMap } from "./business-components/BusinessQuotingMap";
 export { BusinessTaxiServiceMap } from "./business-components/BusinessTaxiServiceMap";
 export { DrivingLine } from "./business-components/DrivingLine";
 export { DrivingRoute } from "./business-components/DrivingRoute";
@@ -14,6 +15,7 @@ export { WaveCircle } from "./business-components/WaveCircle";
 export * from "./components/MapProvider";
 export * from "./hooks-business/useBusinessMapAutoComplete";
 export * from "./hooks-business/useBusinessMapRecomendPlace";
+export * from "./hooks-business/useBusinessQuotingMap";
 export * from "./hooks-business/useBusinessTaxiServiceMap";
 export { useDrivingRoute } from "./hooks/useDrivingRoute";
 export { useGeoLocation } from "./hooks/useGeoLocation";

package/src/types/interface.ts

@@ -28,6 +28,7 @@ export type City = {
 export interface RegisterOverlay<T> {
   add: (overlay: T) => void;
   remove: (overlay: T) => void;
+  setFitView: () => void;
 }
 
 export interface Route {