@heycar/heycars-map 0.7.3 → 0.7.4-zone2

package/dist/index.cjs

@@ -1937,6 +1937,15 @@ const useMapLoader = (props) => {
     onChange
   });
 };
+var BRWOSER_PLATFORM = /* @__PURE__ */ ((BRWOSER_PLATFORM2) => {
+  BRWOSER_PLATFORM2["WECHAT"] = "WECHAT";
+  BRWOSER_PLATFORM2["WECHAT_MINIPROGRAM"] = "WECHAT_MINIPROGRAM";
+  BRWOSER_PLATFORM2["ALIPAY"] = "ALIPAY";
+  BRWOSER_PLATFORM2["ALIPAY_MINIPROGRAM"] = "ALIPAY_MINIPROGRAM";
+  BRWOSER_PLATFORM2["H5"] = "H5";
+  BRWOSER_PLATFORM2["NODE_JS"] = "NODE_JS";
+  return BRWOSER_PLATFORM2;
+})(BRWOSER_PLATFORM || {});
 var OS_PLATFORM = /* @__PURE__ */ ((OS_PLATFORM2) => {
   OS_PLATFORM2["IOS"] = "IOS";
   OS_PLATFORM2["ANDROID"] = "ANDROID";
@@ -1949,6 +1958,18 @@ var WEBGL_STATUS = /* @__PURE__ */ ((WEBGL_STATUS2) => {
   WEBGL_STATUS2["ENABLED"] = "ENABLED";
   return WEBGL_STATUS2;
 })(WEBGL_STATUS || {});
+const detectBrowserPlatform = () => {
+  if (typeof navigator === "undefined")
+    return "NODE_JS";
+  const useragent = navigator.userAgent.toLowerCase();
+  if (useragent.includes("micromessenger")) {
+    return useragent.includes("miniprogram") ? "WECHAT_MINIPROGRAM" : "WECHAT";
+  }
+  if (useragent.includes("alipay")) {
+    return useragent.includes("miniprogram") ? "ALIPAY_MINIPROGRAM" : "ALIPAY";
+  }
+  return "H5";
+};
 const detectOSPlatform = () => {
   if (typeof navigator === "undefined")
     return "OTHER";
@@ -1983,6 +2004,56 @@ 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 ZINDEX_LINE_LAYER = 12;
+const ZINDEX_GREEN_ZONE = 10;
+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 +2062,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 +2122,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 +2143,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 },
@@ -2487,7 +2577,8 @@ const ADrivingLine = defineSetup(function ADrivingLine2(props) {
         "strokeOpacity": 1,
         "strokeColor": strokeColorOuter,
         "lineJoin": "round",
-        "lineCap": "round"
+        "lineCap": "round",
+        "zIndex": ZINDEX_LINE_LAYER
       }
     }), Vue.h(AmapPolyline, {
       "attrs": {
@@ -2498,7 +2589,8 @@ const ADrivingLine = defineSetup(function ADrivingLine2(props) {
         "lineJoin": "round",
         "lineCap": "round",
         "strokeStyle": "dashed",
-        "strokeDasharray": [dashLength, dashLength * 0.5]
+        "strokeDasharray": [dashLength, dashLength * 0.5],
+        "zIndex": ZINDEX_LINE_LAYER
       }
     }), Vue.h(AmapPolyline, {
       "attrs": {
@@ -2507,7 +2599,8 @@ const ADrivingLine = defineSetup(function ADrivingLine2(props) {
         "strokeOpacity": 1,
         "strokeColor": strokeColorInner,
         "lineJoin": "round",
-        "lineCap": "round"
+        "lineCap": "round",
+        "zIndex": ZINDEX_LINE_LAYER
       }
     }), Vue.h(AmapPolyline, {
       "attrs": {
@@ -2517,7 +2610,8 @@ const ADrivingLine = defineSetup(function ADrivingLine2(props) {
         "strokeOpacity": 1,
         "strokeColor": "transparent",
         "lineJoin": "round",
-        "lineCap": "round"
+        "lineCap": "round",
+        "zIndex": ZINDEX_LINE_LAYER
       }
     })]);
   };
@@ -2539,7 +2633,8 @@ const GDrivingLine = defineSetup(function GDrivingLine2(props) {
         "path": pathRef.value,
         "strokeWeight": strokeWidth + 2 * borderWidth + 2 * outlineWidth,
         "strokeOpacity": 1,
-        "strokeColor": strokeColorOuter
+        "strokeColor": strokeColorOuter,
+        "zIndex": ZINDEX_LINE_LAYER
       }
     }), Vue.h(GmapPolyline, {
       "attrs": {
@@ -2554,7 +2649,8 @@ const GDrivingLine = defineSetup(function GDrivingLine2(props) {
           },
           repeat: `${strokeWidth}px`,
           offset: `${strokeWidth / 2}px`
-        }]
+        }],
+        "zIndex": ZINDEX_LINE_LAYER
       }
     }), Vue.h(GmapPolyline, {
       "attrs": {
@@ -2570,7 +2666,8 @@ const GDrivingLine = defineSetup(function GDrivingLine2(props) {
             scale: 0.7
           },
           repeat: `${repeat}px`
-        }]
+        }],
+        "zIndex": ZINDEX_LINE_LAYER
       }
     })]);
   };
