@heycar/heycars-map 0.2.5 → 0.2.7

package/src/components/Demo/DemoBusinessQuoting.tsx

@@ -0,0 +1,38 @@
+import { BusinessQuotingMap } from "../../business-components/BusinessQuotingMap";
+import { useBusinessQuotingMap } from "../../hooks-business/useBusinessQuotingMap";
+import { defineSetup } from "../../types/helper";
+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 DemoBusinessQuoting = defineSetup(function DemoBusinessTaxiService() {
+  return () => (
+    <MapProvider
+      amapKey={amapApiKey}
+      amapSecret={amapApiSecret}
+      gmapId={gmapId}
+      gmapKey={gmapApiKey}
+      supplier={"amap"}
+    >
+      <SomeQuotingPage />
+    </MapProvider>
+  );
+});
+
+const SomeQuotingPage = defineSetup(function SomeQuotingPage() {
+  const { setMap, registerFitVeiw } = useBusinessQuotingMap();
+  return () => (
+    <BusinessQuotingMap
+      class={css.demo}
+      from={{ lng: 121.4, lat: 31.2, name: "from place name" }}
+      to={{ lng: 121.5, lat: 31.4, name: "to place name" }}
+      renderDescription={({ distance, duration }) => `全程 *${distance}公里*  约行驶 *${duration}*`}
+      mapRef={setMap}
+      registerOverlay={registerFitVeiw}
+    />
+  );
+});

package/src/components/Demo/DemoBusinessTaxiService.tsx

@@ -1,4 +1,5 @@
 import { BusinessTaxiServiceMap } from "../../business-components/BusinessTaxiServiceMap/BusinessTaxiServiceMap";
+import { useBusinessTaxiServiceMap } from "../../hooks-business/useBusinessTaxiServiceMap";
 import { defineSetup } from "../../types/helper";
 import type { Point } from "../../types/interface";
 import { MapProvider } from "../MapProvider/MapProvider";
