@heycar/heycars-map 0.2.2 → 0.2.4

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;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}._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}

package/dist/types/interface.d.ts

@@ -25,3 +25,8 @@ export interface RegisterOverlay<T> {
     add: (overlay: T) => void;
     remove: (overlay: T) => void;
 }
+export interface Route {
+    path: Point[];
+    distance: number;
+    duration: number;
+}

package/package.json

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

package/src/api/geometry.ts

@@ -5,11 +5,10 @@ export interface ApiMapMeta {
 }
 
 const point2latlng = ([lng, lat]: Point): google.maps.LatLngLiteral => ({ lng, lat });
-
 export interface DistanceOfLineProps extends ApiMapMeta {
   path: Point[];
 }
-export function apiDistanceOfLine(props: DistanceOfLineProps): number {
+export function apiMapDistanceOfLine(props: DistanceOfLineProps): number {
   const { path, isGoogle } = props;
   if (!isGoogle) {
     return AMap.GeometryUtil.distanceOfLine(path);
@@ -21,7 +20,7 @@ export interface IsPointInRingProps extends ApiMapMeta {
   point: Point;
   path: Point[];
 }
-export function apiIsPointInRing(props: IsPointInRingProps): boolean {
+export function apiMapIsPointInRing(props: IsPointInRingProps): boolean {
   const { point, path, isGoogle } = props;
   if (!isGoogle) {
     return AMap.GeometryUtil.isPointInRing(point, path);
@@ -35,7 +34,7 @@ export interface IsPointInLineProps extends ApiMapMeta {
   path: Point[];
   tolerance: number;
 }
-export function apiIsPointInLine(props: IsPointInLineProps): boolean {
+export function apiMapIsPointInLine(props: IsPointInLineProps): boolean {
   const { point, path, tolerance, isGoogle } = props;
   if (!isGoogle) {
     return AMap.GeometryUtil.isPointOnLine(point, path, tolerance);

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

@@ -1,4 +1,4 @@
-import { reactive, VNodeData } from "vue-demi";
+import { reactive, toRefs, VNodeData } from "vue-demi";
 import {
   useADrivingRoute,
   UseDrivingRouteProps,
@@ -13,6 +13,8 @@ import type { Point } from "../../types/interface";
 export type DrivingRouteRenderProps = {
   path: Point[];
   angle?: number;
+  distance: number;
+  duration: number;
 };
 export interface DrivingRouteProps extends UseDrivingRouteProps {
   render?: (props: DrivingRouteRenderProps) => VNodeChild;
@@ -22,9 +24,9 @@ export const ADrivingRoute = defineSetup(function DrivingRoute(
   { slots }
 ) {
   const map = useAmap();
-  const path = useADrivingRoute(props);
+  const { path, distance, duration } = toRefs(useADrivingRoute(props));
   const angle = useAmapAngle(reactive({ path, map }));
-  return () => <div>{slots.render?.(reactive({ path, angle }))}</div>;
+  return () => <div>{slots.render?.(reactive({ path, angle, distance, duration }))}</div>;
 });
 
 export const GDrivingRoute = defineSetup(function DrivingRoute(
@@ -32,9 +34,9 @@ export const GDrivingRoute = defineSetup(function DrivingRoute(
   { slots }
 ) {
   const map = useGmap();
-  const path = useGDrivingRoute(props);
+  const { path, distance, duration } = toRefs(useGDrivingRoute(props));
   const angle = useGmapAngle(reactive({ path, map }));
-  return () => <div>{slots.render?.(reactive({ path, angle }))}</div>;
+  return () => <div>{slots.render?.(reactive({ path, angle, distance, duration }))}</div>;
 });
 
 export const DrivingRoute = defineSetup(function DrivingRoute(props: DrivingRouteProps, { slots }) {

package/src/business-components/PassengerCircle/PassengerCircle.css.ts

@@ -1,8 +1,21 @@
-import { style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
 
-export const passengerCircle = style({
-  display: "flex",
-  marginBottom: "-8.135vw",
-  width: "16.27vw",
-  height: "16.27vw",
+export const passengerCircle = recipe({
+  base: {
+    display: "flex",
+  },
+  variants: {
+    size: {
+      small: {
+        width: "4.53vw",
+        height: "4.53vw",
+        marginBottom: "-2.265vw",
+      },
+      large: {
+        width: "16.27vw",
+        height: "16.27vw",
+        marginBottom: "-8.135vw",
+      },
+    },
+  },
 });

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

@@ -1,5 +1,6 @@
 import { computed } from "vue";
 import imgPassengerCircle from "../../assets/icons/svg/passenger-circle.svg";
+import imgPlaceCircle from "../../assets/icons/svg/place-circle.svg";
 import { AmapMarker } from "../../components/AmapMarker";
 import { GmapAdvancedMarkerView } from "../../components/GmapAdvancedMarkerView";
 import { useMapSupplier } from "../../hooks/useMapSupplier";
@@ -11,22 +12,27 @@ import * as css from "./PassengerCircle.css";
 
 interface PassengerCircleProps {
   position: [number, number];
+  size?: "small" | "large";
 }
 export const APassengerCircle = defineSetup(function APassengerCircle(props: PassengerCircleProps) {
-  const contentRef = computed(
-    () => `
-      <img src="${imgPassengerCircle}" class="${css.passengerCircle}">
-    `
-  );
+  const contentRef = computed(() => {
+    const { size = "large" } = props;
+    const src = size === "large" ? imgPassengerCircle : imgPlaceCircle;
+    return `
+        <img src="${src}" class="${css.passengerCircle({ size })}">
+      `;
+  });
   return () => (
     <AmapMarker position={props.position} content={contentRef.value} anchor={"bottom-center"} />
   );
 });
 
 export const GPassengerCircle = defineSetup(function GPassengerCircle(props: PassengerCircleProps) {
-  const contentRef = computed(() =>
-    createDom("img", { class: css.passengerCircle, src: imgPassengerCircle })
-  );
+  const contentRef = computed(() => {
+    const { size = "large" } = props;
+    const src = size === "large" ? imgPassengerCircle : imgPlaceCircle;
+    return createDom("img", { class: css.passengerCircle({ size }), src });
+  });
   return () => (
     <GmapAdvancedMarkerView position={vec2lnglat(props.position)} content={contentRef.value} />
   );

package/src/business-components/PlaceCircle/PlaceCircle.css.ts

@@ -45,10 +45,20 @@ export const gmapPlaceIconLayout = recipe({
   },
 });
 
-export const placeIcon = style({
-  display: "flex",
-  width: "4.53vw",
-  height: "4.53vw",
+export const placeIcon = recipe({
+  base: {
+    display: "flex",
+    width: "4.53vw",
+    height: "4.53vw",
+  },
+  variants: {
+    hideIcon: {
+      true: {
+        opacity: 0,
+      },
+      false: {},
+    },
+  },
 });
 
 export const label = style({

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

@@ -4,7 +4,7 @@ import { AmapMarker } from "../../components/AmapMarker";
 import { GmapAdvancedMarkerView } from "../../components/GmapAdvancedMarkerView";
 import { useMapSupplier } from "../../hooks/useMapSupplier";
 import { AnchorType } from "../../types/amap/marker";
-import { createElement, defineSetup } from "../../types/helper";
+import { createElement, defineLagecySetup, defineSetup } from "../../types/helper";
 import { createDom } from "../../utils/dom";
 import { vec2lnglat } from "../../utils/transform";
 import * as css from "./PlaceCircle.css";
@@ -13,25 +13,27 @@ export interface PlaceCircleProps {
   position: [number, number];
   label?: string;
   textAlign?: "left" | "right";
+  hideIcon?: boolean;
 }
-export const APlaceCircle = defineSetup(function APlaceCircle(props: PlaceCircleProps) {
+export const APlaceCircle = defineLagecySetup(function APlaceCircle(props: PlaceCircleProps) {
   const textAlignRef = computed(() => props.textAlign ?? "right");
-  const contentRef = computed(
-    () => `
-    <div class="${css.placeCircleLayout({ textAlign: textAlignRef.value })}" >
-      <img class="${css.placeIcon} ${css.amapPlaceIconLayout({
+  const contentRef = computed(() => {
+    const { hideIcon = false } = props;
+    return `
+        <div class="${css.placeCircleLayout({ textAlign: textAlignRef.value })}">
+          <img class="${css.placeIcon({ hideIcon })} ${css.amapPlaceIconLayout({
       textAlign: textAlignRef.value,
     })}" src="${imgPlaceCircle}">
-      <div class="${css.label}">${props.label}</div>
-    </div>
-  `
-  );
-  const contentWithoutLabelRef = computed(
-    () =>
-      `<img class="${css.placeIcon} ${css.amapPlaceIconLayout({
-        textAlign: textAlignRef.value,
-      })}" src="${imgPlaceCircle}">`
-  );
+          <div class="${css.label}">${props.label}</div>
+        </div>
+      `;
+  });
+  const contentWithoutLabelRef = computed(() => {
+    const { hideIcon = false } = props;
+    return `<img class="${css.placeIcon({ hideIcon })} ${css.amapPlaceIconLayout({
+      textAlign: textAlignRef.value,
+    })}" src="${imgPlaceCircle}">`;
+  });
   return () => (
     <AmapMarker
       position={props.position}
@@ -39,12 +41,13 @@ export const APlaceCircle = defineSetup(function APlaceCircle(props: PlaceCircle
       anchor={textAlignRef.value === "left" ? AnchorType.middleRight : AnchorType.middleLeft}
     />
   );
-});
+}).props(["hideIcon", "label", "position", "textAlign"]);
 
-export const GPlaceCircle = defineSetup(function GPlaceCircle(props: PlaceCircleProps) {
+export const GPlaceCircle = defineLagecySetup(function GPlaceCircle(props: PlaceCircleProps) {
   const textAlignRef = computed(() => props.textAlign ?? "right");
-  const contentRef = computed(() =>
-    createDom(
+  const contentRef = computed(() => {
+    const { hideIcon = false } = props;
+    return createDom(
       "div",
       {
         class: `${css.placeCircleLayout({
@@ -52,24 +55,27 @@ export const GPlaceCircle = defineSetup(function GPlaceCircle(props: PlaceCircle
         })} ${css.gmapPlaceIconLayout({ textAlign: textAlignRef.value })}`,
       },
       `
-      <img class="${css.placeIcon}" src="${imgPlaceCircle}">
+      <img class="${css.placeIcon({ hideIcon })}" src="${imgPlaceCircle}">
       <div class="${css.label}">${props.label}</div>
   `
-    )
-  );
-  const contentWithoutLabelRef = computed(() =>
-    createDom("img", {
-      class: `${css.placeIcon} ${css.gmapPlaceIconLayout({ textAlign: textAlignRef.value })}`,
+    );
+  });
+  const contentWithoutLabelRef = computed(() => {
+    const { hideIcon = false } = props;
+    return createDom("img", {
+      class: `${css.placeIcon({ hideIcon })} ${css.gmapPlaceIconLayout({
+        textAlign: textAlignRef.value,
+      })}`,
       src: imgPlaceCircle,
-    })
-  );
+    });
+  });
   return () => (
     <GmapAdvancedMarkerView
       position={vec2lnglat(props.position)}
       content={props.label ? contentRef.value : contentWithoutLabelRef.value}
     />
   );
-});
+}).props(["hideIcon", "label", "position", "textAlign"]);
 
 export const PlaceCircle = defineSetup(function PlaceCircle(props: PlaceCircleProps) {
   const payload = useMapSupplier();

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

@@ -10,11 +10,13 @@ export interface WalkingLineProps {
 }
 export const AWalkingLine = defineSetup(function AWalkingLine(props: WalkingLineProps) {
   return () => {
+    const { path } = props;
+    if (path.length === 0) return null;
     const vw = window.innerWidth * 0.01;
     const strokeWidth = 2 * vw;
     return (
       <AmapPolyline
-        path={props.path}
+        path={path}
         strokeWeight={strokeWidth}
         strokeOpacity={1}
         strokeColor={"#38A3FE"}
@@ -30,12 +32,14 @@ export const AWalkingLine = defineSetup(function AWalkingLine(props: WalkingLine
 export const GWalkingLine = defineSetup(function GWalkingLine(props: WalkingLineProps) {
   const pathRef = computed(() => props.path.map(vec2lnglat));
   return () => {
+    const path = pathRef.value;
+    if (path.length === 0) return null;
     const vw = window.innerWidth * 0.01;
     const strokeWidth = 2 * vw;
     const r = strokeWidth / 4;
     return (
       <GmapPolyline
-        path={pathRef.value}
+        path={path}
         strokeWeight={strokeWidth}
         strokeOpacity={1}
         strokeColor={"transparent"}

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

@@ -1,6 +1,4 @@
 import { reactive, VNodeData } from "vue-demi";
-import { useAmap, useGmap } from "../../hooks/useMap";
-import { useAmapAngle, useGmapAngle } from "../../hooks/useMapAngle";
 import { useMapSupplier } from "../../hooks/useMapSupplier";
 import {
   useAWalkingRoute,
@@ -21,20 +19,16 @@ export const AWalkingRoute = defineSetup(function WalkingRoute(
   props: WalkingRouteProps,
   { slots }
 ) {
-  const map = useAmap();
   const path = useAWalkingRoute(props);
-  const angle = useAmapAngle(reactive({ path, map }));
-  return () => <div>{slots.render?.(reactive({ path, angle }))}</div>;
+  return () => <div>{slots.render?.(reactive({ path }))}</div>;
 });
 
 export const GWalkingRoute = defineSetup(function WalkingRoute(
   props: WalkingRouteProps,
   { slots }
 ) {
-  const map = useGmap();
   const path = useGWalkingRoute(props);
-  const angle = useGmapAngle(reactive({ path, map }));
-  return () => <div>{slots.render?.(reactive({ path, angle }))}</div>;
+  return () => <div>{slots.render?.(reactive({ path }))}</div>;
 });
 
 export const WalkingRoute = defineSetup(function WalkingRoute(props: WalkingRouteProps, { slots }) {

package/src/components/Demo/HeycarDemo.tsx

@@ -1,5 +1,8 @@
 import { computed } from "vue-demi";
-import { StartEndPoint } from "../../business-components/StartEndPoint";
+import { DrivingLine } from "../../business-components/DrivingLine";
+import { DrivingRoute } from "../../business-components/DrivingRoute";
+import { PlaceCircle } from "../../business-components/PlaceCircle";
+import { TaxiCar } from "../../business-components/TaxiCar";
 import { useBusinessMapAutoComplete } from "../../hooks-business/useBusinessMapAutoComplete";
 import {
   useBusinessMapRecomendPlace,
@@ -7,6 +10,7 @@ import {
 } from "../../hooks-business/useBusinessMapRecomendPlace";
 import { useHeycarMap } from "../../hooks/useHeycarMap";
 import { useMapFitView } from "../../hooks/useMapFitView";
+import { useMapGeometry } from "../../hooks/useMapGeometry";
 import { defineSetup } from "../../types/helper";
 import { HeycarMap, MapProvider } from "../MapProvider/MapProvider";
 import * as css from "./Demo.css";
@@ -23,7 +27,7 @@ export const HeycarDemo = defineSetup(function HeycarDemo() {
       amapSecret={amapApiSecret}
       gmapId={gmapId}
       gmapKey={gmapApiKey}
-      supplier={"amap"}
+      supplier={"gmap"}
     >
       <SomeHomePage />
     </MapProvider>
@@ -94,11 +98,18 @@ export const SomeHomePage = defineSetup(function SomeHomePage() {
     padding: [15, 15, 5, 15],
     autoFitTimeout: 5000,
   });
+  const { apiMapDistance } = useMapGeometry();
   (window as any).setCenterPlaceByRecomand = setCenterPlaceByRecomand;
   (window as any).setFitView = setFitView;
   return () => {
     return (
       <div>
+        distance:{" "}
+        {apiMapDistance(centerPoint.value, [
+          centerPoint.value[0] + 0.01,
+          centerPoint.value[1] + 0.01,
+        ])}{" "}
+        <br />
         geoLoading: {`${geoLoading.value}`} <br />
         isDragging: {`${isDragging.value}`} <br />
         geoPosition: {geoPosition.value[0]} | {geoPosition.value[1]} <br />
@@ -112,18 +123,18 @@ export const SomeHomePage = defineSetup(function SomeHomePage() {
           zoom={centerPoint.value[0] === 0 ? 3 : 13}
           mapRef={setMap}
         >
-          <StartEndPoint
+          {/* <StartEndPoint
             registerOverlay={registerFitVeiw}
             position={[121.4897065, 31.0842552]}
             title={"start point"}
             type="start"
-          />
-          <StartEndPoint
+          /> */}
+          {/* <StartEndPoint
             registerOverlay={registerFitVeiw}
             position={[centerPoint.value[0] + 0.01, centerPoint.value[1] + 0.01]}
             title={"end point"}
             type="end"
-          />
+          /> */}
           {/* <PickupPoints places={placeCandidates.value} /> */}
           {/* <AddressBox
             type="box"
@@ -139,17 +150,19 @@ export const SomeHomePage = defineSetup(function SomeHomePage() {
             ]}
             labels={["place name 1", "place name 2"]}
           /> */}
-          {/* <DrivingRoute
+          <DrivingRoute
             from={[121, 31]}
             to={[121.6, 31.3]}
             render={({ path, angle }) => [
               <DrivingLine path={path} />,
               <TaxiCar position={[121, 31]} angle={angle} />,
             ]}
-          /> */}
+          />
+          {/* <PassengerCircle position={centerPoint.value} size="small" /> */}
+          <PlaceCircle position={centerPoint.value} label={"some place"} hideIcon />
           {/* <WalkingRoute
             from={centerPoint.value}
-            to={[centerPoint.value[0] + 0.1, centerPoint.value[1] + 0.1]}
+            to={[centerPoint.value[0] + 0.01, centerPoint.value[1] + 0.01]}
             render={({ path }) => <WalkingLine path={path} />}
           /> */}
         </HeycarMap>

package/src/hooks/useDrivingRoute.ts

@@ -1,5 +1,5 @@
-import { ShallowRef, shallowRef } from "vue-demi";
-import type { Point } from "../types/interface";
+import { reactive } from "vue-demi";
+import type { Point, Route } from "../types/interface";
 import { watchPostEffectForDeepOption } from "../utils/compare";
 import { useMapSupplier } from "./useMapSupplier";
 
@@ -9,7 +9,7 @@ export interface UseDrivingRouteProps {
 }
 
 export const useADrivingRoute = (props: UseDrivingRouteProps) => {
-  const pathRef = shallowRef<Point[]>([]);
+  const outputRoute = reactive<Route>({ path: [], distance: 0, duration: 0 });
   const amapDriving = new AMap.Driving({});
   watchPostEffectForDeepOption(
     () => ({ ...props }),
@@ -23,17 +23,22 @@ export const useADrivingRoute = (props: UseDrivingRouteProps) => {
             case "complete": {
               let path: Point[] = [];
               const drivingResult = result as AMap.DrivingResult;
-              for (const route of drivingResult.routes) {
-                for (const step of route.steps) {
-                  const basicStep = step as AMap.DriveStepBasic;
-                  const stepPath = basicStep.path.map<Point>(({ lng, lat }) => [lng, lat]);
-                  path = path.concat(stepPath);
-                }
+              // todo 多条导航路线的情况
+              const firstRoute = drivingResult.routes[0];
+              for (const step of firstRoute.steps) {
+                const basicStep = step as AMap.DriveStepBasic;
+                const stepPath = basicStep.path.map<Point>(({ lng, lat }) => [lng, lat]);
+                path = path.concat(stepPath);
               }
-              pathRef.value = path;
+              outputRoute.path = path;
+              outputRoute.distance = firstRoute.distance;
+              outputRoute.duration = firstRoute.time;
               return;
             }
             case "no_data":
+              outputRoute.path = [];
+              outputRoute.distance = 0;
+              outputRoute.duration = 0;
               return;
             default:
               throw result;
@@ -42,35 +47,60 @@ export const useADrivingRoute = (props: UseDrivingRouteProps) => {
       );
     }
   );
-  return pathRef;
+  return outputRoute;
 };
 
 export const useGDrivingRoute = (props: UseDrivingRouteProps) => {
-  const pathRef = shallowRef<Point[]>([]);
+  const outputRoute = reactive<Route>({ path: [], distance: 0, duration: 0 });
   const gmapDirectionsService = new google.maps.DirectionsService();
   watchPostEffectForDeepOption(
     () => ({ ...props }),
     ({ from, to }) => {
-      gmapDirectionsService
-        .route({
+      gmapDirectionsService.route(
+        {
           origin: { lng: from[0], lat: from[1] },
           destination: { lng: to[0], lat: to[1] },
           travelMode: google.maps.TravelMode.DRIVING,
-        })
-        .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;
-        });
+        },
+        (result, status) => {
+          switch (status) {
+            case google.maps.DirectionsStatus.OK: {
+              let path: Point[] = [];
+              let distance = 0;
+              let duration = 0;
+              const firstRoute = result!.routes[0];
+              const stepPath = firstRoute.overview_path.map<Point>((item) => [
+                item.lng(),
+                item.lat(),
+              ]);
+              path = path.concat(stepPath);
+              for (const leg of firstRoute.legs) {
+                distance += leg.distance?.value ?? 0;
+                // todo 考虑用 duration_in_traffic 但这个字段上有条件的
+                duration += leg.duration?.value ?? 0;
+              }
+              outputRoute.path = path;
+              outputRoute.distance = distance;
+              outputRoute.duration = duration;
+              return;
+            }
+            case google.maps.DirectionsStatus.ZERO_RESULTS:
+            case google.maps.DirectionsStatus.NOT_FOUND:
+              outputRoute.path = [];
+              outputRoute.distance = 0;
+              outputRoute.duration = 0;
+              return;
+            default:
+              throw new Error(status);
+          }
+        }
+      );
     }
   );
-  return pathRef;
+  return outputRoute;
 };
 
-export const useDrivingRoute = (props: UseDrivingRouteProps): ShallowRef<Point[]> => {
+export const useDrivingRoute = (props: UseDrivingRouteProps): Route => {
   const { supplier } = useMapSupplier();
   return supplier === "gmap" ? useGDrivingRoute(props) : useADrivingRoute(props);
 };

package/src/hooks/useGeoLocation.ts

@@ -5,8 +5,8 @@ export interface UseGeoLocationProps {
   onChange?: (value: { position: Point; coordinate: GeolocationCoordinates }) => any;
   onLoad?: (value: { position: Point; coordinate: GeolocationCoordinates }) => any;
 }
-export const useGeoLocation = (props: UseGeoLocationProps) => {
-  const { onChange, onLoad } = props;
+export const useGeoLocation = (props?: UseGeoLocationProps) => {
+  const { onChange, onLoad } = props ?? {};
   const loading = ref(false);
   const readyRef = ref(false);
   const errorRef = ref<GeolocationPositionError>();

package/src/hooks/useMapGeometry.ts

@@ -0,0 +1,27 @@
+import type { Point } from "../types/interface";
+import { vec2lnglat } from "../utils/transform";
+import { Status } from "./useMapLoader";
+import { useMapSupplier } from "./useMapSupplier";
+
+export const useAmapGeometry = () => {
+  const { status } = useMapSupplier();
+  const apiMapDistance = (from: Point, to: Point) => {
+    if (status !== Status.SUCCESS) return undefined;
+    return AMap.GeometryUtil.distance(from, to);
+  };
+  return { apiMapDistance };
+};
+
+export const useGmapGeometry = () => {
+  const { status } = useMapSupplier();
+  const apiMapDistance = (from: Point, to: Point) => {
+    if (status !== Status.SUCCESS) return undefined;
+    return google.maps.geometry.spherical.computeDistanceBetween(vec2lnglat(from), vec2lnglat(to));
+  };
+  return { apiMapDistance };
+};
+
+export const useMapGeometry = () => {
+  const { supplier } = useMapSupplier();
+  return supplier === "gmap" ? useGmapGeometry() : useAmapGeometry();
+};

package/src/hooks/useMapLoader.ts

@@ -9,7 +9,7 @@ export const DEFAULT_AMAP_PLUGINS: AmapLoaderProps["plugins"] = [
   "AMap.Geocoder",
   "AMap.PlaceSearch",
   "AMap.Driving",
-  "AMap.Walker",
+  "AMap.Walking",
 ];
 export const DEFAULT_GMAP_LIBRARIES: LoaderOptions["libraries"] = ["marker", "places", "geometry"];