@@ -3007,12 +3104,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 +3120,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 +3135,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 +3163,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 +3180,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 +3353,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 +3374,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 +3397,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 +3438,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 +3462,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);
@@ -3450,6 +3540,9 @@ const useGeoLocation = (props) => {
   var _a, _b;
   const { onChange, onLoad, onLoadDefault, onError, geoDefaultPosition } = props != null ? props : {};
   const { toGcj02 } = useMapGCJ02();
+  const isIOSAlipay = [BRWOSER_PLATFORM.ALIPAY, BRWOSER_PLATFORM.ALIPAY_MINIPROGRAM].includes(
+    detectBrowserPlatform()
+  ) && detectOSPlatform() === OS_PLATFORM.IOS;
   let isOnLoadTriggered = false;
   const loading = Vue.ref(false);
   const readyRef = Vue.ref(false);
@@ -3475,7 +3568,7 @@ const useGeoLocation = (props) => {
           spaceLog("watchPosition", "success duration, position = ", duration, position);
           const coordinate = position.coords;
           const wgsPoint = [position.coords.longitude, position.coords.latitude];
-          const point = await toGcj02(wgsPoint);
+          const point = isIOSAlipay ? wgsPoint : await toGcj02(wgsPoint);
           coordinateRef.value = coordinate;
           positionRef.value = point;
           errorRef.value = void 0;
@@ -3511,16 +3604,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 };
 };
