@heycar/heycars-map 0.2.5 → 0.2.6

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

@@ -3,17 +3,18 @@ import imgTaxicar from "../../assets/icons/svg/taxi-car.svg";
 import { AmapMarker } from "../../components/AmapMarker";
 import { GmapAdvancedMarkerView } from "../../components/GmapAdvancedMarkerView/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 { decodeAsterisk, vec2lnglat } from "../../utils/transform";
 import * as css from "./TaxiCar.css";
 
-export interface TaxiCarProps {
+export interface TaxiCarProps<T> extends MapRegisterOverlayProps<T> {
   position: [number, number];
   angle?: number;
   title?: string;
 }
-export const ATaxiCar = defineSetup(function ATaxiCar(props: TaxiCarProps) {
+export const ATaxiCar = defineSetup(function ATaxiCar(props: TaxiCarProps<AmapOverlay>) {
   const contentRef = computed(() => {
     const titleRow = !props.title
       ? ""
@@ -34,11 +35,16 @@ export const ATaxiCar = defineSetup(function ATaxiCar(props: TaxiCarProps) {
       `;
   });
   return () => (
-    <AmapMarker position={props.position} content={contentRef.value} anchor={"bottom-center"} />
+    <AmapMarker
+      position={props.position}
+      content={contentRef.value}
+      anchor={"bottom-center"}
+      registerOverlay={props.registerOverlay}
+    />
   );
 });
 
-export const GTaxiCar = defineSetup(function GTaxiCar(props: TaxiCarProps) {
+export const GTaxiCar = defineSetup(function GTaxiCar(props: TaxiCarProps<GmapOverlay>) {
   const contentRef = computed(() => {
     const titleRow = !props.title
       ? ""
@@ -63,12 +69,18 @@ export const GTaxiCar = defineSetup(function GTaxiCar(props: TaxiCarProps) {
   });
   return () => {
     return (
-      <GmapAdvancedMarkerView position={vec2lnglat(props.position)} content={contentRef.value} />
+      <GmapAdvancedMarkerView
+        position={vec2lnglat(props.position)}
+        content={contentRef.value}
+        registerOverlay={props.registerOverlay}
+      />
     );
   };
 });
 
-export const TaxiCar = defineSetup(function TaxiCar(props: TaxiCarProps) {
+export const TaxiCar = defineSetup(function TaxiCar(
+  props: TaxiCarProps<AmapOverlay> | TaxiCarProps<GmapOverlay>
+) {
   const payload = useMapSupplier();
   return () => {
     return createElement(payload.supplier === "gmap" ? GTaxiCar : ATaxiCar, {

package/src/components/Demo/DemoBusinessQuoting.tsx

@@ -0,0 +1,39 @@
+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, setFitView, 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}
+      onMapMounted={setFitView}
+    />
+  );
+});

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,9 @@ export const TaxiCarServicePage = defineSetup(function TaxiCarServicePage() {
       }
       getDriverPosition={getDriverPosition}
       interval={5000}
+      mapRef={setMap}
+      registerOverlay={registerFitVeiw}
+      onMapMounted={setFitView}
     />
   );
 });

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/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

@@ -13,8 +13,8 @@ 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/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 {