@heycar/heycars-map 0.2.7 → 0.2.9

package/dist/types/interface.d.ts

@@ -32,4 +32,4 @@ export interface Route {
     distance: number;
     duration: number;
 }
-export type DriverStatus = "dispatching" | "book-dispatching" | "dispatched" | "driverStartService" | "book-driverStartService" | "book-dispatched" | "driverArrived" | "inService" | "canceled" | "endService";
+export type DriverStatus = "dispatching" | "book-dispatching" | "dispatched" | "driverStartService" | "book-driverStartService" | "book-dispatched" | "driverArrived" | "inService" | "canceled" | "endService" | "completed" | "canceling" | "banlanceRefund" | "waitBanlanceRefund" | "rechargePayed" | "waitRechargePay" | "payed" | "waitpay" | "refund" | "confirmed";

package/package.json

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

package/src/App.tsx

@@ -1,13 +1,27 @@
 import { defineComponent } from "vue-demi";
-import { DemoBusinessTaxiService } from "./components/Demo/DemoBusinessTaxiService";
+import { MapProvider } from "./components/MapProvider";
+import { DemoBusinessRecomendPlace } from "./Demo/DemoBusinessRecomendPlace";
+
+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 App = defineComponent({
   setup() {
-    // return () => <Hello class={"helloclass2"} qyc={2} style={{ color: "red" }} />;
-    // return () => <ABusinessDemo />;
-    // return () => <SearchDemo />;
-    return () => <DemoBusinessTaxiService />;
-    // return () => <DemoBusinessQuoting />;
-    // return () => <HeycarDemo />;
+    return () => (
+      <MapProvider
+        amapKey={amapApiKey}
+        amapSecret={amapApiSecret}
+        gmapId={gmapId}
+        gmapKey={gmapApiKey}
+        supplier={"amap"}
+      >
+        <DemoBusinessRecomendPlace />
+        {/* <DemoBusinessQuoting /> */}
+        {/* <DemoBusinessTaxiService /> */}
+        {/* <DemoBusinessTaxiEnd /> */}
+      </MapProvider>
+    );
   },
 });

package/src/{components/Demo → Demo/CityBound}/SearchDemo.tsx

@@ -1,9 +1,9 @@
 import { watchPostEffect } from "vue-demi";
+import { HeycarMap, MapProvider } from "../../components/MapProvider/MapProvider";
 import { useHeycarMap } from "../../hooks/useHeycarMap";
 import { defineSetup } from "../../types/helper";
-import { HeycarMap, MapProvider } from "../MapProvider/MapProvider";
+import * as css from "../Demo.css";
 import { citiesWithCountry } from "./country";
-import * as css from "./Demo.css";
 import { searchResult } from "./searchResult";
 
 const gmapApiKey = import.meta.env.VITE_GMAP_API_KEY;

package/src/{components/Demo → Demo}/Demo.tsx

@@ -1,17 +1,17 @@
 import { ref } from "vue-demi";
-import { defineSetup } from "../../types/helper";
-import { Amap } from "../Amap";
-import { AmapInfoWindow } from "../AmapInfoWindow";
-import { AmapLoader } from "../AmapLoader";
-import { AmapMarker } from "../AmapMarker";
-import { AmapPolygon } from "../AmapPolygon";
-import { AmapPolyline } from "../AmapPolyline";
-import { Gmap } from "../Gmap";
-import { GmapInfoWindow } from "../GmapInfoWindow";
-import { GmapLoader } from "../GmapLoader";
-import { GmapMarker } from "../GmapMarker";
-import { GmapPolygon } from "../GmapPolygon";
-import { GmapPolyline } from "../GmapPolyline";
+import { Amap } from "../components/Amap";
+import { AmapInfoWindow } from "../components/AmapInfoWindow";
+import { AmapLoader } from "../components/AmapLoader";
+import { AmapMarker } from "../components/AmapMarker";
+import { AmapPolygon } from "../components/AmapPolygon";
+import { AmapPolyline } from "../components/AmapPolyline";
+import { Gmap } from "../components/Gmap";
+import { GmapInfoWindow } from "../components/GmapInfoWindow";
+import { GmapLoader } from "../components/GmapLoader";
+import { GmapMarker } from "../components/GmapMarker";
+import { GmapPolygon } from "../components/GmapPolygon";
+import { GmapPolyline } from "../components/GmapPolyline";
+import { defineSetup } from "../types/helper";
 
 import * as css from "./Demo.css";
 const gmapApiKey = import.meta.env.VITE_GMAP_API_KEY;

