@heycar/heycars-map 0.1.2 → 0.1.3

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{margin-left:-2.265vw}.fhyw82{margin-bottom:-2.265vw;margin-left:calc(50% - 2.265vw)}.fhyw83{display:flex;width:4.53vw;height:4.53vw}.fhyw84{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}.c8adwd0{width:100vw;height:100vh}
+._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}

package/dist/types/helper.d.ts

@@ -3,13 +3,16 @@ import { DefineComponent, SetupContext, VNode } from "vue-demi";
 import type { VNodeChildren } from "vue/types/umd";
 import type { ComponentOptionsBase } from "vue/types/v3-component-options";
 import type { ComponentObjectPropsOptions } from "vue/types/v3-component-props";
-import type { EmitFn, ObjectEmitsOptions, Slot } from "vue/types/v3-setup-context";
+import type { ObjectEmitsOptions, Slot } from "vue/types/v3-setup-context";
 export type VNodeChild = VNode | VNodeChildren;
 export type VueNode = VNode | null | undefined;
 type LagecyPropNames<N> = N extends `on${string}` ? never : N;
 export type EmitByProps<T, R = Required<T>> = {
     [K in keyof R as K extends `on${infer N}` ? Uncapitalize<N> : never]: R[K];
 };
+export type EmitPayloadByProps<T, R = Required<T>> = {
+    [K in keyof R as K extends `on${infer N}` ? Uncapitalize<N> : never]: R[K] extends (props: infer P) => any ? P : never;
+};
 type RenderFunction = (...args: any[]) => VNodeChild;
 export type SC<P> = Omit<SetupContext<Extract<EmitByProps<P>, ObjectEmitsOptions>>, "slots"> & {
     slots: {
@@ -18,7 +21,7 @@ export type SC<P> = Omit<SetupContext<Extract<EmitByProps<P>, ObjectEmitsOptions
         default?: Slot;
     };
 };
-export type SetupContextEmit<P> = EmitFn<Extract<EmitByProps<P>, ObjectEmitsOptions>>;
+export type SetupContextEmitHandler<P, E = EmitPayloadByProps<P>> = (eventName: keyof E, payload: E[keyof E]) => any;
 export type SetupOptions<P> = ComponentOptionsBase<P, Empty, Empty, Empty, Empty, Empty, Empty, Extract<EmitByProps<P>, ObjectEmitsOptions>, Extract<keyof EmitByProps<P>, string>, Empty>;
 export type Empty = Record<string, never>;
 export declare function defineFc<P = Empty>(render: (props: P, ctx: SC<P>) => VueNode): DefineComponent<ComponentObjectPropsOptions<P>, Empty, Empty, Empty, Empty, Empty, Empty, Extract<EmitByProps<P, Required<P>>, ObjectEmitsOptions>, Extract<keyof EmitByProps<P, Required<P>>, string>, P, import("vue-demi").ExtractDefaultPropTypes<ComponentObjectPropsOptions<P>>>;

package/dist/types/interface.d.ts

@@ -1 +1,4 @@
+/// <reference types="google.maps" />
+import type { ShallowRef } from "vue-demi";
 export type Point = [number, number];
+export type MapShallowRef<M = AMap.Map | google.maps.Map> = ShallowRef<M | undefined>;

package/dist/types/mapHelper.d.ts

@@ -0,0 +1,3 @@
+export type MapEventHandler<T> = (e: {
+    target: T;
+}) => any;

package/package.json

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

package/src/api/geometry.ts

@@ -1,8 +1,9 @@
+import type { Point } from "../types/interface";
+
 export interface ApiMapMeta {
   isGoogle: boolean;
 }
 
