@heycar/heycars-map 0.7.2 → 0.7.4-zone1

package/dist/index.cjs

@@ -2058,8 +2058,7 @@ const Amap = defineSetup(function Amap2(props, { slots, emit }) {
     const map = new AMap.Map(elementRef.value, {
       ...defaultOptions,
       scrollWheel: defaultOptions.touchZoomCenter ? false : defaultOptions.scrollWheel,
-      vectorMapForeign,
-      mapStyle: "amap://styles/95498a904992a4c0b866a3e4d7729682"
+      vectorMapForeign
     });
     window.GlobalAmap = map;
     mapRef.value = map;
@@ -2410,6 +2409,14 @@ const HeycarMap = defineLagecySetup(function HeycarMap2(props, {
     }
   };
 }).props(["center", "fallback", "loading", "mapRef", "zoom", "touchEnable", "touchZoomCenter"]);
+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 AmapPolyline = defineSetup(function AmapPolyline2(props) {
   const polylineRef = Vue.shallowRef();
   const mapRef = useAmap();
@@ -2488,7 +2495,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": {
@@ -2499,7 +2507,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": {
@@ -2508,7 +2517,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": {
@@ -2518,7 +2528,8 @@ const ADrivingLine = defineSetup(function ADrivingLine2(props) {
         "strokeOpacity": 1,
         "strokeColor": "transparent",
         "lineJoin": "round",
-        "lineCap": "round"
+        "lineCap": "round",
+        "zIndex": ZINDEX_LINE_LAYER
       }
     })]);
   };
@@ -2540,7 +2551,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": {
@@ -2555,7 +2567,8 @@ const GDrivingLine = defineSetup(function GDrivingLine2(props) {
           },
           repeat: `${strokeWidth}px`,
           offset: `${strokeWidth / 2}px`
-        }]
+        }],
+        "zIndex": ZINDEX_LINE_LAYER
       }
     }), Vue.h(GmapPolyline, {
       "attrs": {
@@ -2571,7 +2584,8 @@ const GDrivingLine = defineSetup(function GDrivingLine2(props) {
             scale: 0.7
           },
           repeat: `${repeat}px`
-        }]
+        }],
+        "zIndex": ZINDEX_LINE_LAYER
       }
     })]);
   };
@@ -3008,12 +3022,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 = "";
@@ -5271,7 +5279,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,
@@ -5286,49 +5295,72 @@ 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 = placeCandidates !== void 0;
+    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 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;
+      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,
@@ -5343,40 +5375,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) => {
@@ -5430,6 +5486,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+";
@@ -5820,7 +6001,7 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
   const centerSource = {
     source: "geo"
   };
-  const setCenterPlaceByRecomand = (point) => {
+  const updateCenterPlaceByPoint = (point) => {
     centerSource.source = "api";
     updatePlace(point);
   };
@@ -5834,15 +6015,40 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
     emit("changePlace", {
       ...place
     });
-    updatePlaceCandidates(place);
+    updateRecommendPlace(place);
     await pipeDefer(setZoom)(READY_ZOOM);
   };
+  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 setCenterByPlace = (place) => {
     centerSource.source = "api";
     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));
@@ -5883,10 +6089,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 {
@@ -5901,9 +6108,10 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
   });
   const {
     updatePlace,
-    updateRecomandPlace,
-    updatePlaceCandidates,
+    updateRecommendPlace,
+    setPlaceCandidatesAndZone,
     placeCandidates,
+    zoneRef,
     availableRef,
     isElectedRef
   } = useMapRecomendPlace({
@@ -5926,17 +6134,25 @@ 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";
       Object.assign(centerPlace, {
         ...place
       });
       panTo(place2point(place));
-      emit("changeRecomandPlace", place);
+      emit("changeRecomandPlace", {
+        place,
+        inputPlace,
+        isInZone
+      });
       if (isFirstWorkflowRecomendLoadingRef.value)
         await pipeDefer(setZoom)(READY_ZOOM);
       completeFirstWorkflowRecomend();
@@ -5951,6 +6167,7 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
     mapContext.onChangeRecomendPlaces([...placeCandidates.value]);
   });
   return () => {
+    var _a2, _b2;
     const {
       geoLoadingTitle,
       recomendDescription,
@@ -5967,7 +6184,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
@@ -6150,7 +6371,8 @@ const AWalkingLine = defineSetup(function AWalkingLine2(props) {
         "strokeStyle": "dashed",
         "strokeDasharray": [strokeWidth, strokeWidth * 1.5],
         "lineJoin": "round",
-        "lineCap": "round"
+        "lineCap": "round",
+        "zIndex": ZINDEX_LINE_LAYER
       }
     });
   };
@@ -6186,7 +6408,8 @@ const GWalkingLine = defineSetup(function GWalkingLine2(props) {
             scale: 1
           },
           repeat: `${strokeWidth * 2}px`
-        }]
+        }],
+        "zIndex": ZINDEX_LINE_LAYER
       }
     });
   };
@@ -7102,6 +7325,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");
@@ -7109,6 +7333,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 });
     },
@@ -7122,6 +7349,7 @@ const useBusinessRecomendPlaceMap = () => {
     placeCandidates,
     panToGeoPositionByRecomend,
     setCenterPlaceByUserSpecified,
+    setCenterPlaceByUserSpecifiedInZone,
     apiMapDistance,
     apiMapInChina: inChina
   };