@@ -24,13 +25,14 @@ export const DemoBusinessTaxiService = defineSetup(function DemoBusinessTaxiServ
 });
 
 export const TaxiCarServicePage = defineSetup(function TaxiCarServicePage() {
+  const { setMap, setFitView, registerFitVeiw } = useBusinessTaxiServiceMap();
   const getDriverPosition = () => Promise.resolve([121.42, 31.25] as Point);
   return () => (
     <BusinessTaxiServiceMap
       class={css.demo}
       from={{ lng: 121.4, lat: 31.2, name: "from place name" }}
       to={{ lng: 121.5, lat: 31.4, name: "to place name" }}
-      driverStatus="driverStartService"
+      driverStatus="book-driverStartService"
       bookDispatchingTitle="2月14日 11:00 用车"
       bookDispatchedTitle="司机位置将在临近出发时间展示"
       dispatchingTitle="正在为您搜索附近司机"
@@ -43,6 +45,8 @@ export const TaxiCarServicePage = defineSetup(function TaxiCarServicePage() {
       }
       getDriverPosition={getDriverPosition}
       interval={5000}
+      mapRef={setMap}
+      registerOverlay={registerFitVeiw}
     />
   );
 });

package/src/hooks/useGeoLocation.ts

@@ -8,7 +8,7 @@ export interface UseGeoLocationProps {
   onLoadDefault?: (value: { position: Point }) => any;
 }
 export const useGeoLocation = (props?: UseGeoLocationProps) => {
-  const { onChange, onLoad, onLoadDefault } = props ?? {};
+  const { onChange, onLoad, onLoadDefault, geoDefaultPosition } = props ?? {};
   const loading = ref(false);
   const readyRef = ref(false);
   const errorRef = ref<GeolocationPositionError>();
@@ -17,8 +17,8 @@ export const useGeoLocation = (props?: UseGeoLocationProps) => {
     altitude: 0,
     altitudeAccuracy: 0,
     heading: 0,
-    latitude: 0,
-    longitude: 0,
+    latitude: geoDefaultPosition?.[1] ?? 0,
+    longitude: geoDefaultPosition?.[0] ?? 0,
     speed: 0,
   });
   const positionRef = ref<Point>([coordinateRef.value.longitude, coordinateRef.value.latitude]);

package/src/hooks/useMap.ts

@@ -1,4 +1,4 @@
-import { inject, provide, ShallowRef } from "vue-demi";
+import { inject, provide, ShallowRef, watch } from "vue-demi";
 import type { MapShallowRef } from "../types/interface";
 import { useMapSupplier } from "./useMapSupplier";
 
@@ -27,3 +27,17 @@ export const provideMap = (mapRef: MapShallowRef) => {
     ? provideGmap(mapRef as MapShallowRef<google.maps.Map>)
     : provideAmap(mapRef as MapShallowRef<AMap.Map>);
 };
+
+export interface MapMountedProps {
+  onMapMounted?: () => any;
+}
+export const onMapMounted = (callback: (...args: any) => any) => {
+  const mapRef = useMap();
+  watch(
+    () => mapRef.value,
+    (map) => {
+      if (!map) return;
+      Promise.resolve().then(callback);
+    }
+  );
+};

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/hooks/useOverlay.ts

@@ -1,6 +1,7 @@
 import { ShallowRef, watch } from "vue-demi";
 import type { RegisterOverlay } from "../types/interface";
 
+export type MROP = MapRegisterOverlayProps<AmapOverlay> | MapRegisterOverlayProps<GmapOverlay>;
 export interface MapRegisterOverlayProps<T> {
   registerOverlay?: RegisterOverlay<T>;
 }

package/src/hooks/useWalkingRoute.ts

@@ -19,7 +19,6 @@ export const useAWalkingRoute = (props: UseWalkingRouteProps) => {
           case "complete": {
             let path: Point[] = [];
             const walkingResult = result as AMap.WalkingResult;
-            debugger;
             if (!walkingResult.routes) {
               return;
             }

package/src/hooks-business/useBusinessMapRecomendPlace.ts

@@ -57,6 +57,7 @@ export const useBusinessMapRecomendPlace = (props: UseBusinessMapRecomendPlacePr
     centerSource.source = "api";
     centerPlace.lng = place.lng;
     centerPlace.lat = place.lat;
+    centerPlace.name = place.name;
   };
   if (defaultCenterPoint) {
     // default 主入口

package/src/hooks-business/useBusinessQuotingMap.ts

@@ -0,0 +1,11 @@
+import { useHeycarMap } from "../hooks/useHeycarMap";
+import { useMapFitView } from "../hooks/useMapFitView";
+
+export const useBusinessQuotingMap = () => {
+  const { setMap, mapRef } = useHeycarMap();
+  const { registerFitVeiw, setFitView } = useMapFitView({
+    mapRef,
+    padding: [25, 20, 15, 15],
+  });
+  return { setMap, registerFitVeiw, setFitView };
+};

package/src/hooks-business/useBusinessTaxiServiceMap.ts

@@ -0,0 +1,12 @@
+import { useHeycarMap } from "../hooks/useHeycarMap";
+import { useMapFitView } from "../hooks/useMapFitView";
+
+export const useBusinessTaxiServiceMap = () => {
+  const { mapRef, setMap } = useHeycarMap();
+  const { registerFitVeiw, setFitView } = useMapFitView({
+    mapRef,
+    autoFitTimeout: 5000,
+    padding: [25, 20, 15, 15],
+  });
+  return { setMap, registerFitVeiw, setFitView };
+};

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";
@@ -13,8 +14,9 @@ export { WalkingRoute } from "./business-components/WalkingRoute";
 export { WaveCircle } from "./business-components/WaveCircle";
 export * from "./components/MapProvider";
 export * from "./hooks-business/useBusinessMapAutoComplete";
-export * from "./hooks-business/useBusinessMapFitView";
 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";
 export { useHeycarMap } from "./hooks/useHeycarMap";

package/src/types/interface.ts

@@ -7,6 +7,7 @@ export type Place = {
   lat: number;
   name: string;
   cityName?: string;
+  cityId?: string;
 };
 
 export interface AutoCompletePlace extends Place {
@@ -27,6 +28,7 @@ export type City = {
 export interface RegisterOverlay<T> {
   add: (overlay: T) => void;
   remove: (overlay: T) => void;
+  setFitView: () => void;
 }
 
 export interface Route {