@@ -5270,7 +5380,8 @@ const useAmapRecomendPlace = (props) => {
   const { pointRef, getRecomendPlace, getLimit, context: context2, emptyPlaceName, onChange, onChangePlace } = props;
   const availableRef = Vue.ref(true);
   const placeCandidatesRef = Vue.ref([]);
-  const { idx: recomendPlaceKey, update: updateRecomandPlace } = useUpdate();
+  const zoneRef = Vue.ref();
+  const { idx: recomendPlaceKey, update: updateRecommendPlaceKey } = useUpdate();
   const { readyPromise } = useMapSupplier();
   const { place, updatePlace, setPlace } = useAmapPlace({
     emptyPlaceName,
@@ -5285,49 +5396,76 @@ const useAmapRecomendPlace = (props) => {
     );
   });
   const updatePlaceCandidates = async (place2) => {
-    const inputPlaceCandidates = await getRecomendPlace({ ...place2 }, context2);
+    var _a;
+    const {
+      places: inputPlaceCandidates,
+      zone,
+      available
+    } = (_a = await getRecomendPlace({ ...place2 }, context2)) != null ? _a : {};
+    const placeCandidates = inputPlaceCandidates == null ? void 0 : inputPlaceCandidates.map(toPlaceType);
+    availableRef.value = !!available;
+    zoneRef.value = zone;
+    placeCandidatesRef.value = placeCandidates != null ? placeCandidates : [];
+  };
+  const updateRecommendPlace = (place2) => {
+    setPlace(place2);
+    updateRecommendPlaceKey();
+  };
+  const setPlaceCandidatesAndZone = ({
+    zone,
+    places: inputPlaceCandidates
+  }) => {
     const placeCandidates = inputPlaceCandidates == null ? void 0 : inputPlaceCandidates.map(toPlaceType);
-    availableRef.value = placeCandidates !== void 0;
+    zoneRef.value = zone ? zone : void 0;
     placeCandidatesRef.value = placeCandidates != null ? placeCandidates : [];
   };
   Vue.watch(
     () => recomendPlaceKey.value,
     async () => {
+      var _a;
       await readyPromise;
-      const inputPlaceCandidates = await getRecomendPlace({ ...place }, context2);
+      const {
+        places: inputPlaceCandidates,
+        zone,
+        available
+      } = (_a = await getRecomendPlace({ ...place }, context2)) != null ? _a : {};
       const placeCandidates = inputPlaceCandidates == null ? void 0 : inputPlaceCandidates.map(toPlaceType);
-      if (placeCandidates === void 0) {
-        availableRef.value = false;
+      if (!available || !placeCandidates) {
+        availableRef.value = !!available;
+        zoneRef.value = zone;
         placeCandidatesRef.value = [];
         Object.assign(recomendPlace, { ...place });
-        onChange == null ? void 0 : onChange({ ...place });
+        onChange == null ? void 0 : onChange({ place: { ...place }, inputPlace: { ...place }, isInZone: !!zone });
         return;
       }
       const { shortestPlace, shortestDistance } = findAmapNearestPlace(place, placeCandidates);
       const limit = getLimit(context2);
-      const resultPlace = shortestDistance > limit ? place : shortestPlace;
-      availableRef.value = true;
+      const resultPlace = zone || shortestDistance <= limit ? shortestPlace : place;
+      availableRef.value = !!available;
+      zoneRef.value = zone;
       placeCandidatesRef.value = placeCandidates;
       Object.assign(recomendPlace, { ...resultPlace });
-      onChange == null ? void 0 : onChange({ ...resultPlace });
+      onChange == null ? void 0 : onChange({ place: { ...resultPlace }, inputPlace: { ...place }, isInZone: !!zone });
     }
   );
   return {
+    zoneRef,
     recomendPlace,
     placeCandidates: placeCandidatesRef,
     availableRef,
     isElectedRef,
-    updateRecomandPlace,
+    updateRecommendPlace,
     updatePlaceCandidates,
     updatePlace,
-    setPlace
+    setPlaceCandidatesAndZone
   };
 };
 const useGmapRecomendPlace = (props) => {
   const { pointRef, getRecomendPlace, getLimit, context: context2, emptyPlaceName, onChange, onChangePlace } = props;
   const availableRef = Vue.ref(true);
   const placeCandidatesRef = Vue.ref([]);
-  const { idx: recomendPlaceKey, update: updateRecomandPlace } = useUpdate();
+  const zoneRef = Vue.ref();
+  const { idx: recomendPlaceKey, update: updateRecommendPlaceKey } = useUpdate();
   const { readyPromise } = useMapSupplier();
   const { place, updatePlace, setPlace } = useGmapPlace({
     emptyPlaceName,
@@ -5342,40 +5480,64 @@ const useGmapRecomendPlace = (props) => {
     );
   });
   const updatePlaceCandidates = async (place2) => {
-    const placeCandidates = await getRecomendPlace({ ...place2 }, context2);
-    availableRef.value = placeCandidates !== void 0;
+    var _a;
+    const {
+      places: inputPlaceCandidates,
+      zone,
+      available
+    } = (_a = await getRecomendPlace({ ...place2 }, context2)) != null ? _a : {};
+    const placeCandidates = inputPlaceCandidates == null ? void 0 : inputPlaceCandidates.map(toPlaceType);
+    availableRef.value = !!available;
+    zoneRef.value = zone;
     placeCandidatesRef.value = placeCandidates != null ? placeCandidates : [];
   };
+  const updateRecommendPlace = (place2) => {
+    setPlace(place2);
+    updateRecommendPlaceKey();
+  };
+  const setPlaceCandidatesAndZone = ({ zone, places }) => {
+    placeCandidatesRef.value = places != null ? places : [];
+    zoneRef.value = zone ? zone : void 0;
+  };
   Vue.watch(
     () => recomendPlaceKey.value,
     async () => {
+      var _a;
       await readyPromise;
-      const placeCandidates = await getRecomendPlace({ ...place }, context2);
-      if (placeCandidates === void 0) {
-        availableRef.value = false;
+      const {
+        places: inputPlaceCandidates,
+        zone,
+        available
+      } = (_a = await getRecomendPlace({ ...place }, context2)) != null ? _a : {};
+      const placeCandidates = inputPlaceCandidates == null ? void 0 : inputPlaceCandidates.map(toPlaceType);
+      if (!available || !placeCandidates) {
+        availableRef.value = !!available;
+        zoneRef.value = zone;
         placeCandidatesRef.value = [];
         Object.assign(recomendPlace, { ...place });
-        onChange == null ? void 0 : onChange({ ...place });
+        onChange == null ? void 0 : onChange({ place: { ...place }, inputPlace: { ...place }, isInZone: !!zone });
         return;
       }
       const { shortestPlace, shortestDistance } = findGmapNearestPlace(place, placeCandidates);
       const limit = getLimit(context2);
       const resultPlace = shortestDistance > limit ? place : shortestPlace;
-      availableRef.value = true;
+      availableRef.value = !!available;
+      zoneRef.value = zone;
       placeCandidatesRef.value = placeCandidates;
       Object.assign(recomendPlace, { ...resultPlace });
-      onChange == null ? void 0 : onChange({ ...resultPlace });
+      onChange == null ? void 0 : onChange({ place: { ...resultPlace }, inputPlace: { ...place }, isInZone: !!zone });
     }
   );
   return {
+    zoneRef,
     recomendPlace,
     placeCandidates: placeCandidatesRef,
     availableRef,
     isElectedRef,
-    updateRecomandPlace,
+    updateRecommendPlace,
     updatePlaceCandidates,
     updatePlace,
-    setPlace
+    setPlaceCandidatesAndZone
   };
 };
 const useMapRecomendPlace = (props) => {
@@ -5391,7 +5553,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();
@@ -5429,6 +5591,131 @@ const useMapZoom = (props) => {
   const { supplier } = useMapSupplier();
   return supplier === "gmap" ? useGmapZoom(props) : useAmapZoom(props);
 };
+const AmapPolygon = defineSetup(function AmapPolygon2(props) {
+  const polygonRef = Vue.shallowRef();
+  const mapRef = useAmap();
+  Vue.onMounted(() => {
+    polygonRef.value = new AMap.Polygon();
+    polygonRef.value.setOptions(props);
+  });
+  Vue.onUnmounted(() => {
+    var _a;
+    (_a = polygonRef.value) == null ? void 0 : _a.setMap(null);
+  });
+  Vue.watchPostEffect(() => {
+    var _a;
+    const map = mapRef == null ? void 0 : mapRef.value;
+    if (!map)
+      return;
+    (_a = polygonRef.value) == null ? void 0 : _a.setMap(map);
+  });
+  watchNoneImmediatePostEffectForMapProperty(polygonRef, props, [
+    { name: "path", defaultValue: [[0, 0]] },
+    { name: "extData", defaultValue: void 0 },
+    { name: "draggable", defaultValue: false }
+  ]);
+  watchNoneImmediatePostEffectForDeepOption(
+    () => {
+      const { path, extData, draggable, ...otherOptions } = props;
+      return otherOptions;
+    },
+    (otherOptions) => {
+      var _a;
+      (_a = polygonRef.value) == null ? void 0 : _a.setOptions({ ...otherOptions });
+    }
+  );
+  return () => null;
+});
+const GmapPolygon = defineSetup(function GmapPolygon2(props) {
+  const polygonRef = Vue.shallowRef();
+  const mapRef = useGmap();
+  Vue.onMounted(() => {
+    polygonRef.value = new google.maps.Polygon({ ...props });
+  });
+  Vue.onUnmounted(() => {
+    var _a;
+    (_a = polygonRef.value) == null ? void 0 : _a.setMap(null);
+  });
+  Vue.watchPostEffect(() => {
+    var _a;
+    const map = mapRef == null ? void 0 : mapRef.value;
+    if (!map)
+      return;
+    (_a = polygonRef.value) == null ? void 0 : _a.setMap(map);
+  });
+  watchNoneImmediatePostEffectForDeepOption(
+    () => ({ ...props }),
+    (props2) => {
+      var _a;
+      (_a = polygonRef.value) == null ? void 0 : _a.setOptions({ ...props2 });
+    }
+  );
+  return () => null;
+});
+const GREEN_ZONE_FILL_COLOR = "#C7E5FB";
+const GREEN_ZONE_FILL_OPACITY = 0.5;
+const GREEN_ZONE_STROKE_COLOR = "#4BA7FF";
+const GREEN_ZONE_STROKE_WEIGHT_VW = 1;
+const AGreenZone = defineSetup(function AGreenZone2(props) {
+  const strokeWeight = GREEN_ZONE_STROKE_WEIGHT_VW * globalThis.innerWidth / 100;
+  return () => {
+    return Vue.h(AmapPolygon, {
+      "attrs": {
+        "path": props.path,
+        "strokeColor": GREEN_ZONE_STROKE_COLOR,
+        "strokeStyle": "dashed",
+        "strokeWeight": strokeWeight,
+        "fillColor": GREEN_ZONE_FILL_COLOR,
+        "fillOpacity": GREEN_ZONE_FILL_OPACITY,
+        "zIndex": ZINDEX_GREEN_ZONE
+      }
+    });
+  };
+});
+const GGreenZone = defineSetup(function GGreenZone2(props) {
+  const pathRef = Vue.computed(() => props.path.map(vec2lnglat));
+  const strokeWeight = GREEN_ZONE_STROKE_WEIGHT_VW * globalThis.innerWidth / 100;
+  const lineSymbol = {
+    path: "M 0,-1 0,1",
+    strokeOpacity: 1,
+    scale: 4
+  };
+  return () => {
+    const path = pathRef.value;
+    return Vue.h("div", [Vue.h(GmapPolygon, {
+      "attrs": {
+        "paths": path,
+        "strokeColor": GREEN_ZONE_STROKE_COLOR,
+        "strokeOpacity": 0,
+        "strokeWeight": strokeWeight,
+        "fillColor": GREEN_ZONE_FILL_COLOR,
+        "fillOpacity": GREEN_ZONE_FILL_OPACITY,
+        "zIndex": ZINDEX_GREEN_ZONE
+      }
+    }), Vue.h(GmapPolyline, {
+      "attrs": {
+        "path": path,
+        "strokeColor": GREEN_ZONE_STROKE_COLOR,
+        "strokeWeight": GREEN_ZONE_STROKE_WEIGHT_VW,
+        "icons": [{
+          icon: lineSymbol,
+          offset: "0",
+          repeat: "20px"
+        }]
+      }
+    })]);
+  };
+});
+const GreenZone = defineSetup(function GreenZone2(props) {
+  const payload = useMapSupplier();
+  return () => {
+    if (!props.path.length)
+      return null;
+    return createElement(payload.supplier === "gmap" ? GGreenZone : AGreenZone, {
+      attrs: props
+    });
+  };
+});
 const imgPassengerCircleArrow = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxmaWx0ZXIgeD0iLTI4LjYlIiB5PSItMjguNiUiIHdpZHRoPSIxNTcuMSUiIGhlaWdodD0iMTU3LjElIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJwcmVmaXhfX2EiPjxmZU9mZnNldCBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMjc3NDUzMDE2IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PGNpcmNsZSBpZD0icHJlZml4X19iIiBjeD0iMzAiIGN5PSIzMCIgcj0iMTAuNSIvPjwvZGVmcz48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxjaXJjbGUgc3Ryb2tlLW9wYWNpdHk9Ii4xIiBzdHJva2U9IiMwMDNERkYiIGZpbGwtb3BhY2l0eT0iLjE1IiBmaWxsPSIjNDg3M0ZFIiBjeD0iMzAiIGN5PSIzMCIgcj0iMjkuNSIvPjxwYXRoIGZpbGw9IiM0ODcxRjEiIGQ9Ik0zMCAxMC41NTdsNi4zNDIgMTIuNjg0SDIzLjY1OHoiLz48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNwcmVmaXhfX2EpIiB4bGluazpocmVmPSIjcHJlZml4X19iIi8+PGNpcmNsZSBzdHJva2U9IiNGRkYiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVqb2luPSJzcXVhcmUiIGZpbGw9IiM0ODcxRjEiIGN4PSIzMCIgY3k9IjMwIiByPSI5Ii8+PC9nPjwvc3ZnPg==";
 const imgPassengerCircle = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjEiIGhlaWdodD0iNjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxmaWx0ZXIgeD0iLTcuMSUiIHk9Ii03LjElIiB3aWR0aD0iMTE0LjMlIiBoZWlnaHQ9IjExNC4zJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0icHJlZml4X19hIj48ZmVPZmZzZXQgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249Ii41IiBpbj0ic2hhZG93T2Zmc2V0T3V0ZXIxIiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb21wb3NpdGUgaW49InNoYWRvd0JsdXJPdXRlcjEiIGluMj0iU291cmNlQWxwaGEiIG9wZXJhdG9yPSJvdXQiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMC4yNzc0NTMwMTYgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48Y2lyY2xlIGlkPSJwcmVmaXhfX2IiIGN4PSIzMCIgY3k9IjMwIiByPSIxMC41Ii8+PC9kZWZzPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC40MDUgLjI2NCkiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGNpcmNsZSBzdHJva2Utb3BhY2l0eT0iLjEiIHN0cm9rZT0iIzAwM0RGRiIgZmlsbC1vcGFjaXR5PSIuMTUiIGZpbGw9IiM0ODczRkUiIGN4PSIzMCIgY3k9IjMwIiByPSIyOS41Ii8+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjcHJlZml4X19hKSIgeGxpbms6aHJlZj0iI3ByZWZpeF9fYiIvPjxjaXJjbGUgc3Ryb2tlPSIjRkZGIiBzdHJva2Utd2lkdGg9IjIuNCIgc3Ryb2tlLWxpbmVqb2luPSJzcXVhcmUiIGZpbGw9IiM0ODcxRjEiIGN4PSIzMCIgY3k9IjMwIiByPSI5LjMiLz48L2c+PC9zdmc+";
 const imgPassengerSmallArrow = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMzQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxmaWx0ZXIgeD0iLTI4LjYlIiB5PSItMjguNiUiIHdpZHRoPSIxNTcuMSUiIGhlaWdodD0iMTU3LjElIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJwcmVmaXhfX2EiPjxmZU9mZnNldCBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMjQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48Y2lyY2xlIGlkPSJwcmVmaXhfX2IiIGN4PSIxMC41IiBjeT0iMTkuNSIgcj0iMTAuNSIvPjwvZGVmcz48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGZpbGw9IiM0NDcxRkYiIGQ9Ik0xNC40ODEgMGw2LjYwMyAxMy4xODFINy44Nzl6Ii8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCkiPjx1c2UgZmlsbD0iIzAwMCIgZmlsdGVyPSJ1cmwoI3ByZWZpeF9fYSkiIHhsaW5rOmhyZWY9IiNwcmVmaXhfX2IiLz48Y2lyY2xlIHN0cm9rZT0iI0ZGRiIgc3Ryb2tlLXdpZHRoPSIyLjQiIHN0cm9rZS1saW5lam9pbj0ic3F1YXJlIiBmaWxsPSIjNDg3MUYxIiBjeD0iMTAuNSIgY3k9IjE5LjUiIHI9IjkuMyIvPjwvZz48L2c+PC9zdmc+";
@@ -5445,9 +5732,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 +5759,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 +5815,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 +5891,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 +5907,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 +5942,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 +5959,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 +6022,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,27 +6050,22 @@ 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 = {
     source: "geo"
   };
-  const setCenterPlaceByRecomand = (point) => {
+  const updateCenterPlaceByPoint = (point) => {
     centerSource.source = "api";
     updatePlace(point);
   };
@@ -5833,15 +6079,40 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
     emit("changePlace", {
       ...place
     });
-    updatePlaceCandidates(place);
-    await pipeDefer(setZoom)(READY_ZOOM);
+    updateRecommendPlace(place);
   };
-  const setCenterByPlace = (place) => {
+  const setCenterPlaceByUserSpecifiedInZone = ({
+    place,
+    recommends
+  }) => {
+    centerPlace.lng = place.lng;
+    centerPlace.lat = place.lat;
+    centerPlace.name = place.name;
+    centerPlace.displayName = place.displayName;
+    setPlaceCandidatesAndZone(recommends);
+    emit("changePlace", {
+      ...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
+    });
+    emit("changeRecomandPlace", {
+      place: {
+        ...place
+      },
+      inputPlace: {
+        ...place
+      },
+      isInZone: !!zoneRef.value
+    });
   };
   const defaultCenterPlacePromise = new Promise((resolve) => {
     getDefaultCenterPlace().then(resolve).catch(() => resolve(void 0));
@@ -5872,9 +6143,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) => {
@@ -5882,10 +6151,11 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
     }
   });
   mapContext.setCenterPlaceByUserSpecified = setCenterPlaceByUserSpecified;
+  mapContext.setCenterPlaceByUserSpecifiedInZone = setCenterPlaceByUserSpecifiedInZone;
   mapContext.panToGeoPositionByRecomend = () => {
     if (geoError.value)
       return false;
-    setCenterPlaceByRecomand(geoPosition.value);
+    updateCenterPlaceByPoint(geoPosition.value);
     return true;
   };
   const {
@@ -5900,9 +6170,10 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
   });
   const {
     updatePlace,
-    updateRecomandPlace,
-    updatePlaceCandidates,
+    updateRecommendPlace,
+    setPlaceCandidatesAndZone,
     placeCandidates,
+    zoneRef,
     availableRef,
     isElectedRef
   } = useMapRecomendPlace({
@@ -5925,20 +6196,26 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
     },
     onChangePlace: (place) => {
       if (centerSource.source !== "recomend") {
-        updateRecomandPlace();
+        updateRecommendPlace(place);
       }
       emit("changePlace", place);
     },
-    onChange: async (place) => {
+    onChange: async ({
+      place,
+      inputPlace,
+      isInZone
+    }) => {
       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();
+      emit("changeRecomandPlace", {
+        place,
+        inputPlace,
+        isInZone
+      });
     }
   });
   Vue.watchEffect(() => {
@@ -5950,12 +6227,13 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
     mapContext.onChangeRecomendPlaces([...placeCandidates.value]);
   });
   return () => {
+    var _a2, _b2;
     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": {
@@ -5966,7 +6244,11 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
         "fallback": slots.fallback,
         "loading": slots.loading
       }
-    }, [!geoLoading.value && !geoError.value && Vue.h(PassengerCircle, {
+    }, [((_a2 = zoneRef.value) == null ? void 0 : _a2.path.length) && Vue.h(GreenZone, {
+      "attrs": {
+        "path": (_b2 = zoneRef.value) == null ? void 0 : _b2.path
+      }
+    }), !geoLoading.value && !geoError.value && Vue.h(PassengerCircle, {
       "attrs": {
         "position": geoPosition.value,
         "angle": orientation.cssRotationVariableName
@@ -5977,9 +6259,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 +6320,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 +6365,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
@@ -6149,7 +6431,8 @@ const AWalkingLine = defineSetup(function AWalkingLine2(props) {
         "strokeStyle": "dashed",
         "strokeDasharray": [strokeWidth, strokeWidth * 1.5],
         "lineJoin": "round",
-        "lineCap": "round"
+        "lineCap": "round",
+        "zIndex": ZINDEX_LINE_LAYER
       }
     });
   };
@@ -6185,7 +6468,8 @@ const GWalkingLine = defineSetup(function GWalkingLine2(props) {
             scale: 1
           },
           repeat: `${strokeWidth * 2}px`
-        }]
+        }],
+        "zIndex": ZINDEX_LINE_LAYER
       }
     });
   };
