@heycar/heycars-map 0.2.3 → 0.2.4

package/package.json

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

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

@@ -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;

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";
@@ -15,7 +15,7 @@ export interface PlaceCircleProps {
   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(() => {
     const { hideIcon = false } = props;
@@ -41,9 +41,9 @@ 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(() => {
     const { hideIcon = false } = props;
@@ -75,7 +75,7 @@ export const GPlaceCircle = defineSetup(function GPlaceCircle(props: PlaceCircle
       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/components/Demo/HeycarDemo.tsx

@@ -1,7 +1,8 @@
 import { computed } from "vue-demi";
+import { DrivingLine } from "../../business-components/DrivingLine";
+import { DrivingRoute } from "../../business-components/DrivingRoute";
 import { PlaceCircle } from "../../business-components/PlaceCircle";
-import { WalkingLine } from "../../business-components/WalkingLine";
-import { WalkingRoute } from "../../business-components/WalkingRoute";
+import { TaxiCar } from "../../business-components/TaxiCar";
 import { useBusinessMapAutoComplete } from "../../hooks-business/useBusinessMapAutoComplete";
 import {
   useBusinessMapRecomendPlace,
@@ -26,7 +27,7 @@ export const HeycarDemo = defineSetup(function HeycarDemo() {
       amapSecret={amapApiSecret}
       gmapId={gmapId}
       gmapKey={gmapApiKey}
-      supplier={"amap"}
+      supplier={"gmap"}
     >
       <SomeHomePage />
     </MapProvider>
@@ -149,21 +150,21 @@ 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
+          {/* <WalkingRoute
             from={centerPoint.value}
             to={[centerPoint.value[0] + 0.01, centerPoint.value[1] + 0.01]}
             render={({ path }) => <WalkingLine path={path} />}
-          />
+          /> */}
         </HeycarMap>
       </div>
     );

package/src/hooks/useDrivingRoute.ts

@@ -69,13 +69,11 @@ export const useGDrivingRoute = (props: UseDrivingRouteProps) => {
               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 但这个字段上有条件的