package/src/Demo/DemoBusinessQuoting.tsx

@@ -0,0 +1,18 @@
+import { BusinessQuotingMap } from "../business-components/BusinessQuotingMap";
+import { useBusinessQuotingMap } from "../hooks-business/useBusinessQuotingMap";
+import { defineSetup } from "../types/helper";
+import * as css from "./Demo.css";
+
+export const DemoBusinessQuoting = defineSetup(function DemoBusinessQuoting() {
+  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/Demo/DemoBusinessRecomendPlace.tsx

@@ -0,0 +1,66 @@
+import { computed } from "vue-demi";
+import {
+  BusinessRecomendPlaceMap,
+  BusinessRecomendPlaceMapProps,
+} from "../business-components/BusinessRecomendPlaceMap";
+import { useBusinessMapAutoComplete } from "../hooks-business/useBusinessMapAutoComplete";
+import { useBusinessRecomendPlaceMap } from "../hooks-business/useBusinessRecomendPlaceMap";
+import { defineSetup } from "../types/helper";
+import * as css from "./Demo.css";
+
+const SomeAutoComplete = defineSetup(function SomeAutoComplete(props: { cityName: string }) {
+  const { autoCompletePlaces, handleKeywordInput, setCity } = useBusinessMapAutoComplete({
+    cityNameRef: computed(() => props.cityName),
+  });
+  (window as any).setCity = setCity;
+  return () => {
+    const list = autoCompletePlaces.value.map((place) => [
+      <input onInput={handleKeywordInput} />,
+      <div>
+        {place.lng} | {place.lat} | {place.name} | {place.description}
+      </div>,
+    ]);
+    return <div>{list}</div>;
+  };
+});
+
+export const DemoBusinessRecomendPlace = defineSetup(function DemoBusinessRecomendPlace() {
+  const getRecomendPlace: BusinessRecomendPlaceMapProps["getRecomendPlace"] = async (
+    place,
+    context
+  ) => {
+    const { lat, lng } = place;
+    console.log("getRecomendPlace context?.source = ", context?.source);
+    return [
+      { lat: lat + 0.0001, lng: lng + 0.0001, name: "place name 1" },
+      { lat: lat + 0.002, lng: lng + 0.002, name: "place name 2" },
+    ];
+  };
+  const { centerPlace, placeCandidates, setCenterPlaceByRecomand, mapContext, apiMapDistance } =
+    useBusinessRecomendPlaceMap();
+  setTimeout(() => {
+    const distance = apiMapDistance([0, 0], [1, 1]);
+    console.log("distance = ", distance);
+  }, 2000);
+  (window as any).setCenterPlaceByRecomand = setCenterPlaceByRecomand;
+  return () => {
+    return (
+      <div>
+        placeCandidates: {placeCandidates} <br />
+        centerPlace: {centerPlace.lng} | {centerPlace.lat} | {centerPlace.name} |{" "}
+        {centerPlace.cityName} <br />
+        <SomeAutoComplete cityName="上海市"></SomeAutoComplete>
+        <BusinessRecomendPlaceMap
+          class={css.demo}
+          unavailableTitle={"当前区域暂未开通服务"}
+          noRecomendDescription={"附近无推荐上车地点"}
+          recomendDescription={"最佳上车地点"}
+          geoDefaultPosition={[121, 31]}
+          getRecomendPlace={getRecomendPlace}
+          mapContext={mapContext}
+          onGeoError={(e) => console.log("onGeoError e = ", e)}
+        />
+      </div>
+    );
+  };
+});

package/src/Demo/DemoBusinessTaxiEnd.tsx

@@ -0,0 +1,13 @@
+import { BusinessTaxiEndMap } from "../business-components/BusinessTaxiEndMap";
+import { defineSetup } from "../types/helper";
+import * as css from "./Demo.css";
+
+export const DemoBusinessTaxiEnd = defineSetup(function DemoBusinessTaxiEnd() {
+  return () => (
+    <BusinessTaxiEndMap
+      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" }}
+    />
+  );
+});

package/src/{components/Demo → Demo}/DemoBusinessTaxiService.tsx

@@ -1,38 +1,18 @@
-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";
+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 * 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 DemoBusinessTaxiService = defineSetup(function DemoBusinessTaxiService() {
-  return () => (
-    <MapProvider
-      amapKey={amapApiKey}
-      amapSecret={amapApiSecret}
-      gmapId={gmapId}
-      gmapKey={gmapApiKey}
-      supplier={"amap"}
-    >
-      <TaxiCarServicePage />
-    </MapProvider>
-  );
-});
-
-export const TaxiCarServicePage = defineSetup(function TaxiCarServicePage() {
-  const { setMap, setFitView, registerFitVeiw } = useBusinessTaxiServiceMap();
+  const { setMap, 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="book-driverStartService"
+      driverStatus="completed"
       bookDispatchingTitle="2月14日 11:00 用车"
       bookDispatchedTitle="司机位置将在临近出发时间展示"
       dispatchingTitle="正在为您搜索附近司机"

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

@@ -0,0 +1,8 @@
+import { defineSetup } from "../../types/helper";
+import type { AddressBoxProps } from "../AddressBox";
+
+export const AbsoluteAddressBox = defineSetup((props: AddressBoxProps) => {
+  return () => {
+    return <div></div>;
+  };
+});

package/src/business-components/AbsoluteAddressBox/index.ts

@@ -0,0 +1 @@
+export * from "./AbsoluteAddressBox";

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

@@ -11,7 +11,7 @@ import { vec2lnglat } from "../../utils/transform";
 import { AAddressLocator, GAddressLocator } from "../AddressLocator";
 import * as css from "./AddressBox.css";
 
-interface AddressBoxProps {
+export interface AddressBoxProps {
   type: "box" | "locator";
   position: Point;
   title: string;

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

@@ -0,0 +1,166 @@
+import { computed, reactive, watchEffect } from "vue";
+import { HeycarMap, HeycarMapProps } from "../../components/MapProvider";
+import type { BusinessRecomendPlaceContext } from "../../hooks-business/useBusinessRecomendPlaceMap";
+import { useGeoLocation, UseGeoLocationProps } from "../../hooks/useGeoLocation";
+import { useHeycarMap } from "../../hooks/useHeycarMap";
+import { useMapDrag, UseMapDragProps } from "../../hooks/useMapDrag";
+import type { UseMapPlaceProps } from "../../hooks/useMapPlace";
+import { useMapRecomendPlace, UseMapRecomendPlaceProps } from "../../hooks/useMapRecomendPlace";
+import { useMapSupplier } from "../../hooks/useMapSupplier";
+import { defineLagecySetup } from "../../types/helper";
+import type { Place, Point } from "../../types/interface";
+import { AddressBox } from "../AddressBox";
+import { PassengerCircle } from "../PassengerCircle";
+import { PickupPoints } from "../PickupPoints";
+
+const RECOMMEND_PLACE_LIMIT = 30;
+
+export interface CenterPlaceSource {
+  source: "default" | "geo" | "drag" | "recomend" | "api";
+}
+export interface BusinessRecomendPlaceMapProps
+  extends Omit<HeycarMapProps, "center" | "zoom" | "mapRef">,
+    Pick<UseMapRecomendPlaceProps<CenterPlaceSource>, "getRecomendPlace"> {
+  unavailableTitle: string;
+  recomendDescription: string;
+  noRecomendDescription: string;
+  geoDefaultPosition?: Point;
+  mapContext: BusinessRecomendPlaceContext;
+  onLoadGeoLocation?: UseGeoLocationProps["onLoad"];
+  onLoadDefaultGeoLocation?: UseGeoLocationProps["onLoadDefault"];
+  onChangeByDrag?: UseMapDragProps["onChange"];
+  onChangeGeoLocation?: UseGeoLocationProps["onChange"];
+  onChangePlace?: UseMapPlaceProps["onChange"];
+  onChangeRecomandPlace?: UseMapRecomendPlaceProps["onChange"];
+  onGeoError?: UseGeoLocationProps["onError"];
+}
+export const BusinessRecomendPlaceMap = defineLagecySetup(
+  (props: BusinessRecomendPlaceMapProps, { emit }) => {
+    const { geoDefaultPosition, getRecomendPlace, mapContext } = props;
+    const { mapRef, setMap, panTo } = useHeycarMap();
+    const { readyPromise } = useMapSupplier();
+    const centerPlace = reactive<Place>({
+      lng: geoDefaultPosition?.[0] ?? 0,
+      lat: geoDefaultPosition?.[1] ?? 0,
+      name: "",
+      cityName: undefined,
+    });
+    const centerPoint = computed<Point>(() => [centerPlace.lng, centerPlace.lat]);
+    const centerSource: CenterPlaceSource = { source: "geo" };
+    const setCenterPlaceByRecomand = (point: Point) => {
+      centerSource.source = "api";
+      centerPlace.lng = point[0];
+      centerPlace.lat = point[1];
+      updatePlace();
+    };
+    mapContext.setCenterPlaceByRecomand = setCenterPlaceByRecomand;
+    mapContext.panTo = panTo;
+    const setCenterByPlace = (place: Place) => {
+      centerSource.source = "api";
+      centerPlace.lng = place.lng;
+      centerPlace.lat = place.lat;
+      centerPlace.name = place.name;
+    };
+
+    const { geoPosition } = useGeoLocation({
+      geoDefaultPosition,
+      onLoad: async (value) => {
+        // geo 主入口
+        await readyPromise;
+        centerSource.source = "geo";
+        centerPlace.lng = value.position[0];
+        centerPlace.lat = value.position[1];
+        updatePlace();
+        emit("loadGeoLocation", value);
+      },
+      onLoadDefault: async (value) => {
+        // geo default position 主入口
+        await readyPromise;
+        centerSource.source = "geo";
+        centerPlace.lng = value.position[0];
+        centerPlace.lat = value.position[1];
+        updatePlace();
+        emit("loadDefaultGeoLocation", value);
+      },
+      onChange: (v) => emit("changeGeoLocation", v),
+      onError: (e) => emit("geoError", e),
+    });
+    const { isDragging } = useMapDrag({
+      mapRef,
+      onChange: (point) => {
+        centerSource.source = "drag";
+        centerPlace.lng = point[0];
+        centerPlace.lat = point[1];
+        updatePlace();
+        emit("changeByDrag", point);
+      },
+    });
+    const { updatePlace, updateRecomandPlace, placeCandidates, availableRef } = useMapRecomendPlace(
+      {
+        pointRef: centerPoint,
+        context: centerSource,
+        getRecomendPlace,
+        getLimit: (context) => {
+          const source = context?.source;
+          switch (source) {
+            case "drag":
+            case "api":
+              return RECOMMEND_PLACE_LIMIT;
+            case "geo":
+            case "default":
+              return Infinity;
+            default:
+              throw new Error(`MyError: should not call getLimit on source: ${source}`);
+          }
+        },
+        onChangePlace: (place) => {
+          Object.assign(centerPlace, { ...place });
+          if (centerSource.source !== "recomend") {
+            updateRecomandPlace();
+          }
+          emit("changePlace", place);
+        },
+        onChange: (place) => {
+          centerSource.source = "recomend";
+          Object.assign(centerPlace, { ...place });
+          updatePlace();
+          emit("changeRecomandPlace", place);
+        },
+      }
+    );
+    watchEffect(() => {
+      mapContext.onChangeCenterPlace({ ...centerPlace });
+    });
+    watchEffect(() => {
+      mapContext.onChangeRecomendPlaces([...placeCandidates.value]);
+    });
+    return () => {
+      const description = !availableRef.value
+        ? undefined
+        : placeCandidates.value.length > 0
+        ? props.recomendDescription
+        : props.noRecomendDescription;
+      return (
+        <HeycarMap center={centerPoint.value} zoom={18} mapRef={setMap}>
+          <PassengerCircle position={geoPosition.value} />
+          <PickupPoints places={placeCandidates.value} onClick={setCenterByPlace} />
+          <AddressBox
+            position={centerPoint.value}
+            title={availableRef.value ? centerPlace.name : props.unavailableTitle}
+            description={description}
+            type={isDragging.value ? "locator" : "box"}
+          />
+        </HeycarMap>
+      );
+    };
+  }
+).props([
+  "unavailableTitle",
+  "recomendDescription",
+  "noRecomendDescription",
+  "fallback",
+  "geoDefaultPosition",
+  "getRecomendPlace",
+  "loading",
+  "mapContext",
+]);

package/src/business-components/BusinessRecomendPlaceMap/index.ts

@@ -0,0 +1 @@
+export * from "./BusinessRecomendPlaceMap";

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

@@ -0,0 +1,33 @@
+import { HeycarMap } from "../../components/MapProvider";
+import { useHeycarMap } from "../../hooks/useHeycarMap";
+import { useMapFitView } from "../../hooks/useMapFitView";
+import { defineSetup } from "../../types/helper";
+import type { Place } from "../../types/interface";
+import { place2point } from "../../utils/transform";
+import { SectionEndService } from "../BusinessTaxiServiceMap";
+
+export interface BusinessTaxiEndMapProps {
+  from: Place;
+  to: Place;
+}
+export const BusinessTaxiEndMap = defineSetup((props: BusinessTaxiEndMapProps) => {
+  const { mapRef, setMap } = useHeycarMap();
+  const { registerFitVeiw, setFitView } = useMapFitView({
+    mapRef,
+    autoFitTimeout: 5000,
+    padding: [25, 20, 15, 15],
+  });
+  return () => {
+    const { from, to } = props;
+    return (
+      <HeycarMap center={place2point(from)} zoom={13} mapRef={setMap}>
+        <SectionEndService
+          from={from}
+          to={to}
+          registerOverlay={registerFitVeiw}
+          onMapMounted={setFitView}
+        />
+      </HeycarMap>
+    );
+  };
+});

package/src/business-components/BusinessTaxiEndMap/index.ts

@@ -0,0 +1 @@
+export * from "./BusinessTaxiEndMap";

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

@@ -198,12 +198,12 @@ const SectionCanceled = defineSetup((props: SectionCanceledProps, { emit }) => {
   };
 });
 
-type SectionEndServiceProps = MROP &
+export type SectionEndServiceProps = MROP &
   MapMountedProps & {
     from: Place;
     to: Place;
   };
-const SectionEndService = defineSetup((props: SectionEndServiceProps, { emit }) => {
+export const SectionEndService = defineSetup((props: SectionEndServiceProps, { emit }) => {
   onMapMounted(() => emit("mapMounted"));
   return () => {
     const { from: fromPlace, to: toPlace, registerOverlay } = props;
@@ -323,16 +323,33 @@ export const BusinessTaxiServiceMap = defineLagecySetup((props: BusinessTaxiServ
             registerOverlay={registerOverlay}
             onMapMounted={setFitView}
           />
-        ) : driverStatus === "canceled" ? (
+        ) : driverStatus === "canceled" || driverStatus === "canceling" ? (
           <SectionCanceled from={from} to={to} registerOverlay={registerOverlay} />
-        ) : driverStatus === "endService" ? (
+        ) : driverStatus === "endService" ||
+          driverStatus === "completed" ||
+          driverStatus === "banlanceRefund" ||
+          driverStatus === "waitBanlanceRefund" ||
+          driverStatus === "rechargePayed" ||
+          driverStatus === "waitRechargePay" ||
+          driverStatus === "payed" ||
+          driverStatus === "waitpay" ||
+          driverStatus === "refund" ||
+          driverStatus === "confirmed" ? (
           <SectionEndService
             from={from}
             to={to}
             registerOverlay={registerOverlay}
             onMapMounted={setFitView}
           />
-        ) : null}
+        ) : (
+          // 匹配不到就显示灰色路线
+          <SectionEndService
+            from={from}
+            to={to}
+            registerOverlay={registerOverlay}
+            onMapMounted={setFitView}
+          />
+        )}
       </HeycarMap>
     );
   };

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

@@ -7,7 +7,7 @@ import {
 } from "../../components/GmapAdvancedMarkerView";
 import { useMapSupplier } from "../../hooks/useMapSupplier";
 import { AnchorType } from "../../types/amap/marker";
-import { createElement, defineLagecySetup, defineSetup } from "../../types/helper";
+import { createElement, defineSetup } from "../../types/helper";
 import type { Point } from "../../types/interface";
 import { createDom } from "../../utils/dom";
 import { vec2lnglat } from "../../utils/transform";
@@ -20,10 +20,7 @@ export interface PlaceCircleProps {
   hideIcon?: boolean;
   onClick?: (value: Point) => any;
 }
-export const APlaceCircle = defineLagecySetup(function APlaceCircle(
-  props: PlaceCircleProps,
-  { emit }
-) {
+export const APlaceCircle = defineSetup(function APlaceCircle(props: PlaceCircleProps, { emit }) {
   const textAlignRef = computed(() => props.textAlign ?? "right");
   const contentRef = computed(() => {
     const { hideIcon = false } = props;
@@ -46,20 +43,19 @@ export const APlaceCircle = defineLagecySetup(function APlaceCircle(
     console.log("on amap marker e = ", e);
     emit("click", props.position);
   };
-  return () => (
-    <AmapMarker
-      position={props.position}
-      content={props.label ? contentRef.value : contentWithoutLabelRef.value}
-      anchor={textAlignRef.value === "left" ? AnchorType.middleRight : AnchorType.middleLeft}
-      onClick={handleClick}
-    />
-  );
-}).props(["hideIcon", "label", "position", "textAlign"]);
+  return () => {
+    return (
+      <AmapMarker
+        position={props.position}
+        content={props.label ? contentRef.value : contentWithoutLabelRef.value}
+        anchor={textAlignRef.value === "left" ? AnchorType.middleRight : AnchorType.middleLeft}
+        onClick={handleClick}
+      />
+    );
+  };
+});
 
-export const GPlaceCircle = defineLagecySetup(function GPlaceCircle(
-  props: PlaceCircleProps,
-  { emit }
-) {
+export const GPlaceCircle = defineSetup(function GPlaceCircle(props: PlaceCircleProps, { emit }) {
   const textAlignRef = computed(() => props.textAlign ?? "right");
   const contentRef = computed(() => {
     const { hideIcon = false } = props;
@@ -96,7 +92,7 @@ export const GPlaceCircle = defineLagecySetup(function GPlaceCircle(
       onClick={handleClick}
     />
   );
-}).props(["hideIcon", "label", "position", "textAlign"]);
+});
 
 export const PlaceCircle = defineSetup(function PlaceCircle(props: PlaceCircleProps, { emit }) {
   const payload = useMapSupplier();

package/src/hooks/useGeoLocation.ts

@@ -6,9 +6,10 @@ export interface UseGeoLocationProps {
   onChange?: (value: { position: Point; coordinate: GeolocationCoordinates }) => any;
   onLoad?: (value: { position: Point; coordinate: GeolocationCoordinates }) => any;
   onLoadDefault?: (value: { position: Point }) => any;
+  onError?: (error: GeolocationPositionError) => any;
 }
 export const useGeoLocation = (props?: UseGeoLocationProps) => {
-  const { onChange, onLoad, onLoadDefault, geoDefaultPosition } = props ?? {};
+  const { onChange, onLoad, onLoadDefault, onError, geoDefaultPosition } = props ?? {};
   const loading = ref(false);
   const readyRef = ref(false);
   const errorRef = ref<GeolocationPositionError>();
@@ -44,6 +45,7 @@ export const useGeoLocation = (props?: UseGeoLocationProps) => {
           errorRef.value = error;
           const position = props?.geoDefaultPosition;
           if (position) onLoadDefault?.({ position });
+          onError?.(error);
           console.log("errorRef = ", errorRef);
         },
         // todo 要不要 timeout

package/src/hooks/useMapGeometry.ts

@@ -4,18 +4,18 @@ import { Status } from "./useMapLoader";
 import { useMapSupplier } from "./useMapSupplier";
 
 export const useAmapGeometry = () => {
-  const { status } = useMapSupplier();
+  const payload = useMapSupplier();
   const apiMapDistance = (from: Point, to: Point) => {
-    if (status !== Status.SUCCESS) return undefined;
+    if (payload.status !== Status.SUCCESS) return undefined;
     return AMap.GeometryUtil.distance(from, to);
   };
   return { apiMapDistance };
 };
 
 export const useGmapGeometry = () => {
-  const { status } = useMapSupplier();
+  const payload = useMapSupplier();
   const apiMapDistance = (from: Point, to: Point) => {
-    if (status !== Status.SUCCESS) return undefined;
+    if (payload.status !== Status.SUCCESS) return undefined;
     return google.maps.geometry.spherical.computeDistanceBetween(vec2lnglat(from), vec2lnglat(to));
   };
   return { apiMapDistance };