@@ -6314,8 +6598,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 +6616,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 () => {
@@ -7081,11 +7365,24 @@ const BusinessTaxiServiceMap = defineLagecySetup(function BusinessTaxiServiceMap
     )]);
   };
 }).props(["bookDispatchingTitle", "dispatchingTitle", "driverArrivedTitle", "driverStatus", "fallback", "from", "getDriverPosition", "interval", "loading", "mapRef", "renderInServiceTitle", "renderStartSerivceTitle", "to", "registerOverlay"]);
+const useBusinessAlarm = (props) => {
+  const emptyPlaceName = props == null ? void 0 : props.emptyPlaceName;
+  const { geoPosition, geoError } = useGeoLocation({
+    onChange: ({ position }) => {
+      updatePlace(position);
+    }
+  });
+  const { updatePlace, place } = useMapPlace({
+    pointRef: geoPosition,
+    emptyPlaceName: emptyPlaceName != null ? emptyPlaceName : ""
+  });
+  return { place, geoError };
+};
 const useBusinessQuotingMap = () => {
   const { setMap, mapRef } = useHeycarMap();
   const { registerFitVeiw, setFitView } = useMapFitView({
     mapRef,
-    padding: [19, 26, 19, 26]
+    padding: [26, 26, 19, 26]
   });
   return { setMap, registerFitVeiw, setFitView };
 };
