@heycar/heycars-map 0.7.6 → 0.7.7-animate2

package/dist/api/contants.d.ts

@@ -1,4 +1,5 @@
 import type { Point } from "../types/interface";
+export declare const MAX_ANIMATION_DISTANCE_VW = 100;
 export declare const BEIJIN_POINT: Point;
 export declare const ZINDEX_BUBBLE_LAYER = 50;
 export declare const ZINDEX_START_END_LOGO_LAYER = 40;

package/dist/hooks/useHeycarMap.d.ts

@@ -398,7 +398,7 @@ export declare const useHeycarAmap: () => {
         getEvents(): Record<string, any[]>;
     } | undefined>;
     mapElementRef: import("vue-demi").ShallowRef<HTMLElement | undefined>;
-    panTo: (value: [number, number]) => void | undefined;
+    panTo: (value: [number, number]) => Promise<void>;
     setMap: SetMap<{
         _outseaDataType: string;
         setCenter(center: [number, number] | AMap.LngLat, immediately?: boolean | undefined, duration?: number | undefined): void;
@@ -1200,7 +1200,7 @@ export declare const useHeycarMap: () => {
         getEvents(): Record<string, any[]>;
     } | undefined>;
     mapElementRef: import("vue-demi").ShallowRef<HTMLElement | undefined>;
-    panTo: (value: [number, number]) => void | undefined;
+    panTo: (value: [number, number]) => Promise<void>;
     setMap: SetMap<{
         _outseaDataType: string;
         setCenter(center: [number, number] | AMap.LngLat, immediately?: boolean | undefined, duration?: number | undefined): void;

package/dist/hooks/useMapLngLatToVw.d.ts

@@ -1,10 +1,19 @@
+/// <reference types="google.maps" />
+import type { ShallowRef } from "vue-demi";
 import type { Point } from "../types/interface";
-export declare const useAmapLngLatToVw: () => {
-    apiMapLngLatToVw: (point: Point) => [number, number];
+interface UseMapLngLatToVwProps<M> {
+    mapRef: ShallowRef<M | undefined>;
+}
+export declare const useAmapLngLatToVw: (props: UseMapLngLatToVwProps<AMap.Map>) => {
+    apiMapLngLatToVw: (point: Point) => number[];
+    apiMapDistanceVwOfPoints: (point1: Point, point2: Point) => number;
 };
-export declare const useGmapLngLatToVw: () => {
+export declare const useGmapLngLatToVw: (props: UseMapLngLatToVwProps<google.maps.Map>) => {
     apiMapLngLatToVw: (point: Point) => [number, number];
+    apiMapDistanceVwOfPoints: (point1: Point, point2: Point) => number;
 };
-export declare const useMapLngLatToVw: () => {
-    apiMapLngLatToVw: (point: Point) => [number, number];
+export declare const useMapLngLatToVw: (props: UseMapLngLatToVwProps<AMap.Map | google.maps.Map>) => {
+    apiMapLngLatToVw: (point: Point) => number[];
+    apiMapDistanceVwOfPoints: (point1: Point, point2: Point) => number;
 };
+export {};

package/dist/index.cjs

@@ -1983,6 +1983,54 @@ function detectWebGL() {
   }
   return "NOT_SUPPORTED";
 }
+const MAX_ANIMATION_DISTANCE_VW = 100;
+const BEIJIN_POINT = [116.2317, 39.5427];
+const ZINDEX_BUBBLE_LAYER = 50;
+const ZINDEX_START_END_LOGO_LAYER = 40;
+const ZINDEX_PLACE_LAYER = 30;
+const ZINDEX_CAR_LAYER = 21;
+const ZINDEX_PASSENGER_LAYER = 20;
+const useAmapLngLatToVw = (props) => {
+  const apiMapLngLatToVw = (point) => {
+    const amap2 = props.mapRef.value;
+    const sw = innerWidth;
+    const [x, y] = amap2 == null ? void 0 : amap2.lngLatToContainer(point).toArray();
+    return [100 * x / sw, 100 * y / sw];
+  };
+  const apiMapDistanceVwOfPoints = (point1, point2) => {
+    const [x1, y1] = apiMapLngLatToVw(point1);
+    const [x2, y2] = apiMapLngLatToVw(point2);
+    const result = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
+    console.log("distance = ", result);
+    return result;
+  };
+  return { apiMapLngLatToVw, apiMapDistanceVwOfPoints };
+};
+const useGmapLngLatToVw = (props) => {
+  const apiMapLngLatToVw = (point) => {
+    var _a, _b, _c;
+    const [lng, lat] = point;
+    const gmap2 = props.mapRef.value;
+    const sw = window.innerWidth;
+    const projection = gmap2 == null ? void 0 : gmap2.getProjection();
+    const worldCoordinate = projection == null ? void 0 : projection.fromLatLngToPoint({ lng, lat });
+    const x = (_a = worldCoordinate == null ? void 0 : worldCoordinate.x) != null ? _a : 0;
+    const y = (_b = worldCoordinate == null ? void 0 : worldCoordinate.y) != null ? _b : 0;
+    const zoom = (_c = gmap2 == null ? void 0 : gmap2.getZoom()) != null ? _c : 0;
+    const scale = 2 ** zoom;
+    return [100 * x * scale / sw, 100 * y * scale / sw];
+  };
+  const apiMapDistanceVwOfPoints = (point1, point2) => {
+    const [x1, y1] = apiMapLngLatToVw(point1);
+    const [x2, y2] = apiMapLngLatToVw(point2);
+    return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
+  };
+  return { apiMapLngLatToVw, apiMapDistanceVwOfPoints };
+};
+const useMapLngLatToVw = (props) => {
+  const { supplier } = useMapSupplier();
+  return supplier === "gmap" ? useGmapLngLatToVw(props) : useAmapLngLatToVw(props);
+};
 const ZOOM_WHEEL_RATIO = -135e-5;
 const useAmapWheelZoomCenter = (props) => {
   const { mapRef, enableRef } = props;
@@ -1991,7 +2039,7 @@ const useAmapWheelZoomCenter = (props) => {
     const { deltaY } = e;
     const prevZoom = (_b = (_a = mapRef.value) == null ? void 0 : _a.getZoom()) != null ? _b : 0;
     const zoom = prevZoom + ZOOM_WHEEL_RATIO * deltaY;
-    (_c = mapRef.value) == null ? void 0 : _c.setZoom(zoom);
+    (_c = mapRef.value) == null ? void 0 : _c.setZoom(zoom, true);
   };
   Vue.watch(
     () => enableRef == null ? void 0 : enableRef.value,
@@ -2051,6 +2099,7 @@ const Amap = defineSetup(function Amap2(props, { slots, emit }) {
   const elementRef = Vue.shallowRef();
   const mapRef = Vue.shallowRef();
   provideAmap(mapRef);
+  const { apiMapDistanceVwOfPoints } = useMapLngLatToVw({ mapRef });
   useAmapWheelZoomCenter({ mapRef, enableRef: Vue.computed(() => !!props.touchZoomCenter) });
   Vue.watchPostEffect(() => {
     if (mapRef.value || !elementRef.value)
@@ -2071,10 +2120,28 @@ const Amap = defineSetup(function Amap2(props, { slots, emit }) {
       (_a = mapRef.value) == null ? void 0 : _a.setStatus(statusOptions2);
     }
   );
+  watchNoneImmediatePostEffectForDeepOption(
+    () => props.center,
+    (center, prevCenter) => {
+      const map = mapRef.value;
+      if (!center || !map)
+        return;
+      const immediately = prevCenter ? apiMapDistanceVwOfPoints(center, prevCenter) > MAX_ANIMATION_DISTANCE_VW : true;
+      map.setCenter(center, immediately);
+    }
+  );
+  Vue.watch(
+    () => props.zoom,
+    (zoom) => {
+      const map = mapRef.value;
+      if (!zoom || !map)
+        return;
+      map.setZoom(zoom, true);
+    },
+    { immediate: false, flush: "post" }
+  );
   watchNoneImmediatePostEffectForMapProperty(mapRef, props, [
-    { name: "center", defaultValue: [0, 0] },
     { name: "zooms", defaultValue: [2, 20] },
-    { name: "zoom", defaultValue: 0 },
     { name: "layers", defaultValue: [] },
     { name: "limitBounds", defaultValue: [] },
     { name: "rotation", defaultValue: 0 },
@@ -3007,12 +3074,6 @@ const KeyedFitView = defineSetup(function KeyedFitView2(props, {
     return Vue.h("div", [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
   };
 });
-const BEIJIN_POINT = [116.2317, 39.5427];
-const ZINDEX_BUBBLE_LAYER = 50;
-const ZINDEX_START_END_LOGO_LAYER = 40;
-const ZINDEX_PLACE_LAYER = 30;
-const ZINDEX_CAR_LAYER = 21;
-const ZINDEX_PASSENGER_LAYER = 20;
 const imgEndPoint = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IHgxPSI3Mi4zMzklIiB5MT0iNTAlIiB4Mj0iMCUiIHkyPSI1MCUiIGlkPSJwcmVmaXhfX2EiPjxzdG9wIHN0b3AtY29sb3I9IiNGRjg0NDciIG9mZnNldD0iMCUiLz48c3RvcCBzdG9wLWNvbG9yPSIjRkY4QjRBIiBvZmZzZXQ9IjUwLjU5NiUiLz48c3RvcCBzdG9wLWNvbG9yPSIjRkZBOTVBIiBvZmZzZXQ9IjEwMCUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xMiAzMC4yMTVjMi4xMzQgMCAzLjg2My0uODkzIDMuODYzLTEuOTk1IDAtMS4xLTEuNzMtMS45OTQtMy44NjMtMS45OTQtMi4xMzQgMC0zLjg2My44OTMtMy44NjMgMS45OTQgMCAxLjEwMiAxLjczIDEuOTk1IDMuODYzIDEuOTk1eiIgZmlsbC1vcGFjaXR5PSIuNSIgZmlsbD0iIzQzNDg1QSIvPjxwYXRoIGQ9Ik0xMSAyNy4wMDZjMi4xMjggMC0uOS0zLjc0MyA1LjYyMS02LjY0M0MxOS44NDIgMTguNDUzIDIyIDE0Ljk1MyAyMiAxMC45NSAyMiA0LjkwMiAxNy4wNzUgMCAxMSAwUzAgNC45MDIgMCAxMC45NWMwIDMuOTE4IDIuMDY4IDcuMzU2IDUuMTc3IDkuMjlDMTEuNzUgMjMuMjg0IDkuMDYgMjcuMDA3IDExIDI3LjAwN3oiIHN0cm9rZT0iI0ZGRiIgZmlsbD0idXJsKCNwcmVmaXhfX2EpIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxIDEuMjE1KSIvPjx0ZXh0IGZvbnQtZmFtaWx5PSJQaW5nRmFuZ1NDLVNlbWlib2xkLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZm9udC13ZWlnaHQ9IjUwMCIgZmlsbD0iI0ZGRiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxLjIxNSkiPjx0c3BhbiB4PSI1IiB5PSIxNS40NDkiPue7iDwvdHNwYW4+PC90ZXh0PjwvZz48L3N2Zz4=";
 const imgStartPoint = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IHgxPSIwJSIgeTE9IjUwJSIgeDI9IjEyOS41OTklIiB5Mj0iNTAlIiBpZD0icHJlZml4X19hIj48c3RvcCBzdG9wLWNvbG9yPSIjMzZBOEZGIiBvZmZzZXQ9IjAlIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzQ4NzFGMSIgb2Zmc2V0PSIxMDAlIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTIgMzAuMjE1YzEuOTUgMCAzLjUzMi0uODE2IDMuNTMyLTEuODIzIDAtMS4wMDctMS41ODEtMS44MjMtMy41MzItMS44MjMtMS45NSAwLTMuNTMyLjgxNi0zLjUzMiAxLjgyMyAwIDEuMDA3IDEuNTgxIDEuODIzIDMuNTMyIDEuODIzeiIgZmlsbC1vcGFjaXR5PSIuNSIgZmlsbD0iIzQzNDg1QSIvPjxwYXRoIGQ9Ik0xMSAyN2MyLjEyOCAwLS45LTMuNzQyIDUuNjIxLTYuNjQxIDMuMjIxLTEuOTEgNS4zNzktNS40MSA1LjM3OS05LjQxMkMyMiA0LjkwMSAxNy4wNzUgMCAxMSAwUzAgNC45MDEgMCAxMC45NDdjMCAzLjkxOCAyLjA2OCA3LjM1NSA1LjE3NyA5LjI5QzExLjc1IDIzLjI3NyA5LjA2IDI3IDExIDI3eiIgc3Ryb2tlPSIjRkZGIiBmaWxsPSJ1cmwoI3ByZWZpeF9fYSkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMS4yMTUpIi8+PHRleHQgZm9udC1mYW1pbHk9IlBpbmdGYW5nU0MtU2VtaWJvbGQsIFBpbmdGYW5nIFNDIiBmb250LXNpemU9IjEyIiBmb250LXdlaWdodD0iNTAwIiBmaWxsPSIjRkZGIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxIDEuMjE1KSI+PHRzcGFuIHg9IjUiIHk9IjE1LjYyNCI+6LW3PC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg==";
 const StartEndPoint_css_ts_vanilla = "";
@@ -3029,12 +3090,12 @@ const AStartEndPoint = defineSetup(function AStartEndPoint2(props) {
     const icon = props.type === "start" ? imgStartPoint : imgEndPoint;
     const descriptionRow = !props.description ? "" : decodeAsterisk(props.description).map((item) => item.type === "normal" ? item.value : `<span class="${pointInfoBoxEmphasize$1}">${item.value}</span>`).join("");
     if (!props.description && !props.title)
-      return `<img src="${icon}" class="${pointIcon({
+      return `<img class="AStartEndPoint ${pointIcon({
         type: props.type
-      })}">`;
+      })}" src="${icon}">`;
     if (!props.description)
       return `
-        <div class="${pointLayout$1}">
+        <div class="AStartEndPoint ${pointLayout$1}">
           <div class="${pointSingleInfoBox$1}">
             <div class="${pointInfoBoxTitle}">${props.title}</div>
           </div>
@@ -3044,7 +3105,7 @@ const AStartEndPoint = defineSetup(function AStartEndPoint2(props) {
         </div>
       `;
     return `
-        <div class="${pointLayout$1}">
+        <div class="AStartEndPoint ${pointLayout$1}">
           <div class="${pointInfoBox}">
             <div class="${pointInfoBoxTitle}">${(_a = props.title) != null ? _a : ""}</div>
             <div class="${pointInfoBoxDescription}">${descriptionRow}</div>
@@ -3072,14 +3133,14 @@ const GStartEndPoint = defineSetup(function GStartEndPoint2(props) {
     const descriptionRow = !props.description ? "" : decodeAsterisk(props.description).map((item) => item.type === "normal" ? item.value : `<span class="${pointInfoBoxEmphasize$1}">${item.value}</span>`).join("");
     if (!props.description && !props.title)
       return createDom("img", {
-        class: pointIcon({
+        class: `GStartEndPoint ${pointIcon({
           type: props.type
-        }),
+        })}`,
         src: icon
       });
     if (!props.description)
       return createDom("div", {
-        class: pointLayout$1
+        class: `GStartEndPoint ${pointLayout$1}`
       }, `
           <div class="${pointSingleInfoBox$1}">
             <div class="${pointInfoBoxTitle}">${props.title}</div>
@@ -3089,7 +3150,7 @@ const GStartEndPoint = defineSetup(function GStartEndPoint2(props) {
       })}">
         `);
     return createDom("div", {
-      class: pointLayout$1
+      class: `GStartEndPoint ${pointLayout$1}`
     }, `
         <div class="${pointInfoBox}">
           <div class="${pointInfoBoxTitle}">${(_a = props.title) != null ? _a : ""}</div>
@@ -3262,6 +3323,20 @@ const watchVisibilityState = () => {
   document.addEventListener("visibilitychange", handleVisibilityChange);
   return { visibilityStateRef, unwatchVisibilityState };
 };
+const isPlace = (place) => {
+  return place.lng !== void 0 && place.lat !== void 0;
+};
+const sleep = (milliSeconds) => new Promise((resolve) => setTimeout(resolve, milliSeconds));
+const assertPoint = (point) => {
+  if (Array.isArray(point) && point.length === 2 && typeof point[0] === "number" && typeof point[1] === "number")
+    return;
+  throw new Error(`Assertion Error: expect type [number, number], actual is ${point}`);
+};
+const assertAngle = (angle) => {
+  if (typeof angle === "number" || typeof angle === "undefined")
+    return;
+  throw new Error(`Assertion Error: expect type number | undefined, actual is ${angle}`);
+};
 const WX_GET_LOCATION_INTERVAL_STILL = 10 * 1e3;
 const WX_GET_LOCATION_INTERVAL_SLOW = 3 * 1e3;
 const WX_GET_LOCATION_INTERVAL_FAST = 1 * 1e3;
@@ -3269,7 +3344,6 @@ const takeIsForceBrowserGeo = () => {
   const searchParam = new URLSearchParams(location.search);
   return searchParam.has(`force-browser-geo`);
 };
-const sleep$1 = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));
 const wxReady = () => new Promise((resolve, reject) => {
   wx.ready(resolve);
   wx.error(reject);
@@ -3293,7 +3367,7 @@ function wechatWatchPosition(onSuccess, onError, option) {
     await wxReady();
     do {
       if (visibilityStateRef.value === "hidden") {
-        await sleep$1(WX_GET_LOCATION_INTERVAL_FAST);
+        await sleep(WX_GET_LOCATION_INTERVAL_FAST);
         continue;
       }
       const geoPosition = await new Promise((resolve) => {
@@ -3334,7 +3408,7 @@ function wechatWatchPosition(onSuccess, onError, option) {
       if (geoPosition && !isGeoPositionEqual(geoPosition, prevGeoPosition))
         onSuccess(geoPosition);
       prevGeoPosition = geoPosition;
-      await sleep$1(interval);
+      await sleep(interval);
     } while (enable);
   };
   startWatch();
@@ -3358,20 +3432,6 @@ function compatibleWathPosition(onSuccess, onError, option) {
     }
   }
 }
-const isPlace = (place) => {
-  return place.lng !== void 0 && place.lat !== void 0;
-};
-const sleep = (milliSeconds) => new Promise((resolve) => setTimeout(resolve, milliSeconds));
-const assertPoint = (point) => {
-  if (Array.isArray(point) && point.length === 2 && typeof point[0] === "number" && typeof point[1] === "number")
-    return;
-  throw new Error(`Assertion Error: expect type [number, number], actual is ${point}`);
-};
-const assertAngle = (angle) => {
-  if (typeof angle === "number" || typeof angle === "undefined")
-    return;
-  throw new Error(`Assertion Error: expect type number | undefined, actual is ${angle}`);
-};
 class SingleGeoWatch {
   constructor(option) {
     __publicField(this, "id", 0);
@@ -3511,16 +3571,33 @@ const useGeoLocation = (props) => {
     geoReady: readyRef
   };
 };
+const MAX_AMAP_PAN_TO_ANIMATE_DURATION = 500;
+const MIN_AMAP_PAN_TO_ANIMATE_DURATION = 100;
 const useHeycarAmap = () => {
   const amapRef = Vue.shallowRef();
   const amapElementRef = Vue.shallowRef();
+  const { apiMapDistanceVwOfPoints } = useMapLngLatToVw({ mapRef: amapRef });
   const setMap = (map) => {
     amapRef.value = map;
     amapElementRef.value = map.getContainer();
   };
-  const panTo = (value) => {
-    var _a;
-    return (_a = amapRef == null ? void 0 : amapRef.value) == null ? void 0 : _a.panTo(value);
+  const panTo = async (value) => {
+    const amap2 = amapRef.value;
+    if (!amap2)
+      return;
+    const { lng, lat } = amap2.getCenter();
+    const distanceVw = apiMapDistanceVwOfPoints(value, [lng, lat]);
+    const shouldAnimate = distanceVw < MAX_ANIMATION_DISTANCE_VW;
+    if (shouldAnimate) {
+      const duration = Math.max(
+        MIN_AMAP_PAN_TO_ANIMATE_DURATION,
+        Math.floor(MAX_AMAP_PAN_TO_ANIMATE_DURATION * distanceVw / MAX_ANIMATION_DISTANCE_VW)
+      );
+      amap2.panTo(value, duration);
+      await sleep(duration);
+    } else {
+      amap2.setCenter(value, true);
+    }
   };
   return { mapRef: amapRef, mapElementRef: amapElementRef, panTo, setMap };
 };
@@ -5391,7 +5468,7 @@ const useAmapZoom = (props) => {
   const setZoom = (v) => {
     var _a2;
     zoomRef.value = v;
-    (_a2 = mapRef.value) == null ? void 0 : _a2.setZoom(v);
+    (_a2 = mapRef.value) == null ? void 0 : _a2.setZoom(v, true);
   };
   const handleZoomEnd = (_, { target }) => {
     const zoom = target.getZoom();
@@ -5445,9 +5522,9 @@ const APassengerCircle = defineSetup(function APassengerCircle2(props) {
     const style2 = angle === void 0 ? "" : `transform: rotate(var(${angle}))`;
     const type = size === "large" ? angle === void 0 ? "large" : "largeArrow" : angle === void 0 ? "small" : "smallArrow";
     return `
-        <img src="${src}" class="${passengerCircle({
+        <img class="APassengerCircle ${passengerCircle({
       type
-    })}" style="${style2}">
+    })}" style="${style2}" src="${src}">
       `;
   });
   return () => {
@@ -5472,9 +5549,9 @@ const GPassengerCircle = defineSetup(function GPassengerCircle2(props) {
     const style2 = angle === void 0 ? "" : `transform: rotate(var(${angle}))`;
     const type = size === "large" ? angle === void 0 ? "large" : "largeArrow" : angle === void 0 ? "small" : "smallArrow";
     return createDom("img", {
-      class: passengerCircle({
+      class: `GPassengerCircle ${passengerCircle({
         type
-      }),
+      })}`,
       src,
       style: style2
     });
@@ -5528,42 +5605,15 @@ const ConditionalFittablePassengerCircle = defineSetup(function ConditionalFitta
     })]);
   };
 });
-const useAmapLngLatToVw = () => {
-  const amap2 = useAmap();
-  const apiMapLngLatToVw = (point) => {
-    var _a;
-    return (_a = amap2 == null ? void 0 : amap2.value) == null ? void 0 : _a.lngLatToContainer(point).toArray();
-  };
-  return { apiMapLngLatToVw };
-};
-const useGmapLngLatToVw = () => {
-  const gmap2 = useGmap();
-  const apiMapLngLatToVw = (point) => {
-    var _a, _b, _c, _d, _e;
-    const [lng, lat] = point;
-    const projection = (_a = gmap2 == null ? void 0 : gmap2.value) == null ? void 0 : _a.getProjection();
-    const worldCoordinate = projection == null ? void 0 : projection.fromLatLngToPoint({ lng, lat });
-    const x = (_b = worldCoordinate == null ? void 0 : worldCoordinate.x) != null ? _b : 0;
-    const y = (_c = worldCoordinate == null ? void 0 : worldCoordinate.y) != null ? _c : 0;
-    const zoom = (_e = (_d = gmap2 == null ? void 0 : gmap2.value) == null ? void 0 : _d.getZoom()) != null ? _e : 0;
-    const scale = 2 ** zoom;
-    return [x * scale, y * scale];
-  };
-  return { apiMapLngLatToVw };
-};
-const useMapLngLatToVw = () => {
-  const { supplier } = useMapSupplier();
-  return supplier === "gmap" ? useGmapLngLatToVw() : useAmapLngLatToVw();
-};
 const reverse = (direction) => direction === "left" ? "right" : "left";
 const usePointsLabelDirection = (props) => {
   const { widthLimit, heightLimit } = props;
-  const { apiMapLngLatToVw } = useMapLngLatToVw();
+  const mapRef = useMap();
+  const { apiMapLngLatToVw } = useMapLngLatToVw({ mapRef });
   const diffVw = (from, to) => {
-    const vw = 100 / window.innerWidth;
     const [x1, y1] = apiMapLngLatToVw(from);
     const [x2, y2] = apiMapLngLatToVw(to);
-    return [(x2 - x1) * vw, (y2 - y1) * vw];
+    return [x2 - x1, y2 - y1];
   };
   const directionsRef = Vue.ref(Array(props.places.length).fill("right"));
   watchEffectForDeepOption(
@@ -5631,7 +5681,7 @@ const APlaceCircle = defineSetup(function APlaceCircle2(props, {
       hideIcon = false
     } = props;
     return `
-        <div class="${placeCircleLayout({
+        <div class="APlaceCircle ${placeCircleLayout({
       textAlign: textAlignRef.value
     })}">
           <img class="${placeIcon({
@@ -5647,7 +5697,7 @@ const APlaceCircle = defineSetup(function APlaceCircle2(props, {
     const {
       hideIcon = false
     } = props;
-    return `<img class="${placeIcon({
+    return `<img class="APlaceCircle ${placeIcon({
       hideIcon
     })} ${amapPlaceIconLayout({
       textAlign: textAlignRef.value
@@ -5682,7 +5732,7 @@ const GPlaceCircle = defineSetup(function GPlaceCircle2(props, {
       hideIcon = false
     } = props;
     return createDom("div", {
-      class: `${placeCircleLayout({
+      class: `GPlaceCircle ${placeCircleLayout({
         textAlign: textAlignRef.value
       })} ${gmapPlaceIconLayout({
         textAlign: textAlignRef.value
@@ -5699,7 +5749,7 @@ const GPlaceCircle = defineSetup(function GPlaceCircle2(props, {
       hideIcon = false
     } = props;
     return createDom("img", {
-      class: `${placeIcon({
+      class: `GPlaceCircle ${placeIcon({
         hideIcon
       })} ${gmapPlaceIconLayout({
         textAlign: textAlignRef.value
@@ -5762,27 +5812,18 @@ const PickupPoints = defineSetup(function PickupPoints2(props, {
     })]);
   };
 });
-const useFirstWorkflowRecomendLoading = () => {
-  const isFirstWorkflowRecomendLoadingRef = Vue.ref(true);
-  const completeFirstWorkflowRecomend = () => {
-    if (!isFirstWorkflowRecomendLoadingRef.value)
-      return;
-    isFirstWorkflowRecomendLoadingRef.value = false;
-  };
-  return { isFirstWorkflowRecomendLoadingRef, completeFirstWorkflowRecomend };
-};
 const RECOMMEND_PLACE_DRAG_LIMIT = 10;
 const RECOMMEND_PLACE_LARGE_LIMIT = 100;
 const RECOMMEND_PLACE_ZOOM_MIN = 13;
 const DEFAULT_PLACE_NAME = "当前位置";
-const DEFAULT_ZOOM = 8;
-const READY_ZOOM = 17;
+const DEFAULT_ZOOM = 17;
 const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlaceMap2(props, {
   emit,
   slots
 }) {
   var _a, _b;
   const {
+    geoLoadingTitle,
     geoDefaultPosition,
     getRecomendPlace,
     getDefaultCenterPlace,
@@ -5799,21 +5840,16 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
     readyPromise
   } = useMapSupplier();
   const {
-    zoomRef,
-    setZoom
+    zoomRef
   } = useMapZoom({
     mapRef,
     defaultValue: DEFAULT_ZOOM
   });
-  const {
-    isFirstWorkflowRecomendLoadingRef,
-    completeFirstWorkflowRecomend
-  } = useFirstWorkflowRecomendLoading();
   const centerPlace = Vue.reactive({
     lng: (_a = geoDefaultPosition == null ? void 0 : geoDefaultPosition[0]) != null ? _a : 0,
     lat: (_b = geoDefaultPosition == null ? void 0 : geoDefaultPosition[1]) != null ? _b : 0,
-    name: "",
-    displayName: ""
+    name: geoLoadingTitle,
+    displayName: geoLoadingTitle
   });
   const centerPoint = Vue.computed(() => [centerPlace.lng, centerPlace.lat]);
   const centerSource = {
@@ -5834,14 +5870,17 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
       ...place
     });
     updatePlaceCandidates(place);
-    await pipeDefer(setZoom)(READY_ZOOM);
   };
-  const setCenterByPlace = (place) => {
+  const panToCenterByPlace = async (place) => {
     centerSource.source = "api";
+    await panTo(place2point(place));
     centerPlace.lng = place.lng;
     centerPlace.lat = place.lat;
     centerPlace.name = place.name;
     centerPlace.displayName = place.displayName;
+    emit("changePlace", {
+      ...place
+    });
   };
   const defaultCenterPlacePromise = new Promise((resolve) => {
     getDefaultCenterPlace().then(resolve).catch(() => resolve(void 0));
@@ -5872,9 +5911,7 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
         await setCenterPlaceByUserSpecified(place);
       } else {
         updatePlace(value.position);
-        await pipeDefer(setZoom)(READY_ZOOM);
       }
-      completeFirstWorkflowRecomend();
     },
     onChange: (v) => emit("changeGeoLocation", v),
     onError: (e) => {
@@ -5931,14 +5968,12 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
     },
     onChange: async (place) => {
       centerSource.source = "recomend";
+      if (isPlaceEqual(place, centerPlace))
+        panTo(place2point(place));
       Object.assign(centerPlace, {
         ...place
       });
-      panTo(place2point(place));
       emit("changeRecomandPlace", place);
-      if (isFirstWorkflowRecomendLoadingRef.value)
-        await pipeDefer(setZoom)(READY_ZOOM);
-      completeFirstWorkflowRecomend();
     }
   });
   Vue.watchEffect(() => {
@@ -5951,11 +5986,11 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
   });
   return () => {
     const {
-      geoLoadingTitle,
+      geoLoadingTitle: geoLoadingTitle2,
       recomendDescription,
       unavailableTitle
     } = props;
-    const title = geoLoading.value ? geoLoadingTitle : !availableRef.value ? unavailableTitle : centerPlace.displayName;
+    const title = geoLoading.value ? geoLoadingTitle2 : !availableRef.value ? unavailableTitle : centerPlace.displayName;
     const description = !availableRef.value ? void 0 : isElectedRef.value ? recomendDescription : void 0;
     return Vue.h(HeycarMap, {
       "attrs": {
@@ -5977,9 +6012,9 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
         "renderLabel": (place) => isPlaceEqual(place, centerPlace) ? void 0 : place.displayName
       },
       "on": {
-        "click": setCenterByPlace
+        "click": panToCenterByPlace
       }
-    }), geoLoading.value || isFirstWorkflowRecomendLoadingRef.value ? null : Vue.h(AbsoluteAddressBox, {
+    }), geoLoading.value ? null : Vue.h(AbsoluteAddressBox, {
       "attrs": {
         "title": title,
         "description": description,
@@ -6038,10 +6073,10 @@ const ATaxiCar = defineSetup(function ATaxiCar2(props) {
     const carStyle = `transform:rotate(${(_a = props.angle) != null ? _a : 0}deg)`;
     if (!props.title)
       return {
-        img: `<img src="${imgTaxicar}" class="${carIcon}" style="${carStyle}">`
+        img: `<img class="ATaxiCar ${carIcon}" src="${imgTaxicar}" style="${carStyle}">`
       };
     const content = (hide$1) => `
-      <div class="${pointLayout}">
+      <div class="ATaxiCar ${pointLayout}">
         <div class="${pointSingleInfoBox} ${hide({
       hide: !hide$1
     })}">
@@ -6083,13 +6118,13 @@ const GTaxiCar = defineSetup(function GTaxiCar2(props) {
     if (!props.title)
       return {
         img: createDom("img", {
-          class: carIcon,
+          class: `GTaxiCar ${carIcon}`,
           src: imgTaxicar,
           style: carStyle
         })
       };
     const content = (hide$1) => createDom("div", {
-      class: pointLayout
+      class: `GTaxiCar ${pointLayout}`
     }, `
         <div class="${pointSingleInfoBox} ${hide({
       hide: !hide$1
@@ -6314,8 +6349,8 @@ const WaveCircle_css_ts_vanilla = "";
 var secondCircle = "rrvp0y3";
 var waveCircle = "rrvp0y2";
 const AWaveCircle = defineSetup(function AWaveCircle2(props) {
-  const contentRef = Vue.computed(() => `<img src="${imgWaveCircle}" class="${waveCircle}">`);
-  const contentAnotherRef = Vue.computed(() => `<img src="${imgWaveCircle}" class="${waveCircle} ${secondCircle}">`);
+  const contentRef = Vue.computed(() => `<img class="AWaveCircle ${waveCircle}" src="${imgWaveCircle}">`);
+  const contentAnotherRef = Vue.computed(() => `<img class="AWaveCircle ${waveCircle} ${secondCircle}" src="${imgWaveCircle}">`);
   return () => Vue.h("div", [Vue.h(AmapMarker, {
     "attrs": {
       "position": props.position,
@@ -6332,11 +6367,11 @@ const AWaveCircle = defineSetup(function AWaveCircle2(props) {
 });
 const GWaveCircle = defineSetup(function GWaveCircle2(props) {
   const contentRef = Vue.computed(() => createDom("img", {
-    class: waveCircle,
+    class: `GWaveCircle ${waveCircle}`,
     src: imgWaveCircle
   }));
   const contentAnotherRef = Vue.computed(() => createDom("img", {
-    class: `${waveCircle} ${secondCircle}`,
+    class: `GWaveCircle ${waveCircle} ${secondCircle}`,
     src: imgWaveCircle
   }));
   return () => {

package/dist/index.js

@@ -1981,6 +1981,54 @@ function detectWebGL() {
   }
   return "NOT_SUPPORTED";
 }
+const MAX_ANIMATION_DISTANCE_VW = 100;
+const BEIJIN_POINT = [116.2317, 39.5427];
+const ZINDEX_BUBBLE_LAYER = 50;
+const ZINDEX_START_END_LOGO_LAYER = 40;
+const ZINDEX_PLACE_LAYER = 30;
+const ZINDEX_CAR_LAYER = 21;
+const ZINDEX_PASSENGER_LAYER = 20;
+const useAmapLngLatToVw = (props) => {
+  const apiMapLngLatToVw = (point) => {
+    const amap2 = props.mapRef.value;
+    const sw = innerWidth;
+    const [x, y] = amap2 == null ? void 0 : amap2.lngLatToContainer(point).toArray();
+    return [100 * x / sw, 100 * y / sw];
+  };
+  const apiMapDistanceVwOfPoints = (point1, point2) => {
+    const [x1, y1] = apiMapLngLatToVw(point1);
+    const [x2, y2] = apiMapLngLatToVw(point2);
+    const result = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
+    console.log("distance = ", result);
+    return result;
+  };
+  return { apiMapLngLatToVw, apiMapDistanceVwOfPoints };
+};
+const useGmapLngLatToVw = (props) => {
+  const apiMapLngLatToVw = (point) => {
+    var _a, _b, _c;
+    const [lng, lat] = point;
+    const gmap2 = props.mapRef.value;
+    const sw = window.innerWidth;
+    const projection = gmap2 == null ? void 0 : gmap2.getProjection();
+    const worldCoordinate = projection == null ? void 0 : projection.fromLatLngToPoint({ lng, lat });
+    const x = (_a = worldCoordinate == null ? void 0 : worldCoordinate.x) != null ? _a : 0;
+    const y = (_b = worldCoordinate == null ? void 0 : worldCoordinate.y) != null ? _b : 0;
+    const zoom = (_c = gmap2 == null ? void 0 : gmap2.getZoom()) != null ? _c : 0;
+    const scale = 2 ** zoom;
+    return [100 * x * scale / sw, 100 * y * scale / sw];
+  };
+  const apiMapDistanceVwOfPoints = (point1, point2) => {
+    const [x1, y1] = apiMapLngLatToVw(point1);
+    const [x2, y2] = apiMapLngLatToVw(point2);
+    return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
+  };
+  return { apiMapLngLatToVw, apiMapDistanceVwOfPoints };
+};
+const useMapLngLatToVw = (props) => {
+  const { supplier } = useMapSupplier();
+  return supplier === "gmap" ? useGmapLngLatToVw(props) : useAmapLngLatToVw(props);
+};
 const ZOOM_WHEEL_RATIO = -135e-5;
 const useAmapWheelZoomCenter = (props) => {
   const { mapRef, enableRef } = props;
@@ -1989,7 +2037,7 @@ const useAmapWheelZoomCenter = (props) => {
     const { deltaY } = e;
     const prevZoom = (_b = (_a = mapRef.value) == null ? void 0 : _a.getZoom()) != null ? _b : 0;
     const zoom = prevZoom + ZOOM_WHEEL_RATIO * deltaY;
-    (_c = mapRef.value) == null ? void 0 : _c.setZoom(zoom);
+    (_c = mapRef.value) == null ? void 0 : _c.setZoom(zoom, true);
   };
   watch(
     () => enableRef == null ? void 0 : enableRef.value,
@@ -2049,6 +2097,7 @@ const Amap = defineSetup(function Amap2(props, { slots, emit }) {
   const elementRef = shallowRef();
   const mapRef = shallowRef();
   provideAmap(mapRef);
+  const { apiMapDistanceVwOfPoints } = useMapLngLatToVw({ mapRef });
   useAmapWheelZoomCenter({ mapRef, enableRef: computed(() => !!props.touchZoomCenter) });
   watchPostEffect(() => {
     if (mapRef.value || !elementRef.value)
@@ -2069,10 +2118,28 @@ const Amap = defineSetup(function Amap2(props, { slots, emit }) {
       (_a = mapRef.value) == null ? void 0 : _a.setStatus(statusOptions2);
     }
   );
+  watchNoneImmediatePostEffectForDeepOption(
+    () => props.center,
+    (center, prevCenter) => {
+      const map = mapRef.value;
+      if (!center || !map)
+        return;
+      const immediately = prevCenter ? apiMapDistanceVwOfPoints(center, prevCenter) > MAX_ANIMATION_DISTANCE_VW : true;
+      map.setCenter(center, immediately);
+    }
+  );
+  watch(
+    () => props.zoom,
+    (zoom) => {
+      const map = mapRef.value;
+      if (!zoom || !map)
+        return;
+      map.setZoom(zoom, true);
+    },
+    { immediate: false, flush: "post" }
+  );
   watchNoneImmediatePostEffectForMapProperty(mapRef, props, [
-    { name: "center", defaultValue: [0, 0] },
     { name: "zooms", defaultValue: [2, 20] },
-    { name: "zoom", defaultValue: 0 },
     { name: "layers", defaultValue: [] },
     { name: "limitBounds", defaultValue: [] },
     { name: "rotation", defaultValue: 0 },
@@ -3005,12 +3072,6 @@ const KeyedFitView = defineSetup(function KeyedFitView2(props, {
     return h("div", [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
   };
 });
-const BEIJIN_POINT = [116.2317, 39.5427];
-const ZINDEX_BUBBLE_LAYER = 50;
-const ZINDEX_START_END_LOGO_LAYER = 40;
-const ZINDEX_PLACE_LAYER = 30;
-const ZINDEX_CAR_LAYER = 21;
-const ZINDEX_PASSENGER_LAYER = 20;
 const imgEndPoint = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IHgxPSI3Mi4zMzklIiB5MT0iNTAlIiB4Mj0iMCUiIHkyPSI1MCUiIGlkPSJwcmVmaXhfX2EiPjxzdG9wIHN0b3AtY29sb3I9IiNGRjg0NDciIG9mZnNldD0iMCUiLz48c3RvcCBzdG9wLWNvbG9yPSIjRkY4QjRBIiBvZmZzZXQ9IjUwLjU5NiUiLz48c3RvcCBzdG9wLWNvbG9yPSIjRkZBOTVBIiBvZmZzZXQ9IjEwMCUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xMiAzMC4yMTVjMi4xMzQgMCAzLjg2My0uODkzIDMuODYzLTEuOTk1IDAtMS4xLTEuNzMtMS45OTQtMy44NjMtMS45OTQtMi4xMzQgMC0zLjg2My44OTMtMy44NjMgMS45OTQgMCAxLjEwMiAxLjczIDEuOTk1IDMuODYzIDEuOTk1eiIgZmlsbC1vcGFjaXR5PSIuNSIgZmlsbD0iIzQzNDg1QSIvPjxwYXRoIGQ9Ik0xMSAyNy4wMDZjMi4xMjggMC0uOS0zLjc0MyA1LjYyMS02LjY0M0MxOS44NDIgMTguNDUzIDIyIDE0Ljk1MyAyMiAxMC45NSAyMiA0LjkwMiAxNy4wNzUgMCAxMSAwUzAgNC45MDIgMCAxMC45NWMwIDMuOTE4IDIuMDY4IDcuMzU2IDUuMTc3IDkuMjlDMTEuNzUgMjMuMjg0IDkuMDYgMjcuMDA3IDExIDI3LjAwN3oiIHN0cm9rZT0iI0ZGRiIgZmlsbD0idXJsKCNwcmVmaXhfX2EpIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxIDEuMjE1KSIvPjx0ZXh0IGZvbnQtZmFtaWx5PSJQaW5nRmFuZ1NDLVNlbWlib2xkLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZm9udC13ZWlnaHQ9IjUwMCIgZmlsbD0iI0ZGRiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxLjIxNSkiPjx0c3BhbiB4PSI1IiB5PSIxNS40NDkiPue7iDwvdHNwYW4+PC90ZXh0PjwvZz48L3N2Zz4=";
 const imgStartPoint = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IHgxPSIwJSIgeTE9IjUwJSIgeDI9IjEyOS41OTklIiB5Mj0iNTAlIiBpZD0icHJlZml4X19hIj48c3RvcCBzdG9wLWNvbG9yPSIjMzZBOEZGIiBvZmZzZXQ9IjAlIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzQ4NzFGMSIgb2Zmc2V0PSIxMDAlIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTIgMzAuMjE1YzEuOTUgMCAzLjUzMi0uODE2IDMuNTMyLTEuODIzIDAtMS4wMDctMS41ODEtMS44MjMtMy41MzItMS44MjMtMS45NSAwLTMuNTMyLjgxNi0zLjUzMiAxLjgyMyAwIDEuMDA3IDEuNTgxIDEuODIzIDMuNTMyIDEuODIzeiIgZmlsbC1vcGFjaXR5PSIuNSIgZmlsbD0iIzQzNDg1QSIvPjxwYXRoIGQ9Ik0xMSAyN2MyLjEyOCAwLS45LTMuNzQyIDUuNjIxLTYuNjQxIDMuMjIxLTEuOTEgNS4zNzktNS40MSA1LjM3OS05LjQxMkMyMiA0LjkwMSAxNy4wNzUgMCAxMSAwUzAgNC45MDEgMCAxMC45NDdjMCAzLjkxOCAyLjA2OCA3LjM1NSA1LjE3NyA5LjI5QzExLjc1IDIzLjI3NyA5LjA2IDI3IDExIDI3eiIgc3Ryb2tlPSIjRkZGIiBmaWxsPSJ1cmwoI3ByZWZpeF9fYSkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMS4yMTUpIi8+PHRleHQgZm9udC1mYW1pbHk9IlBpbmdGYW5nU0MtU2VtaWJvbGQsIFBpbmdGYW5nIFNDIiBmb250LXNpemU9IjEyIiBmb250LXdlaWdodD0iNTAwIiBmaWxsPSIjRkZGIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxIDEuMjE1KSI+PHRzcGFuIHg9IjUiIHk9IjE1LjYyNCI+6LW3PC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg==";
 const StartEndPoint_css_ts_vanilla = "";
@@ -3027,12 +3088,12 @@ const AStartEndPoint = defineSetup(function AStartEndPoint2(props) {
     const icon = props.type === "start" ? imgStartPoint : imgEndPoint;
     const descriptionRow = !props.description ? "" : decodeAsterisk(props.description).map((item) => item.type === "normal" ? item.value : `<span class="${pointInfoBoxEmphasize$1}">${item.value}</span>`).join("");
     if (!props.description && !props.title)
-      return `<img src="${icon}" class="${pointIcon({
+      return `<img class="AStartEndPoint ${pointIcon({
         type: props.type
-      })}">`;
+      })}" src="${icon}">`;
     if (!props.description)
       return `
-        <div class="${pointLayout$1}">
+        <div class="AStartEndPoint ${pointLayout$1}">
           <div class="${pointSingleInfoBox$1}">
             <div class="${pointInfoBoxTitle}">${props.title}</div>
           </div>
@@ -3042,7 +3103,7 @@ const AStartEndPoint = defineSetup(function AStartEndPoint2(props) {
         </div>
       `;
     return `
-        <div class="${pointLayout$1}">
+        <div class="AStartEndPoint ${pointLayout$1}">
           <div class="${pointInfoBox}">
             <div class="${pointInfoBoxTitle}">${(_a = props.title) != null ? _a : ""}</div>
             <div class="${pointInfoBoxDescription}">${descriptionRow}</div>
@@ -3070,14 +3131,14 @@ const GStartEndPoint = defineSetup(function GStartEndPoint2(props) {
     const descriptionRow = !props.description ? "" : decodeAsterisk(props.description).map((item) => item.type === "normal" ? item.value : `<span class="${pointInfoBoxEmphasize$1}">${item.value}</span>`).join("");
     if (!props.description && !props.title)
       return createDom("img", {
-        class: pointIcon({
+        class: `GStartEndPoint ${pointIcon({
           type: props.type
-        }),
+        })}`,
         src: icon
       });
     if (!props.description)
       return createDom("div", {
-        class: pointLayout$1
+        class: `GStartEndPoint ${pointLayout$1}`
       }, `
           <div class="${pointSingleInfoBox$1}">
             <div class="${pointInfoBoxTitle}">${props.title}</div>
@@ -3087,7 +3148,7 @@ const GStartEndPoint = defineSetup(function GStartEndPoint2(props) {
       })}">
         `);
     return createDom("div", {
-      class: pointLayout$1
+      class: `GStartEndPoint ${pointLayout$1}`
     }, `
         <div class="${pointInfoBox}">
           <div class="${pointInfoBoxTitle}">${(_a = props.title) != null ? _a : ""}</div>
@@ -3260,6 +3321,20 @@ const watchVisibilityState = () => {
   document.addEventListener("visibilitychange", handleVisibilityChange);
   return { visibilityStateRef, unwatchVisibilityState };
 };
+const isPlace = (place) => {
+  return place.lng !== void 0 && place.lat !== void 0;
+};
+const sleep = (milliSeconds) => new Promise((resolve) => setTimeout(resolve, milliSeconds));
+const assertPoint = (point) => {
+  if (Array.isArray(point) && point.length === 2 && typeof point[0] === "number" && typeof point[1] === "number")
+    return;
+  throw new Error(`Assertion Error: expect type [number, number], actual is ${point}`);
+};
+const assertAngle = (angle) => {
+  if (typeof angle === "number" || typeof angle === "undefined")
+    return;
+  throw new Error(`Assertion Error: expect type number | undefined, actual is ${angle}`);
+};
 const WX_GET_LOCATION_INTERVAL_STILL = 10 * 1e3;
 const WX_GET_LOCATION_INTERVAL_SLOW = 3 * 1e3;
 const WX_GET_LOCATION_INTERVAL_FAST = 1 * 1e3;
@@ -3267,7 +3342,6 @@ const takeIsForceBrowserGeo = () => {
   const searchParam = new URLSearchParams(location.search);
   return searchParam.has(`force-browser-geo`);
 };
-const sleep$1 = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));
 const wxReady = () => new Promise((resolve, reject) => {
   wx.ready(resolve);
   wx.error(reject);
@@ -3291,7 +3365,7 @@ function wechatWatchPosition(onSuccess, onError, option) {
     await wxReady();
     do {
       if (visibilityStateRef.value === "hidden") {
-        await sleep$1(WX_GET_LOCATION_INTERVAL_FAST);
+        await sleep(WX_GET_LOCATION_INTERVAL_FAST);
         continue;
       }
       const geoPosition = await new Promise((resolve) => {
@@ -3332,7 +3406,7 @@ function wechatWatchPosition(onSuccess, onError, option) {
       if (geoPosition && !isGeoPositionEqual(geoPosition, prevGeoPosition))
         onSuccess(geoPosition);
       prevGeoPosition = geoPosition;
-      await sleep$1(interval);
+      await sleep(interval);
     } while (enable);
   };
   startWatch();
@@ -3356,20 +3430,6 @@ function compatibleWathPosition(onSuccess, onError, option) {
     }
   }
 }
-const isPlace = (place) => {
-  return place.lng !== void 0 && place.lat !== void 0;
-};
-const sleep = (milliSeconds) => new Promise((resolve) => setTimeout(resolve, milliSeconds));
-const assertPoint = (point) => {
-  if (Array.isArray(point) && point.length === 2 && typeof point[0] === "number" && typeof point[1] === "number")
-    return;
-  throw new Error(`Assertion Error: expect type [number, number], actual is ${point}`);
-};
-const assertAngle = (angle) => {
-  if (typeof angle === "number" || typeof angle === "undefined")
-    return;
-  throw new Error(`Assertion Error: expect type number | undefined, actual is ${angle}`);
-};
 class SingleGeoWatch {
   constructor(option) {
     __publicField(this, "id", 0);
@@ -3509,16 +3569,33 @@ const useGeoLocation = (props) => {
     geoReady: readyRef
   };
 };
+const MAX_AMAP_PAN_TO_ANIMATE_DURATION = 500;
+const MIN_AMAP_PAN_TO_ANIMATE_DURATION = 100;
 const useHeycarAmap = () => {
   const amapRef = shallowRef();
   const amapElementRef = shallowRef();
+  const { apiMapDistanceVwOfPoints } = useMapLngLatToVw({ mapRef: amapRef });
   const setMap = (map) => {
     amapRef.value = map;
     amapElementRef.value = map.getContainer();
   };
-  const panTo = (value) => {
-    var _a;
-    return (_a = amapRef == null ? void 0 : amapRef.value) == null ? void 0 : _a.panTo(value);
+  const panTo = async (value) => {
+    const amap2 = amapRef.value;
+    if (!amap2)
+      return;
+    const { lng, lat } = amap2.getCenter();
+    const distanceVw = apiMapDistanceVwOfPoints(value, [lng, lat]);
+    const shouldAnimate = distanceVw < MAX_ANIMATION_DISTANCE_VW;
+    if (shouldAnimate) {
+      const duration = Math.max(
+        MIN_AMAP_PAN_TO_ANIMATE_DURATION,
+        Math.floor(MAX_AMAP_PAN_TO_ANIMATE_DURATION * distanceVw / MAX_ANIMATION_DISTANCE_VW)
+      );
+      amap2.panTo(value, duration);
+      await sleep(duration);
+    } else {
+      amap2.setCenter(value, true);
+    }
   };
   return { mapRef: amapRef, mapElementRef: amapElementRef, panTo, setMap };
 };
@@ -5389,7 +5466,7 @@ const useAmapZoom = (props) => {
   const setZoom = (v) => {
     var _a2;
     zoomRef.value = v;
-    (_a2 = mapRef.value) == null ? void 0 : _a2.setZoom(v);
+    (_a2 = mapRef.value) == null ? void 0 : _a2.setZoom(v, true);
   };
   const handleZoomEnd = (_, { target }) => {
     const zoom = target.getZoom();
@@ -5443,9 +5520,9 @@ const APassengerCircle = defineSetup(function APassengerCircle2(props) {
     const style2 = angle === void 0 ? "" : `transform: rotate(var(${angle}))`;
     const type = size === "large" ? angle === void 0 ? "large" : "largeArrow" : angle === void 0 ? "small" : "smallArrow";
     return `
-        <img src="${src}" class="${passengerCircle({
+        <img class="APassengerCircle ${passengerCircle({
       type
-    })}" style="${style2}">
+    })}" style="${style2}" src="${src}">
       `;
   });
   return () => {
@@ -5470,9 +5547,9 @@ const GPassengerCircle = defineSetup(function GPassengerCircle2(props) {
     const style2 = angle === void 0 ? "" : `transform: rotate(var(${angle}))`;
     const type = size === "large" ? angle === void 0 ? "large" : "largeArrow" : angle === void 0 ? "small" : "smallArrow";
     return createDom("img", {
-      class: passengerCircle({
+      class: `GPassengerCircle ${passengerCircle({
         type
-      }),
+      })}`,
       src,
       style: style2
     });
@@ -5526,42 +5603,15 @@ const ConditionalFittablePassengerCircle = defineSetup(function ConditionalFitta
     })]);
   };
 });
-const useAmapLngLatToVw = () => {
-  const amap2 = useAmap();
-  const apiMapLngLatToVw = (point) => {
-    var _a;
-    return (_a = amap2 == null ? void 0 : amap2.value) == null ? void 0 : _a.lngLatToContainer(point).toArray();
-  };
-  return { apiMapLngLatToVw };
-};
-const useGmapLngLatToVw = () => {
-  const gmap2 = useGmap();
-  const apiMapLngLatToVw = (point) => {
-    var _a, _b, _c, _d, _e;
-    const [lng, lat] = point;
-    const projection = (_a = gmap2 == null ? void 0 : gmap2.value) == null ? void 0 : _a.getProjection();
-    const worldCoordinate = projection == null ? void 0 : projection.fromLatLngToPoint({ lng, lat });
-    const x = (_b = worldCoordinate == null ? void 0 : worldCoordinate.x) != null ? _b : 0;
-    const y = (_c = worldCoordinate == null ? void 0 : worldCoordinate.y) != null ? _c : 0;
-    const zoom = (_e = (_d = gmap2 == null ? void 0 : gmap2.value) == null ? void 0 : _d.getZoom()) != null ? _e : 0;
-    const scale = 2 ** zoom;
-    return [x * scale, y * scale];
-  };
-  return { apiMapLngLatToVw };
-};
-const useMapLngLatToVw = () => {
-  const { supplier } = useMapSupplier();
-  return supplier === "gmap" ? useGmapLngLatToVw() : useAmapLngLatToVw();
-};
 const reverse = (direction) => direction === "left" ? "right" : "left";
 const usePointsLabelDirection = (props) => {
   const { widthLimit, heightLimit } = props;
-  const { apiMapLngLatToVw } = useMapLngLatToVw();
+  const mapRef = useMap();
+  const { apiMapLngLatToVw } = useMapLngLatToVw({ mapRef });
   const diffVw = (from, to) => {
-    const vw = 100 / window.innerWidth;
     const [x1, y1] = apiMapLngLatToVw(from);
     const [x2, y2] = apiMapLngLatToVw(to);
-    return [(x2 - x1) * vw, (y2 - y1) * vw];
+    return [x2 - x1, y2 - y1];
   };
   const directionsRef = ref(Array(props.places.length).fill("right"));
   watchEffectForDeepOption(
@@ -5629,7 +5679,7 @@ const APlaceCircle = defineSetup(function APlaceCircle2(props, {
       hideIcon = false
     } = props;
     return `
-        <div class="${placeCircleLayout({
+        <div class="APlaceCircle ${placeCircleLayout({
       textAlign: textAlignRef.value
     })}">
           <img class="${placeIcon({
@@ -5645,7 +5695,7 @@ const APlaceCircle = defineSetup(function APlaceCircle2(props, {
     const {
       hideIcon = false
     } = props;
-    return `<img class="${placeIcon({
+    return `<img class="APlaceCircle ${placeIcon({
       hideIcon
     })} ${amapPlaceIconLayout({
       textAlign: textAlignRef.value
@@ -5680,7 +5730,7 @@ const GPlaceCircle = defineSetup(function GPlaceCircle2(props, {
       hideIcon = false
     } = props;
     return createDom("div", {
-      class: `${placeCircleLayout({
+      class: `GPlaceCircle ${placeCircleLayout({
         textAlign: textAlignRef.value
       })} ${gmapPlaceIconLayout({
         textAlign: textAlignRef.value
@@ -5697,7 +5747,7 @@ const GPlaceCircle = defineSetup(function GPlaceCircle2(props, {
       hideIcon = false
     } = props;
     return createDom("img", {
-      class: `${placeIcon({
+      class: `GPlaceCircle ${placeIcon({
         hideIcon
       })} ${gmapPlaceIconLayout({
         textAlign: textAlignRef.value
@@ -5760,27 +5810,18 @@ const PickupPoints = defineSetup(function PickupPoints2(props, {
     })]);
   };
 });
-const useFirstWorkflowRecomendLoading = () => {
-  const isFirstWorkflowRecomendLoadingRef = ref(true);
-  const completeFirstWorkflowRecomend = () => {
-    if (!isFirstWorkflowRecomendLoadingRef.value)
-      return;
-    isFirstWorkflowRecomendLoadingRef.value = false;
-  };
-  return { isFirstWorkflowRecomendLoadingRef, completeFirstWorkflowRecomend };
-};
 const RECOMMEND_PLACE_DRAG_LIMIT = 10;
 const RECOMMEND_PLACE_LARGE_LIMIT = 100;
 const RECOMMEND_PLACE_ZOOM_MIN = 13;
 const DEFAULT_PLACE_NAME = "当前位置";
-const DEFAULT_ZOOM = 8;
-const READY_ZOOM = 17;
+const DEFAULT_ZOOM = 17;
 const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlaceMap2(props, {
   emit,
   slots
 }) {
   var _a, _b;
   const {
+    geoLoadingTitle,
     geoDefaultPosition,
     getRecomendPlace,
     getDefaultCenterPlace,
@@ -5797,21 +5838,16 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
     readyPromise
   } = useMapSupplier();
   const {
-    zoomRef,
-    setZoom
+    zoomRef
   } = useMapZoom({
     mapRef,
     defaultValue: DEFAULT_ZOOM
   });
-  const {
-    isFirstWorkflowRecomendLoadingRef,
-    completeFirstWorkflowRecomend
-  } = useFirstWorkflowRecomendLoading();
   const centerPlace = reactive({
     lng: (_a = geoDefaultPosition == null ? void 0 : geoDefaultPosition[0]) != null ? _a : 0,
     lat: (_b = geoDefaultPosition == null ? void 0 : geoDefaultPosition[1]) != null ? _b : 0,
-    name: "",
-    displayName: ""
+    name: geoLoadingTitle,
+    displayName: geoLoadingTitle
   });
   const centerPoint = computed(() => [centerPlace.lng, centerPlace.lat]);
   const centerSource = {
@@ -5832,14 +5868,17 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
       ...place
     });
     updatePlaceCandidates(place);
-    await pipeDefer(setZoom)(READY_ZOOM);
   };
-  const setCenterByPlace = (place) => {
+  const panToCenterByPlace = async (place) => {
     centerSource.source = "api";
+    await panTo(place2point(place));
     centerPlace.lng = place.lng;
     centerPlace.lat = place.lat;
     centerPlace.name = place.name;
     centerPlace.displayName = place.displayName;
+    emit("changePlace", {
+      ...place
+    });
   };
   const defaultCenterPlacePromise = new Promise((resolve) => {
     getDefaultCenterPlace().then(resolve).catch(() => resolve(void 0));
@@ -5870,9 +5909,7 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
         await setCenterPlaceByUserSpecified(place);
       } else {
         updatePlace(value.position);
-        await pipeDefer(setZoom)(READY_ZOOM);
       }
-      completeFirstWorkflowRecomend();
     },
     onChange: (v) => emit("changeGeoLocation", v),
     onError: (e) => {
@@ -5929,14 +5966,12 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
     },
     onChange: async (place) => {
       centerSource.source = "recomend";
+      if (isPlaceEqual(place, centerPlace))
+        panTo(place2point(place));
       Object.assign(centerPlace, {
         ...place
       });
-      panTo(place2point(place));
       emit("changeRecomandPlace", place);
-      if (isFirstWorkflowRecomendLoadingRef.value)
-        await pipeDefer(setZoom)(READY_ZOOM);
-      completeFirstWorkflowRecomend();
     }
   });
   watchEffect(() => {
@@ -5949,11 +5984,11 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
   });
   return () => {
     const {
-      geoLoadingTitle,
+      geoLoadingTitle: geoLoadingTitle2,
       recomendDescription,
       unavailableTitle
     } = props;
-    const title = geoLoading.value ? geoLoadingTitle : !availableRef.value ? unavailableTitle : centerPlace.displayName;
+    const title = geoLoading.value ? geoLoadingTitle2 : !availableRef.value ? unavailableTitle : centerPlace.displayName;
     const description = !availableRef.value ? void 0 : isElectedRef.value ? recomendDescription : void 0;
     return h(HeycarMap, {
       "attrs": {
@@ -5975,9 +6010,9 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
         "renderLabel": (place) => isPlaceEqual(place, centerPlace) ? void 0 : place.displayName
       },
       "on": {
-        "click": setCenterByPlace
+        "click": panToCenterByPlace
       }
-    }), geoLoading.value || isFirstWorkflowRecomendLoadingRef.value ? null : h(AbsoluteAddressBox, {
+    }), geoLoading.value ? null : h(AbsoluteAddressBox, {
       "attrs": {
         "title": title,
         "description": description,
@@ -6036,10 +6071,10 @@ const ATaxiCar = defineSetup(function ATaxiCar2(props) {
     const carStyle = `transform:rotate(${(_a = props.angle) != null ? _a : 0}deg)`;
     if (!props.title)
       return {
-        img: `<img src="${imgTaxicar}" class="${carIcon}" style="${carStyle}">`
+        img: `<img class="ATaxiCar ${carIcon}" src="${imgTaxicar}" style="${carStyle}">`
       };
     const content = (hide$1) => `
-      <div class="${pointLayout}">
+      <div class="ATaxiCar ${pointLayout}">
         <div class="${pointSingleInfoBox} ${hide({
       hide: !hide$1
     })}">
@@ -6081,13 +6116,13 @@ const GTaxiCar = defineSetup(function GTaxiCar2(props) {
     if (!props.title)
       return {
         img: createDom("img", {
-          class: carIcon,
+          class: `GTaxiCar ${carIcon}`,
           src: imgTaxicar,
           style: carStyle
         })
       };
     const content = (hide$1) => createDom("div", {
-      class: pointLayout
+      class: `GTaxiCar ${pointLayout}`
     }, `
         <div class="${pointSingleInfoBox} ${hide({
       hide: !hide$1
@@ -6312,8 +6347,8 @@ const WaveCircle_css_ts_vanilla = "";
 var secondCircle = "rrvp0y3";
 var waveCircle = "rrvp0y2";
 const AWaveCircle = defineSetup(function AWaveCircle2(props) {
-  const contentRef = computed(() => `<img src="${imgWaveCircle}" class="${waveCircle}">`);
-  const contentAnotherRef = computed(() => `<img src="${imgWaveCircle}" class="${waveCircle} ${secondCircle}">`);
+  const contentRef = computed(() => `<img class="AWaveCircle ${waveCircle}" src="${imgWaveCircle}">`);
+  const contentAnotherRef = computed(() => `<img class="AWaveCircle ${waveCircle} ${secondCircle}" src="${imgWaveCircle}">`);
   return () => h("div", [h(AmapMarker, {
     "attrs": {
       "position": props.position,
@@ -6330,11 +6365,11 @@ const AWaveCircle = defineSetup(function AWaveCircle2(props) {
 });
 const GWaveCircle = defineSetup(function GWaveCircle2(props) {
   const contentRef = computed(() => createDom("img", {
-    class: waveCircle,
+    class: `GWaveCircle ${waveCircle}`,
     src: imgWaveCircle
   }));
   const contentAnotherRef = computed(() => createDom("img", {
-    class: `${waveCircle} ${secondCircle}`,
+    class: `GWaveCircle ${waveCircle} ${secondCircle}`,
     src: imgWaveCircle
   }));
   return () => {

package/package.json

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