-type Point = [number, number];
 const point2latlng = ([lng, lat]: Point): google.maps.LatLngLiteral => ({ lng, lat });
 
 export interface DistanceOfLineProps extends ApiMapMeta {

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

@@ -6,6 +6,7 @@ import { createElement, defineSetup } from "../../types/helper";
 import { vec2lnglat } from "../../utils/transform";
 
 export interface DrivingLineProps {
+  done?: boolean;
   path: [number, number][];
 }
 export const ADrivingLine = defineSetup(function ADrivingLine(props: DrivingLineProps) {
@@ -16,13 +17,16 @@ export const ADrivingLine = defineSetup(function ADrivingLine(props: DrivingLine
     const dirWidth = 0.6 * vw;
     const outlineWidth = 1 * vw;
     const dashLength = 0.75 * vw;
+    const strokeColorInner = props.done ? "#96B2CA" : "#487BF4";
+    const strokeColorOuter = props.done ? "#7693AF" : "#4175F1";
+    const strokeColorBorder = props.done ? "#7693AF" : "#6C95F5";
     return (
       <div>
         <AmapPolyline
           path={props.path}
           strokeWeight={strokeWidth + 2 * borderWidth + 2 * outlineWidth}
           strokeOpacity={1}
-          strokeColor={"#4175F1"}
+          strokeColor={strokeColorOuter}
           lineJoin={"round"}
           lineCap={"round"}
         />
@@ -30,7 +34,7 @@ export const ADrivingLine = defineSetup(function ADrivingLine(props: DrivingLine
           path={props.path}
           strokeWeight={strokeWidth + 2 * borderWidth}
           strokeOpacity={1}
-          strokeColor={"#6C95F5"}
+          strokeColor={strokeColorBorder}
           lineJoin={"round"}
           lineCap={"round"}
           strokeStyle={"dashed"}
@@ -40,7 +44,7 @@ export const ADrivingLine = defineSetup(function ADrivingLine(props: DrivingLine
           path={props.path}
           strokeWeight={strokeWidth}
           strokeOpacity={1}
-          strokeColor={"#487BF4"}
+          strokeColor={strokeColorInner}
           lineJoin={"round"}
           lineCap={"round"}
         />
@@ -67,13 +71,16 @@ export const GDrivingLine = defineSetup(function GDrivingLine(props: DrivingLine
     const borderWidth = 0.35 * vw;
     const dirStrokeWeight = 0.75 * vw;
     const outlineWidth = 1 * vw;
+    const strokeColorInner = props.done ? "#96B2CA" : "#487BF4";
+    const strokeColorOuter = props.done ? "#7693AF" : "#4175F1";
+    const strokeColorBorder = props.done ? "#7693AF" : "#6C95F5";
     return (
       <div>
         <GmapPolyline
           path={pathRef.value}
           strokeWeight={strokeWidth + 2 * borderWidth + 2 * outlineWidth}
           strokeOpacity={1}
-          strokeColor={"#4175F1"}
+          strokeColor={strokeColorOuter}
         />
         <GmapPolyline
           path={pathRef.value}
@@ -82,8 +89,8 @@ export const GDrivingLine = defineSetup(function GDrivingLine(props: DrivingLine
               icon: {
                 path: `M 0,-0.5 0,0.5`,
                 strokeWeight: strokeWidth + 2 * borderWidth,
-                strokeColor: "#6C95F5",
-                fillColor: "#6C95F5",
+                strokeColor: strokeColorBorder,
+                fillColor: strokeColorBorder,
                 scale: 1,
               },
               repeat: `${strokeWidth}px`,
@@ -95,7 +102,7 @@ export const GDrivingLine = defineSetup(function GDrivingLine(props: DrivingLine
           path={pathRef.value}
           strokeWeight={strokeWidth}
           strokeOpacity={1}
-          strokeColor={"#487BF4"}
+          strokeColor={strokeColorInner}
           icons={[
             {
               icon: {

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

@@ -0,0 +1,43 @@
+import type { Ref, ShallowRef } from "vue-demi";
+import { useAmap } from "../../components/Amap/useAmap";
+import { useGmap } from "../../components/Gmap/useGmap";
+import { useMapSupplier } from "../../components/MapProvider/useMapSupplier";
+import {
+  useADrivingRoute,
+  UseDrivingRouteProps,
+  useGDrivingRoute,
+} from "../../hooks/useDrivingRoute";
+import { useAmapAngle, useGmapAngle } from "../../hooks/useMapAngle";
+import { createElement, defineSetup, VNodeChild } from "../../types/helper";
+import type { Point } from "../../types/interface";
+
+export interface DrivingRouteProps extends UseDrivingRouteProps {
+  render?: (props: {
+    pathRef: ShallowRef<Point[]>;
+    angleRef: Ref<number | undefined>;
+  }) => 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>;
+});
+
+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>;
+});
+
+export const DrivingRoute = defineSetup(function DrivingRoute(props: DrivingRouteProps) {
+  const { supplier } = useMapSupplier();
+  return () => createElement(supplier === "gmap" ? GDrivingRoute : ADrivingRoute, { attrs: props });
+});

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

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

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

@@ -0,0 +1,16 @@
+import { defineSetup } from "../../types/helper";
+import { PlaceCircle } from "../PlaceCircle";
+
+export interface PickupPointsProps {
+  positions: [number, number][];
+  labels: string[];
+}
+export const PickupPoints = defineSetup(function PickupPoints(props: PickupPointsProps) {
+  return () => (
+    <div>
+      {props.positions.map((position, idx) => (
+        <PlaceCircle position={position} label={props.labels[idx]} textAlign="left" />
+      ))}
+    </div>
+  );
+});

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

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

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

@@ -1,17 +1,48 @@
 import { style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
 
-export const placeCircleLayout = style({
-  display: "flex",
-  alignItems: "center",
+export const placeCircleLayout = recipe({
+  base: {
+    display: "flex",
+    alignItems: "center",
+  },
+  variants: {
+    textAlign: {
+      left: {
+        flexDirection: "row-reverse",
+      },
+      right: {},
+    },
+  },
 });
 
-export const amapPlaceIconLayout = style({
-  marginLeft: "-2.265vw",
+export const amapPlaceIconLayout = recipe({
+  variants: {
+    textAlign: {
+      left: {
+        marginRight: "-2.265vw",
+      },
+      right: {
+        marginLeft: "-2.265vw",
+      },
+    },
+  },
 });
 
-export const gmapPlaceIconLayout = style({
-  marginBottom: "-2.265vw",
-  marginLeft: "calc(50% - 2.265vw)",
+export const gmapPlaceIconLayout = recipe({
+  base: {
+    marginBottom: "-2.265vw",
+  },
+  variants: {
+    textAlign: {
+      left: {
+        marginRight: "calc(50% - 2.265vw)",
+      },
+      right: {
+        marginLeft: "calc(50% - 2.265vw)",
+      },
+    },
+  },
 });
 
 export const placeIcon = style({

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

@@ -9,36 +9,48 @@ import { createDom } from "../../utils/dom";
 import { vec2lnglat } from "../../utils/transform";
 import * as css from "./PlaceCircle.css";
 
-interface PlaceCircleProps {
+export interface PlaceCircleProps {
   position: [number, number];
   label?: string;
+  textAlign?: "left" | "right";
 }
 export const APlaceCircle = defineSetup(function APlaceCircle(props: PlaceCircleProps) {
+  const textAlignRef = computed(() => props.textAlign ?? "right");
   const contentRef = computed(
     () => `
-    <div class="${css.placeCircleLayout}" >
-      <img class="${css.placeIcon} ${css.amapPlaceIconLayout}" src="${imgPlaceCircle}">
+    <div class="${css.placeCircleLayout({ textAlign: textAlignRef.value })}" >
+      <img class="${css.placeIcon} ${css.amapPlaceIconLayout({
+      textAlign: textAlignRef.value,
+    })}" src="${imgPlaceCircle}">
       <div class="${css.label}">${props.label}</div>
     </div>
   `
   );
   const contentWithoutLabelRef = computed(
-    () => `<img class="${css.placeIcon} ${css.amapPlaceIconLayout}" src="${imgPlaceCircle}">`
+    () =>
+      `<img class="${css.placeIcon} ${css.amapPlaceIconLayout({
+        textAlign: textAlignRef.value,
+      })}" src="${imgPlaceCircle}">`
   );
   return () => (
     <AmapMarker
       position={props.position}
       content={props.label ? contentRef.value : contentWithoutLabelRef.value}
-      anchor={AnchorType.middleLeft}
+      anchor={textAlignRef.value === "left" ? AnchorType.middleRight : AnchorType.middleLeft}
     />
   );
 });
 
 export const GPlaceCircle = defineSetup(function GPlaceCircle(props: PlaceCircleProps) {
+  const textAlignRef = computed(() => props.textAlign ?? "right");
   const contentRef = computed(() =>
     createDom(
       "div",
-      { class: `${css.placeCircleLayout} ${css.gmapPlaceIconLayout}` },
+      {
+        class: `${css.placeCircleLayout({
+          textAlign: textAlignRef.value,
+        })} ${css.gmapPlaceIconLayout({ textAlign: textAlignRef.value })}`,
+      },
       `
       <img class="${css.placeIcon}" src="${imgPlaceCircle}">
       <div class="${css.label}">${props.label}</div>
@@ -46,7 +58,10 @@ export const GPlaceCircle = defineSetup(function GPlaceCircle(props: PlaceCircle
     )
   );
   const contentWithoutLabelRef = computed(() =>
-    createDom("img", { class: `${css.placeIcon} ${css.gmapPlaceIconLayout}`, src: imgPlaceCircle })
+    createDom("img", {
+      class: `${css.placeIcon} ${css.gmapPlaceIconLayout({ textAlign: textAlignRef.value })}`,
+      src: imgPlaceCircle,
+    })
   );
   return () => (
     <GmapAdvancedMarkerView

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

@@ -24,8 +24,8 @@ export const ATaxiCar = defineSetup(function ATaxiCar(props: TaxiCarProps) {
               : `<span class="${css.pointInfoBoxEmphasize}">${item.value}</span>`
           )
           .join("");
-    if (!props.title) return `<img src="${imgTaxicar}" class="${css.carIcon}">`;
     const carStyle = `transform:rotate(${props.angle ?? 0}deg)`;
+    if (!props.title) return `<img src="${imgTaxicar}" class="${css.carIcon}" style="${carStyle}">`;
     return `
       <div class="${css.pointLayout}">
         <div class="${css.pointSingleInfoBox}">${titleRow}</div>
@@ -49,8 +49,9 @@ export const GTaxiCar = defineSetup(function GTaxiCar(props: TaxiCarProps) {
               : `<span class="${css.pointInfoBoxEmphasize}">${item.value}</span>`
           )
           .join("");
-    if (!props.title) return createDom("img", { class: css.carIcon, src: imgTaxicar });
     const carStyle = `transform:rotate(${props.angle ?? 0}deg)`;
+    if (!props.title)
+      return createDom("img", { class: css.carIcon, src: imgTaxicar, style: carStyle });
     return createDom(
       "div",
       { class: css.pointLayout },

package/src/components/Amap/Amap.ts

@@ -1,5 +1,7 @@
 import { computed, h, shallowRef, watchPostEffect } from "vue-demi";
+import type { SetMap } from "../../hooks/useHeycarMap";
 import { defineSetup } from "../../types/helper";
+import type { MapEventHandler } from "../../types/mapHelper";
 import {
   watchNoneImmediatePostEffectForDeepOption,
   watchNoneImmediatePostEffectForMapProperty,
@@ -9,11 +11,13 @@ import * as css from "./Amap.css";
 import { provideAmap } from "./useAmap";
 
 export interface AmapProps extends AMap.MapOptions {
-  onMapMove?: (e: { type: "mapmove"; target: AMap.Map }) => void;
+  mapRef?: SetMap<AMap.Map>;
+  onDragStart?: MapEventHandler<AMap.Map>;
+  onDragEnd?: MapEventHandler<AMap.Map>;
 }
 
 export const Amap = defineSetup(function Amap(props: AmapProps, { slots, emit }) {
-  const { onMapMove, ...defaultOptions } = props;
+  const { onDragStart, onDragEnd, mapRef: setMap, ...defaultOptions } = props;
   const statusOptions = computed(() => {
     return {
       dragEnable: !!props.dragEnable,
@@ -31,7 +35,9 @@ export const Amap = defineSetup(function Amap(props: AmapProps, { slots, emit })
   watchPostEffect(() => {
     // todo 这里是否会因为 mapRef 的赋值导致不停运行？
     if (mapRef.value || !elementRef.value) return;
-    mapRef.value = new AMap.Map(elementRef.value, { ...defaultOptions });
+    const map = new AMap.Map(elementRef.value, { ...defaultOptions });
+    mapRef.value = map;
+    setMap?.(map);
   });
   watchNoneImmediatePostEffectForDeepOption(
     () => statusOptions.value,
@@ -53,6 +59,6 @@ export const Amap = defineSetup(function Amap(props: AmapProps, { slots, emit })
     { name: "mask", defaultValue: [] },
     { name: "labelRejectMask", defaultValue: false },
   ]);
-  watchPostEffectForAMapEvent(mapRef, props, emit, ["onMapMove"]);
+  watchPostEffectForAMapEvent(mapRef, props, emit, ["onDragStart", "onDragEnd"]);
   return () => h("div", { ref: elementRef, class: css.amap }, slots.default?.());
 });

package/src/components/Demo/HeycarDemo.tsx

@@ -1,5 +1,8 @@
-import { AddressBox } from "../../business-components/AddressBox";
-import { useMapCenter } from "../../hooks/useMapCenter";
+import { DrivingLine } from "../../business-components/DrivingLine";
+import { DrivingRoute } from "../../business-components/DrivingRoute";
+import { TaxiCar } from "../../business-components/TaxiCar";
+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";
@@ -18,28 +21,46 @@ export const HeycarDemo = defineSetup(function HeycarDemo() {
       gmapKey={gmapApiKey}
       supplier={"amap"}
     >
-      <HeycarMap
-        class={css.demo}
-        fallback={() => <div>error</div>}
-        loading={() => <div>loading</div>}
-        center={[0, 0]}
-        zoom={3}
-      >
-        <Hello />
-        <AddressBox position={[0, 0]} title={"Martyrs Lawn"} description={"您将在此处上车"} />
-      </HeycarMap>
+      <SomePage />
     </MapProvider>
   );
 });
 
-export const Hello = defineSetup(function Hello() {
-  const { center, setCenter } = useMapCenter();
-  (window as any).setCenter = setCenter;
+export const SomePage = defineSetup(function Hello() {
+  const { mapRef, setMap, panTo } = useHeycarMap();
+  const { centerPlace, isDragging } = useMapDrag(mapRef);
+  (window as any).panTo = panTo;
   return () => {
-    console.log("center = ", { ...center });
     return (
       <div>
-        {center.name} | {center.lng} | {center.lat}{" "}
+        isDragging: {`${isDragging.value}`} <br />
+        {centerPlace.lng} | {centerPlace.lat} | {centerPlace.name}
+        <HeycarMap
+          class={css.demo}
+          fallback={() => <div>error</div>}
+          loading={() => <div>loading</div>}
+          center={[121, 31]}
+          zoom={15}
+          mapRef={setMap}
+        >
+          {/* <AddressBox position={[0, 0]} title={"Martyrs Lawn"} description={"您将在此处上车"} /> */}
+          {/* <TaxiCar position={[121, 31]} angle={0} /> */}
+          {/* <PickupPoints
+            positions={[
+              [-1, -1],
+              [-2, -2],
+            ]}
+            labels={["place name 1", "place name 2"]}
+          /> */}
+          <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} />,
+            ]}
+          />
+        </HeycarMap>
       </div>
     );
   };

package/src/components/Gmap/Gmap.ts

@@ -1,28 +1,35 @@
 import { computed, h, shallowRef, watchPostEffect } from "vue-demi";
+import type { SetMap } from "../../hooks/useHeycarMap";
 import { defineSetup } from "../../types/helper";
+import type { MapEventHandler } from "../../types/mapHelper";
 import {
   watchNoneImmediatePostEffectForDeepOption,
   watchPostEffectForGMapEvent,
 } from "../../utils/compare";
 import { provideGmap } from "./useGmap";
-export interface GampProps extends google.maps.MapOptions {
-  onCenter_changed?: (e: { target: google.maps.Map }) => void;
+export interface GmapProps extends google.maps.MapOptions {
+  mapRef?: SetMap<google.maps.Map>;
+  onDragStart?: MapEventHandler<google.maps.Map>;
+  onDragEnd?: MapEventHandler<google.maps.Map>;
 }
 
-export const Gmap = defineSetup(function Gmap(props: GampProps, { slots, emit }) {
+export const Gmap = defineSetup(function Gmap(props: GmapProps, { slots, emit }) {
+  const setMap = props.mapRef;
   const options = computed(() => {
-    const { onCenter_changed, ...options } = props;
+    const { mapRef, onDragStart, onDragEnd, ...options } = props;
     return options;
   });
   const defaultOptions = options.value;
   const elementRef = shallowRef();
   const mapRef = shallowRef<google.maps.Map>();
-  const handleCenter_changed: typeof emit = (name) => emit(name, { target: mapRef.value! });
+  const handleDrag: typeof emit = (name) => emit(name as any, { target: mapRef.value! });
   provideGmap(mapRef);
   watchPostEffect(() => {
     // todo 这里是否会因为 mapRef 的赋值导致不停运行？
     if (mapRef.value || !elementRef.value) return;
-    mapRef.value = new google.maps.Map(elementRef.value, { ...defaultOptions });
+    const map = new google.maps.Map(elementRef.value, { ...defaultOptions });
+    mapRef.value = map;
+    setMap?.(map);
   });
   watchNoneImmediatePostEffectForDeepOption(
     () => options.value,
@@ -30,6 +37,6 @@ export const Gmap = defineSetup(function Gmap(props: GampProps, { slots, emit })
       mapRef.value?.setOptions({ ...options });
     }
   );
-  watchPostEffectForGMapEvent(mapRef, props, handleCenter_changed, ["onCenter_changed"]);
+  watchPostEffectForGMapEvent(mapRef, props, handleDrag, ["onDragStart", "onDragEnd"]);
   return () => h("div", { ref: elementRef }, slots.default?.());
 });

package/src/components/MapProvider/MapProvider.tsx

@@ -1,10 +1,9 @@
-import { debounce } from "lodash-es";
-import { ON_CHANGE_CENTER_INTERVAL } from "../../hooks/useMapCenter";
-import { defineLagecySetup, defineSetup } from "../../types/helper";
+import type { SetMap } from "../../hooks/useHeycarMap";
+import { defineLagecySetup } from "../../types/helper";
 import { vec2lnglat } from "../../utils/transform";
 import { Amap, AmapProps } from "../Amap";
 import { AmapLoader } from "../AmapLoader";
-import { GampProps, Gmap } from "../Gmap";
+import { Gmap, GmapProps } from "../Gmap";
 import { GmapLoader, GmapLoaderProps } from "../GmapLoader";
 import { MapSupplierPayolad, provideMapSupplier, useMapSupplier } from "./useMapSupplier";
 
@@ -20,21 +19,25 @@ export const MapProvider = defineLagecySetup(function MapProvider(
 export interface HeycarMapProps
   extends Pick<GmapLoaderProps, "fallback" | "loading">,
     Pick<AmapProps, "center" | "zoom"> {
-  onChangeCenter?: (value: [number, number]) => any;
+  mapRef?: SetMap<AMap.Map> | SetMap<google.maps.Map>;
+  onDragEnd?: (value: [number, number]) => any;
 }
-export const HeycarMap = defineSetup(function HeycarMap(props: HeycarMapProps, { slots, emit }) {
+export const HeycarMap = defineLagecySetup(function HeycarMap(
+  props: HeycarMapProps,
+  { slots, emit }
+) {
   const payload = useMapSupplier();
-  const gmapDebouncedEmit = debounce<Required<GampProps>["onCenter_changed"]>(({ target }) => {
+  const gmapDebouncedEmit: GmapProps["onDragEnd"] = ({ target }) => {
     const { lng, lat } = target.getCenter() as google.maps.LatLng;
-    emit("changeCenter", [lng(), lat()]);
-  }, ON_CHANGE_CENTER_INTERVAL);
-  const amapDebounceEmit = debounce<Required<AmapProps>["onMapMove"]>(({ target }) => {
+    emit("dragEnd", [lng(), lat()]);
+  };
+  const amapDebounceEmit: AmapProps["onDragEnd"] = ({ target }) => {
     const { lng, lat } = target.getCenter();
-    emit("changeCenter", [lng, lat]);
-  }, ON_CHANGE_CENTER_INTERVAL);
+    emit("dragEnd", [lng, lat]);
+  };
   return () => {
     const { gmapKey, amapKey, amapSecret, amapServiceHost, supplier, gmapId } = payload;
-    const { fallback, loading, center, zoom } = props;
+    const { mapRef: setMap, fallback, loading, center, zoom } = props;
     const children = slots.default?.();
     switch (supplier) {
       case "gmap":
@@ -47,10 +50,11 @@ export const HeycarMap = defineSetup(function HeycarMap(props: HeycarMapProps, {
             fallback={fallback}
           >
             <Gmap
+              mapRef={setMap as SetMap<google.maps.Map>}
               mapId={gmapId}
               center={center ? vec2lnglat(center) : undefined}
               zoom={zoom}
-              onCenter_changed={gmapDebouncedEmit}
+              onDragEnd={gmapDebouncedEmit}
             >
               {children}
             </Gmap>
@@ -72,11 +76,16 @@ export const HeycarMap = defineSetup(function HeycarMap(props: HeycarMapProps, {
             loading={loading}
             fallback={fallback}
           >
-            <Amap center={center} zoom={zoom} onMapMove={amapDebounceEmit}>
+            <Amap
+              mapRef={setMap as SetMap<AMap.Map>}
+              center={center}
+              zoom={zoom}
+              onDragEnd={amapDebounceEmit}
+            >
               {children}
             </Amap>
           </AmapLoader>
         );
     }
   };
-});
+}).props(["center", "fallback", "loading", "mapRef", "zoom"]);