@@ -7101,6 +7398,7 @@ const useBusinessRecomendPlaceMap = () => {
   const { inChina } = useMapInChina();
   const panToGeoPositionByRecomend = (value) => mapContext.panToGeoPositionByRecomend(value);
   const setCenterPlaceByUserSpecified = (value) => mapContext.setCenterPlaceByUserSpecified(value);
+  const setCenterPlaceByUserSpecifiedInZone = (value) => mapContext.setCenterPlaceByUserSpecifiedInZone(value);
   const mapContext = {
     panToGeoPositionByRecomend: () => {
       throw new Error("MyError: panToGeoPositionByRecomend used before assigned");
@@ -7108,6 +7406,9 @@ const useBusinessRecomendPlaceMap = () => {
     setCenterPlaceByUserSpecified: () => {
       throw new Error("MyError: setCenterPlaceByRecomand used before assigned");
     },
+    setCenterPlaceByUserSpecifiedInZone: () => {
+      throw new Error("MyError: setCenterPlaceByUserSpecifiedInZone used before assigned");
+    },
     onChangeCenterPlace: (place) => {
       Object.assign(centerPlace, { ...place });
     },
@@ -7121,6 +7422,7 @@ const useBusinessRecomendPlaceMap = () => {
     placeCandidates,
     panToGeoPositionByRecomend,
     setCenterPlaceByUserSpecified,
+    setCenterPlaceByUserSpecifiedInZone,
     apiMapDistance,
     apiMapInChina: inChina
   };
@@ -7152,6 +7454,7 @@ exports.TaxiCar = TaxiCar;
 exports.WalkingLine = WalkingLine;
 exports.WalkingRoute = WalkingRoute;
 exports.WaveCircle = WaveCircle;
+exports.useBusinessAlarm = useBusinessAlarm;
 exports.useBusinessQuotingMap = useBusinessQuotingMap;
 exports.useBusinessRecomendPlaceMap = useBusinessRecomendPlaceMap;
 exports.useBusinessTaxiServiceMap = useBusinessTaxiServiceMap;