@heycar/heycars-map 0.1.3 → 0.1.5

package/dist/style.css

@@ -1 +1 @@
-._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}.rgf09w0{width:7.1045vw;height:10.93vw;display:flex}._1l6offo0{display:flex;margin-bottom:-8.135vw;width:16.27vw;height:16.27vw}.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{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}._1l6offo0{display:flex;margin-bottom:-8.135vw;width:16.27vw;height:16.27vw}.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{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}

package/dist/types/interface.d.ts

@@ -2,3 +2,8 @@
 import type { ShallowRef } from "vue-demi";
 export type Point = [number, number];
 export type MapShallowRef<M = AMap.Map | google.maps.Map> = ShallowRef<M | undefined>;
+export type Place = {
+    lng: number;
+    lat: number;
+    name: string;
+};

package/dist/utils/transform.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="google.maps" />
+import type { Place, Point } from "../types/interface";
 export declare const vec2lnglat: ([lng, lat]: [number, number]) => google.maps.LatLngLiteral;
 export interface AsteriskItem {
     type: "normal" | "emphasize";
@@ -7,3 +8,6 @@ export interface AsteriskItem {
 export declare const decodeAsterisk: (encodedValue: string) => AsteriskItem[];
 export declare const property2emitEventName: (propertyName: string) => string;
 export declare const property2mapEventName: (propertyName: string) => string;
+export type VectorMapForeign = "style_en" | "style_local" | "style_zh_cn";
+export declare const language2vectorMapForeign: (lang: "en" | "zh") => VectorMapForeign;
+export declare const place2point: (place: Place) => Point;

package/package.json

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

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

@@ -8,9 +8,11 @@ import { createElement, defineSetup } from "../../types/helper";
 import type { Point } from "../../types/interface";
 import { createDom } from "../../utils/dom";
 import { vec2lnglat } from "../../utils/transform";
+import { AAddressLocator, GAddressLocator } from "../AddressLocator";
 import * as css from "./AddressBox.css";
 
 interface AddressBoxProps {
+  type: "box" | "locator";
   position: Point;
   title: string;
   description?: string;
@@ -31,9 +33,12 @@ export const AAddressBox = defineSetup(function AAddressBox(props: AddressBoxPro
       </div>
     `
   );
-  return () => (
-    <AmapMarker position={props.position} content={contentRef.value} anchor={"bottom-center"} />
-  );
+  return () => {
+    if (props.type === "locator") return <AAddressLocator position={props.position} />;
+    return (
+      <AmapMarker position={props.position} content={contentRef.value} anchor={"bottom-center"} />
+    );
+  };
 });
 
 export const GAddressBox = defineSetup(function GAddressBox(props: AddressBoxProps) {
@@ -55,6 +60,7 @@ export const GAddressBox = defineSetup(function GAddressBox(props: AddressBoxPro
     )
   );
   return () => {
+    if (props.type === "locator") return <GAddressLocator position={props.position} />;
     return (
       <GmapAdvancedMarkerView position={vec2lnglat(props.position)} content={contentRef.value} />
     );

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

@@ -124,6 +124,7 @@ export const GDrivingLine = defineSetup(function GDrivingLine(props: DrivingLine
 export const DrivingLine = defineSetup(function DrivingLine(props: DrivingLineProps) {
   const payload = useMapSupplier();
   return () => {
+    if (!props.path.length) return null;
     return createElement(payload.supplier === "gmap" ? GDrivingLine : ADrivingLine, {
       attrs: props,
     });

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

@@ -1,4 +1,4 @@
-import type { Ref, ShallowRef } from "vue-demi";
+import { reactive, VNodeData } from "vue-demi";
 import { useAmap } from "../../components/Amap/useAmap";
 import { useGmap } from "../../components/Gmap/useGmap";
 import { useMapSupplier } from "../../components/MapProvider/useMapSupplier";
@@ -11,33 +11,38 @@ import { useAmapAngle, useGmapAngle } from "../../hooks/useMapAngle";
 import { createElement, defineSetup, VNodeChild } from "../../types/helper";
 import type { Point } from "../../types/interface";
 
+export type DrivingRouteRenderProps = {
+  path: Point[];
+  angle?: number;
+};
 export interface DrivingRouteProps extends UseDrivingRouteProps {
-  render?: (props: {
-    pathRef: ShallowRef<Point[]>;
-    angleRef: Ref<number | undefined>;
-  }) => VNodeChild;
+  render?: (props: DrivingRouteRenderProps) => VNodeChild;
 }
 export const ADrivingRoute = defineSetup(function DrivingRoute(
   props: DrivingRouteProps,
   { slots }
 ) {
-  const mapRef = useAmap();
-  const pathRef = useADrivingRoute(props);
-  const angleRef = useAmapAngle({ pathRef, mapRef });
-  return () => <div>{slots.render?.({ pathRef, angleRef })}</div>;
+  const map = useAmap();
+  const path = useADrivingRoute(props);
+  const angle = useAmapAngle(reactive({ path, map }));
+  return () => <div>{slots.render?.(reactive({ path, angle }))}</div>;
 });
 
 export const GDrivingRoute = defineSetup(function DrivingRoute(
   props: DrivingRouteProps,
   { slots }
 ) {
-  const mapRef = useGmap();
-  const pathRef = useGDrivingRoute(props);
-  const angleRef = useGmapAngle({ pathRef, mapRef });
-  return () => <div>{slots.render?.({ pathRef, angleRef })}</div>;
+  const map = useGmap();
+  const path = useGDrivingRoute(props);
+  const angle = useGmapAngle(reactive({ path, map }));
+  return () => <div>{slots.render?.(reactive({ path, angle }))}</div>;
 });
 
-export const DrivingRoute = defineSetup(function DrivingRoute(props: DrivingRouteProps) {
+export const DrivingRoute = defineSetup(function DrivingRoute(props: DrivingRouteProps, { slots }) {
   const { supplier } = useMapSupplier();
-  return () => createElement(supplier === "gmap" ? GDrivingRoute : ADrivingRoute, { attrs: props });
+  return () =>
+    createElement(supplier === "gmap" ? GDrivingRoute : ADrivingRoute, {
+      attrs: props,
+      scopedSlots: slots as VNodeData["scopedSlots"],
+    });
 });

package/src/components/Amap/Amap.ts

@@ -7,17 +7,25 @@ import {
   watchNoneImmediatePostEffectForMapProperty,
   watchPostEffectForAMapEvent,
 } from "../../utils/compare";
+import type { VectorMapForeign } from "../../utils/transform";
 import * as css from "./Amap.css";
 import { provideAmap } from "./useAmap";
 
-export interface AmapProps extends AMap.MapOptions {
+export interface AmapProps extends Omit<AMap.MapOptions, "vectorMapForeign"> {
+  vectorMapForeign?: VectorMapForeign;
   mapRef?: SetMap<AMap.Map>;
   onDragStart?: MapEventHandler<AMap.Map>;
   onDragEnd?: MapEventHandler<AMap.Map>;
 }
 
 export const Amap = defineSetup(function Amap(props: AmapProps, { slots, emit }) {
-  const { onDragStart, onDragEnd, mapRef: setMap, ...defaultOptions } = props;
+  const {
+    onDragStart,
+    onDragEnd,
+    mapRef: setMap,
+    vectorMapForeign = "style_zh_cn",
+    ...defaultOptions
+  } = props;
   const statusOptions = computed(() => {
     return {
       dragEnable: !!props.dragEnable,
@@ -35,7 +43,11 @@ export const Amap = defineSetup(function Amap(props: AmapProps, { slots, emit })
   watchPostEffect(() => {
     // todo 这里是否会因为 mapRef 的赋值导致不停运行？
     if (mapRef.value || !elementRef.value) return;
-    const map = new AMap.Map(elementRef.value, { ...defaultOptions });
+    const map = new AMap.Map(elementRef.value, {
+      ...defaultOptions,
+      vectorMapForeign: vectorMapForeign as any,
+      mapStyle: "amap://styles/95498a904992a4c0b866a3e4d7729682",
+    });
     mapRef.value = map;
     setMap?.(map);
   });

package/src/components/AmapLoader/AmapLoader.ts

@@ -29,7 +29,7 @@ export const AmapLoader = defineSetup(function AmapLoader(props: AmapLoaderProps
   const optionsRef = computed(() => {
     const { onChange, loading, fallback, apiKey, apiSecret, apiServiceHost, version, ...options } =
       props;
-    return { ...options, key: apiKey, version: version ?? "2.0" };
+    return { ...options, key: apiKey, version: version ?? "2.0.5.16" };
   });
   watchPostEffectForDeepOption(
     () => optionsRef.value,

package/src/components/Demo/HeycarDemo.tsx

@@ -1,8 +1,12 @@
+import { AddressBox } from "../../business-components/AddressBox";
 import { DrivingLine } from "../../business-components/DrivingLine";
 import { DrivingRoute } from "../../business-components/DrivingRoute";
 import { TaxiCar } from "../../business-components/TaxiCar";
+import {
+  useBusinessMapRecomendPlace,
+  UseBusinessMapRecomendPlaceProps,
+} from "../../hooks-business/useBusinessMapRecomendPlace";
 import { useHeycarMap } from "../../hooks/useHeycarMap";
-import { useMapDrag } from "../../hooks/useMapDrag";
 import { defineSetup } from "../../types/helper";
 import { HeycarMap, MapProvider } from "../MapProvider/MapProvider";
 import * as css from "./Demo.css";
@@ -28,22 +32,42 @@ export const HeycarDemo = defineSetup(function HeycarDemo() {
 
 export const SomePage = defineSetup(function Hello() {
   const { mapRef, setMap, panTo } = useHeycarMap();
-  const { centerPlace, isDragging } = useMapDrag(mapRef);
+  const getRecomendPlace: UseBusinessMapRecomendPlaceProps["getRecomendPlace"] = async (place) => {
+    const { lat, lng } = place;
+    console.log("typeof lat = ", typeof lat);
+    return [{ lat: lat + 0.0001, lng: lng + 0.0001, name: "place name 1" }];
+  };
+  const { centerPlace, centerPoint, isDragging, isGeoLoading, geoError } =
+    useBusinessMapRecomendPlace({
+      mapRef,
+      recomendPlaceGeoLimit: 300,
+      recomendPlaceDragLimit: 30,
+      getRecomendPlace,
+      onChangeGeoLocation: (v) => console.log("onChangeGeoLocation: ", v),
+      onChangePlace: (v) => console.log("onChangePlace: ", v),
+      onChangeRecomandPlace: (v) => console.log("onChangeRecomandPlace: ", v),
+    });
   (window as any).panTo = panTo;
   return () => {
     return (
       <div>
+        isGeoLoading: {`${isGeoLoading.value}`} <br />
         isDragging: {`${isDragging.value}`} <br />
-        {centerPlace.lng} | {centerPlace.lat} | {centerPlace.name}
+        {centerPlace.lng} | {centerPlace.lat} | {centerPlace.name} <br />
         <HeycarMap
           class={css.demo}
           fallback={() => <div>error</div>}
           loading={() => <div>loading</div>}
-          center={[121, 31]}
+          center={[centerPlace.lng, centerPlace.lat]}
           zoom={15}
           mapRef={setMap}
         >
-          {/* <AddressBox position={[0, 0]} title={"Martyrs Lawn"} description={"您将在此处上车"} /> */}
+          <AddressBox
+            type="box"
+            position={centerPoint.value}
+            title={"Martyrs Lawn"}
+            description={"您将在此处上车"}
+          />
           {/* <TaxiCar position={[121, 31]} angle={0} /> */}
           {/* <PickupPoints
             positions={[
@@ -55,9 +79,9 @@ export const SomePage = defineSetup(function Hello() {
           <DrivingRoute
             from={[121, 31]}
             to={[121.6, 31.3]}
-            render={({ pathRef, angleRef }) => [
-              pathRef.value.length > 0 && <DrivingLine path={pathRef.value} />,
-              <TaxiCar position={[121, 31]} angle={angleRef.value} />,
+            render={({ path, angle }) => [
+              <DrivingLine path={path} />,
+              <TaxiCar position={[121, 31]} angle={angle} />,
             ]}
           />
         </HeycarMap>

package/src/components/MapProvider/MapProvider.tsx

@@ -1,6 +1,6 @@
 import type { SetMap } from "../../hooks/useHeycarMap";
 import { defineLagecySetup } from "../../types/helper";
-import { vec2lnglat } from "../../utils/transform";
+import { language2vectorMapForeign, vec2lnglat } from "../../utils/transform";
 import { Amap, AmapProps } from "../Amap";
 import { AmapLoader } from "../AmapLoader";
 import { Gmap, GmapProps } from "../Gmap";
@@ -19,6 +19,7 @@ export const MapProvider = defineLagecySetup(function MapProvider(
 export interface HeycarMapProps
   extends Pick<GmapLoaderProps, "fallback" | "loading">,
     Pick<AmapProps, "center" | "zoom"> {
+  language?: "en" | "zh";
   mapRef?: SetMap<AMap.Map> | SetMap<google.maps.Map>;
   onDragEnd?: (value: [number, number]) => any;
 }
@@ -37,13 +38,15 @@ export const HeycarMap = defineLagecySetup(function HeycarMap(
   };
   return () => {
     const { gmapKey, amapKey, amapSecret, amapServiceHost, supplier, gmapId } = payload;
-    const { mapRef: setMap, fallback, loading, center, zoom } = props;
+    const { mapRef: setMap, center, zoom, language = "zh" } = props;
+    const { fallback, loading } = slots;
     const children = slots.default?.();
     switch (supplier) {
       case "gmap":
         return (
           <GmapLoader
             apiKey={gmapKey}
+            language={language}
             version="beta"
             libraries={["marker", "places", "geometry"]}
             loading={loading}
@@ -78,6 +81,7 @@ export const HeycarMap = defineLagecySetup(function HeycarMap(
           >
             <Amap
               mapRef={setMap as SetMap<AMap.Map>}
+              vectorMapForeign={language2vectorMapForeign(language)}
               center={center}
               zoom={zoom}
               onDragEnd={amapDebounceEmit}

package/src/hooks/useDrivingRoute.ts

@@ -1,6 +1,7 @@
-import { ShallowRef, shallowRef, watch } from "vue-demi";
+import { ShallowRef, shallowRef } from "vue-demi";
 import { useMapSupplier } from "../components/MapProvider/useMapSupplier";
 import type { Point } from "../types/interface";
+import { watchPostEffectForDeepOption } from "../utils/compare";
 
 export interface UseDrivingRouteProps {
   from: Point;
@@ -10,15 +11,14 @@ export interface UseDrivingRouteProps {
 export const useADrivingRoute = (props: UseDrivingRouteProps) => {
   const pathRef = shallowRef<Point[]>([]);
   const amapDriving = new AMap.Driving({});
-  watch(
-    [() => props.from, () => props.to],
-    ([from, to]) => {
+  watchPostEffectForDeepOption(
+    () => ({ ...props }),
+    ({ from, to }) => {
       amapDriving.search(
         AMap.LngLat.from(from),
         AMap.LngLat.from(to),
         { waypoints: [] },
         (status, result) => {
-          console.log("result = ", result);
           switch (status) {
             case "complete": {
               let path: Point[] = [];
@@ -40,8 +40,7 @@ export const useADrivingRoute = (props: UseDrivingRouteProps) => {
           }
         }
       );
-    },
-    { immediate: true }
+    }
   );
   return pathRef;
 };
@@ -49,22 +48,25 @@ export const useADrivingRoute = (props: UseDrivingRouteProps) => {
 export const useGDrivingRoute = (props: UseDrivingRouteProps) => {
   const pathRef = shallowRef<Point[]>([]);
   const gmapDirectionsService = new google.maps.DirectionsService();
-  watch([() => props.from, () => props.to], ([from, to]) => {
-    gmapDirectionsService
-      .route({
-        origin: { lng: from[0], lat: from[1] },
-        destination: { lng: to[0], lat: to[1] },
-        travelMode: google.maps.TravelMode.WALKING,
-      })
-      .then((result) => {
-        let path: Point[] = [];
-        result.routes.map((route) => {
-          const stepPath = route.overview_path.map<Point>((item) => [item.lng(), item.lat()]);
-          path = path.concat(stepPath);
+  watchPostEffectForDeepOption(
+    () => ({ ...props }),
+    ({ from, to }) => {
+      gmapDirectionsService
+        .route({
+          origin: { lng: from[0], lat: from[1] },
+          destination: { lng: to[0], lat: to[1] },
+          travelMode: google.maps.TravelMode.WALKING,
+        })
+        .then((result) => {
+          let path: Point[] = [];
+          result.routes.map((route) => {
+            const stepPath = route.overview_path.map<Point>((item) => [item.lng(), item.lat()]);
+            path = path.concat(stepPath);
+          });
+          pathRef.value = path;
         });
-        pathRef.value = path;
-      });
-  });
+    }
+  );
   return pathRef;
 };
 

package/src/hooks/useGeoLocation.ts

@@ -0,0 +1,44 @@
+import { ref, watchEffect } from "vue-demi";
+import type { MapShallowRef, Point } from "../types/interface";
+
+export interface UseGeoLocationProps {
+  mapRef: MapShallowRef;
+  onChange?: (value: { position: Point; coordinate: GeolocationCoordinates }) => any;
+}
+export const useGeoLocation = (props: UseGeoLocationProps) => {
+  const { mapRef, onChange } = props;
+  const loading = ref(false);
+  const errorRef = ref<GeolocationPositionError>();
+  const coordinateRef = ref<GeolocationCoordinates>({
+    accuracy: 0,
+    altitude: 0,
+    altitudeAccuracy: 0,
+    heading: 0,
+    latitude: 0,
+    longitude: 0,
+    speed: 0,
+  });
+  const positionRef = ref<Point>([coordinateRef.value.longitude, coordinateRef.value.latitude]);
+  watchEffect(() => {
+    mapRef.value;
+    loading.value = true;
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        loading.value = false;
+        const coordinate = position.coords;
+        const point: Point = [position.coords.longitude, position.coords.latitude];
+        coordinateRef.value = coordinate;
+        positionRef.value = point;
+        onChange?.({ position: point, coordinate });
+      },
+      (error) => {
+        loading.value = false;
+        errorRef.value = error;
+        console.log("errorRef = ", errorRef);
+      },
+
+      { timeout: 5000 }
+    );
+  });
+  return { errorRef, positionRef, coordinateRef, loading };
+};

package/src/hooks/useMapAngle.ts

@@ -1,35 +1,34 @@
-import { computed, ShallowRef } from "vue";
+import { computed } from "vue-demi";
 import { useMapSupplier } from "../components/MapProvider/useMapSupplier";
-import type { MapShallowRef, Point } from "../types/interface";
+import type { Point } from "../types/interface";
 import { vec2lnglat } from "../utils/transform";
 
 const amapComputeHeading = (from: Point, to: Point, map?: AMap.Map) => {
   if (!map) return 0;
   const { x: xFrom, y: yFrom } = map.lngLatToContainer(from);
   const { x: xTo, y: yTo } = map.lngLatToContainer(to);
-  console.log("yTo - yFrom, xTo - xFrom = ", yTo - yFrom, xTo - xFrom);
   const theta = Math.atan2(yFrom - yTo, xTo - xFrom);
   return ((Math.PI / 2 - theta) / Math.PI) * 180;
 };
 
-export interface UseMapAngleProps<T = AMap.Map | google.maps.Map> {
-  pathRef: ShallowRef<Point[]>;
-  mapRef?: MapShallowRef<T>;
-}
+export type UseMapAngleProps<M = AMap.Map | google.maps.Map> = {
+  path: Point[];
+  map?: M;
+};
 
 export const useAmapAngle = (props: UseMapAngleProps<AMap.Map>) => {
   return computed(() => {
-    const { mapRef, pathRef } = props;
-    const [from, to] = pathRef.value;
-    if (!from || !to || !mapRef) return undefined;
-    return amapComputeHeading(from, to, mapRef.value);
+    const { map, path } = props;
+    const [from, to] = path;
+    if (!from || !to || !map) return undefined;
+    return amapComputeHeading(from, to, map);
   });
 };
 
 export const useGmapAngle = (props: UseMapAngleProps<google.maps.Map>) => {
   return computed(() => {
-    const { pathRef } = props;
-    const [from, to] = pathRef.value;
+    const { path } = props;
+    const [from, to] = path;
     if (!from || !to) return undefined;
     return google.maps.geometry.spherical.computeHeading(vec2lnglat(from), vec2lnglat(to));
   });

package/src/hooks/useMapDrag.ts

@@ -1,81 +1,67 @@
-import { reactive, ref, type ShallowRef } from "vue-demi";
+import { ref, type ShallowRef } from "vue-demi";
 import type { AmapProps } from "../components/Amap";
 import type { GmapProps } from "../components/Gmap";
 import { useMapSupplier } from "../components/MapProvider/useMapSupplier";
-import { LANGUAGE, SetupContextEmitHandler } from "../types/helper";
-import type { MapShallowRef } from "../types/interface";
+import type { SetupContextEmitHandler } from "../types/helper";
+import type { Point } from "../types/interface";
 import { watchPostEffectForAMapEvent, watchPostEffectForGMapEvent } from "../utils/compare";
 
 export const ON_CHANGE_CENTER_INTERVAL = 200;
-export interface UseMapCenterPlace {
-  lng: number;
-  lat: number;
-  name: string;
+
+export interface UseMapDragProps<M = AMap.Map | google.maps.Map> {
+  mapRef: ShallowRef<M | undefined>;
+  onChange?: (value: Point) => any;
 }
-export const useAmapDrag = (amapRef: ShallowRef<AMap.Map | undefined>) => {
-  const centerPlace = reactive<UseMapCenterPlace>({ lng: 0, lat: 0, name: "" });
+export const useAmapDrag = (props: UseMapDragProps<AMap.Map>) => {
+  const { mapRef, onChange } = props;
+  const centerRef = ref<Point>([0, 0]);
   const isDragging = ref(false);
   const emitDragStart: SetupContextEmitHandler<Pick<AmapProps, "onDragStart">> = () => {
     Promise.resolve().then(() => (isDragging.value = true));
   };
   const emitDragEnd: SetupContextEmitHandler<Pick<AmapProps, "onDragEnd">> = (_, { target }) => {
     isDragging.value = false;
-    const center = target.getCenter();
-    centerPlace.lng = center.lng;
-    centerPlace.lat = center.lat;
-    const geocoder = new AMap.Geocoder({ lang: LANGUAGE });
-    geocoder.getAddress(center, (status, result) => {
-      switch (status) {
-        case "complete":
-          centerPlace.name = (result as AMap.ReGeocoderResult).regeocode.formattedAddress;
-          return;
-        case "no_data":
-          return;
-        case "error":
-          throw result;
-      }
-    });
+    const { lng, lat } = target.getCenter();
+    centerRef.value = [lng, lat];
+    onChange?.([lng, lat]);
   };
-  watchPostEffectForAMapEvent(amapRef, {} as Pick<AmapProps, "onDragStart">, emitDragStart, [
+  watchPostEffectForAMapEvent(mapRef, {} as Pick<AmapProps, "onDragStart">, emitDragStart, [
     "onDragStart",
   ]);
-  watchPostEffectForAMapEvent(amapRef, {} as Pick<AmapProps, "onDragEnd">, emitDragEnd, [
+  watchPostEffectForAMapEvent(mapRef, {} as Pick<AmapProps, "onDragEnd">, emitDragEnd, [
     "onDragEnd",
   ]);
-  return { centerPlace, isDragging };
+  return { centerRef, isDragging };
 };
 
-export const useGmapDrag = (gmapRef: ShallowRef<google.maps.Map | undefined>) => {
-  const centerPlace = reactive<UseMapCenterPlace>({ lng: 0, lat: 0, name: "" });
+export const useGmapDrag = (props: UseMapDragProps<google.maps.Map>) => {
+  const { mapRef, onChange } = props;
+  const centerRef = ref<Point>([0, 0]);
   const isDragging = ref(false);
   const emitDragStart: SetupContextEmitHandler<Pick<GmapProps, "onDragStart">> = () => {
     Promise.resolve().then(() => (isDragging.value = true));
   };
   const emitDragEnd: SetupContextEmitHandler<Pick<GmapProps, "onDragEnd">> = async () => {
     isDragging.value = false;
-    const center = gmapRef.value?.getCenter();
-    if (!center) return;
-    const lng = center?.lng();
-    const lat = center?.lat();
-    if (lng) centerPlace.lng = lng;
-    if (lat) centerPlace.lat = lat;
-    const geocoder = new google.maps.Geocoder();
-    const { results } = await geocoder.geocode({ language: LANGUAGE, location: center });
-    centerPlace.name = results[0].formatted_address;
+    const center = mapRef.value?.getCenter();
+    const lng = center?.lng() as number;
+    const lat = center?.lat() as number;
+    centerRef.value = [lng, lat];
+    onChange?.([lng, lat]);
   };
-  watchPostEffectForGMapEvent(gmapRef!, {} as Pick<GmapProps, "onDragStart">, emitDragStart, [
+  watchPostEffectForGMapEvent(mapRef!, {} as Pick<GmapProps, "onDragStart">, emitDragStart, [
     "onDragStart",
   ]);
-  watchPostEffectForGMapEvent(gmapRef!, {} as Pick<GmapProps, "onDragEnd">, emitDragEnd, [
+  watchPostEffectForGMapEvent(mapRef!, {} as Pick<GmapProps, "onDragEnd">, emitDragEnd, [
     "onDragEnd",
   ]);
-  return { centerPlace, isDragging };
+  return { centerRef, isDragging };
 };
 
-export const useMapDrag = (mapRef: MapShallowRef) => {
+export const useMapDrag = (props: UseMapDragProps) => {
   const { supplier } = useMapSupplier();
   // todo: 这里违反 react hook 规则，但 react 版本应该可以同时调用 useAmap 和 useGmap
   return supplier === "gmap"
-    ? useGmapDrag(mapRef as ShallowRef<google.maps.Map | undefined>)
-    : useAmapDrag(mapRef as ShallowRef<AMap.Map | undefined>);
+    ? useGmapDrag(props as UseMapDragProps<google.maps.Map>)
+    : useAmapDrag(props as UseMapDragProps<AMap.Map>);
 };