@heycar/heycars-map 0.8.10 → 0.9.1

package/dist/index.cjs

@@ -9,7 +9,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const Vue = require("vue");
 const style = "";
 const name = "@heycar/heycars-map";
-const version = "0.8.10";
+const version = "0.9.1";
 const type = "module";
 const scripts = {
   dev: "vite -c vite.config.dev.ts",
@@ -1113,6 +1113,48 @@ const assertAngle = (angle) => {
 const isLatLngLiteral = (value) => {
   return value != null && typeof value === "object" && Number.isFinite(value.lat) && Number.isFinite(value.lng);
 };
+function defered() {
+  const defer = {};
+  const promise = new Promise((resolve, reject) => {
+    defer.state = "pending";
+    defer.resolve = async (value) => {
+      try {
+        const result = await value;
+        defer.state = "fulfilled";
+        return resolve(result);
+      } catch (err) {
+        defer.state = "rejected";
+        reject(err);
+      }
+    };
+    defer.reject = (reason) => {
+      defer.state = "rejected";
+      return reject(reason);
+    };
+  });
+  return Object.assign(promise, defer);
+}
+const pausableSleep = (milliSeconds) => {
+  const sleepDefered = defered();
+  let id = setTimeout(sleepDefered.resolve, milliSeconds);
+  let isPaused = false;
+  const pause = () => {
+    if (isPaused || sleepDefered.state === "fulfilled")
+      return;
+    console.log("pause");
+    isPaused = true;
+    clearTimeout(id);
+  };
+  const restart = () => {
+    if (sleepDefered.state === "fulfilled")
+      return;
+    console.log("restart");
+    isPaused = false;
+    clearTimeout(id);
+    id = setTimeout(sleepDefered.resolve, milliSeconds);
+  };
+  return { sleepPromise: sleepDefered, pause, restart };
+};
 const vec2lnglat = ([lng, lat]) => ({
   lng: Number(lng),
   lat: Number(lat)
@@ -3147,6 +3189,36 @@ const useMapFitView = (props) => {
   const { supplier } = useMapSupplier();
   return supplier === "gmap" ? useGmapFitView(props) : useAmapFitView(props);
 };
+const useAmapTouchEvent = () => {
+  const mapRef = useAmap();
+  const addMapEventListener = (name2, handler) => {
+    var _a;
+    return (_a = mapRef == null ? void 0 : mapRef.value) == null ? void 0 : _a.on(name2, handler);
+  };
+  const removeMapEventListener = (name2, handler) => {
+    var _a;
+    return (_a = mapRef == null ? void 0 : mapRef.value) == null ? void 0 : _a.off(name2, handler);
+  };
+  return { addMapEventListener, removeMapEventListener };
+};
+const useGmapTouchEvent = () => {
+  const mapRef = useGmap();
+  const addMapEventListener = (name2, handler) => {
+    var _a;
+    const container = (_a = mapRef == null ? void 0 : mapRef.value) == null ? void 0 : _a.getDiv();
+    return container == null ? void 0 : container.addEventListener(name2, handler);
+  };
+  const removeMapEventListener = (name2, handler) => {
+    var _a;
+    const container = (_a = mapRef == null ? void 0 : mapRef.value) == null ? void 0 : _a.getDiv();
+    return container == null ? void 0 : container.removeEventListener(name2, handler);
+  };
+  return { addMapEventListener, removeMapEventListener };
+};
+const useMapTouchEvent = () => {
+  const { supplier } = useMapSupplier();
+  return supplier === "gmap" ? useGmapTouchEvent() : useAmapTouchEvent();
+};
 defineSetup(function FitView(props, {
   slots
 }) {
@@ -3199,7 +3271,7 @@ function createFittableRegisterOverlay(registerOverlay) {
     setFitView
   };
 }
-const KeyedFitView = defineSetup(function KeyedFitView2(props, {
+defineSetup(function KeyedFitView(props, {
   slots
 }) {
   const mapMountedPromise = useMapMountedPromise();
@@ -3220,6 +3292,48 @@ const KeyedFitView = defineSetup(function KeyedFitView2(props, {
     return Vue.h("div", [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
   };
 });
+const InterruptableIntervalFitView = defineSetup(function InterruptableIntervalFitView2(props) {
+  const {
+    registerOverlay
+  } = props;
+  const mapMountedPromise = useMapMountedPromise();
+  const {
+    addMapEventListener,
+    removeMapEventListener
+  } = useMapTouchEvent();
+  Vue.watch(() => 0, async (_1, _2, onCleanup) => {
+    await mapMountedPromise;
+    let skip = false;
+    let pause;
+    let restart;
+    let sleepPromise;
+    const handleTouchStartOrMove = () => pause();
+    const handleTouchEnd = () => restart();
+    addMapEventListener("touchstart", handleTouchStartOrMove);
+    addMapEventListener("touchmove", handleTouchStartOrMove);
+    addMapEventListener("touchend", handleTouchEnd);
+    onCleanup(() => {
+      skip = true;
+      removeEventListener("touchstart", handleTouchStartOrMove);
+      removeMapEventListener("touchmove", handleTouchStartOrMove);
+      removeMapEventListener("touchend", handleTouchEnd);
+    });
+    while (!skip) {
+      ({
+        pause,
+        restart,
+        sleepPromise
+      } = pausableSleep(props.interval));
+      await sleepPromise;
+      console.log("InterruptableIntervalFitView setFitView");
+      registerOverlay.setFitView();
+    }
+  }, {
+    immediate: true,
+    flush: "post"
+  });
+  return () => null;
+});
 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 = "";
@@ -3473,12 +3587,13 @@ const patchMiniprogramRedirectTo = (wx2) => {
   };
   return patchedRedirectTo;
 };
-const DEVICE_ORIENTATION_INTERVAL = 1e3;
+const DEVICE_ORIENTATION_INTERVAL = 200;
 const CSS_DEVICE_ORIENTATION_VAR_PREFIX = "--CSS_DEVICE_ORIENTATION_VAR_ROTATION_DEGREE_";
 const useDeviceOrientation = (props) => {
   const { onChange, elementRef } = props;
   const orientation = Vue.reactive({ cssRotationVariableName: void 0 });
   const cssVarName = `${CSS_DEVICE_ORIENTATION_VAR_PREFIX}${Date.now()}`;
+  const toTransitionAngle = createToTransitionAngle();
   Vue.watch(
     () => elementRef.value,
     (element, _, onCleanup) => {
@@ -3488,7 +3603,7 @@ const useDeviceOrientation = (props) => {
         const alpha = webkitCompassHeading !== void 0 ? 360 - webkitCompassHeading : (_b = event.alpha) != null ? _b : void 0;
         const beta = (_c = event.beta) != null ? _c : void 0;
         const gamma = (_d = event.gamma) != null ? _d : void 0;
-        const cssRotationVariableValue = `${360 - (alpha != null ? alpha : 0)}deg`;
+        const cssRotationVariableValue = `${toTransitionAngle(360 - (alpha != null ? alpha : 0))}deg`;
         const cssRotationVariableName = alpha === void 0 ? void 0 : cssVarName;
         Object.assign(orientation, { alpha, beta, gamma });
         if (orientation.cssRotationVariableName !== cssRotationVariableName) {
@@ -3560,6 +3675,32 @@ function waitMiniProgramWebviewClose(duration) {
     }, duration);
   });
 }
+function createToTransitionAngle() {
+  let prev = void 0;
+  const mod = (x, m) => {
+    const negatabbleValue = x % m;
+    return negatabbleValue < 0 ? m + negatabbleValue : negatabbleValue;
+  };
+  return function toTransitionAngle(angle) {
+    if (prev === void 0) {
+      prev = angle;
+      console.log("toTransitionAngle angle = ", angle);
+      return angle;
+    }
+    const prevRemainder = mod(prev, 360);
+    const cycles = (prev - prevRemainder) / 360;
+    if (Math.abs(angle - prevRemainder) <= 180) {
+      const result = angle + cycles * 360;
+      prev = result;
+      return result;
+    } else {
+      const deltaCycles = angle > prevRemainder ? -1 : 1;
+      const result = angle + (cycles + deltaCycles) * 360;
+      prev = result;
+      return result;
+    }
+  };
+}
 const watchVisibilityState = () => {
   const visibilityStateRef = Vue.ref(document.visibilityState);
   const handleVisibilityChange = () => {
@@ -3574,6 +3715,7 @@ const watchVisibilityState = () => {
 const WX_GET_LOCATION_INTERVAL_STILL = 10 * 1e3;
 const WX_GET_LOCATION_INTERVAL_SLOW = 3 * 1e3;
 const WX_GET_LOCATION_INTERVAL_FAST = 1 * 1e3;
+const ANDROID_GET_LOCATION_INTERVAL = 1 * 1e3;
 const takeIsForceBrowserGeo = () => {
   const searchParam = new URLSearchParams(location.search);
   return searchParam.has(`force-browser-geo`);
@@ -3582,14 +3724,6 @@ const wxReady = () => new Promise((resolve, reject) => {
   wx.ready(resolve);
   wx.error(reject);
 });
-const detectPlatform = () => {
-  const useragent = navigator.userAgent.toLowerCase();
-  if (useragent.includes("micromessenger"))
-    return "wechat";
-  if (useragent.includes("alipay"))
-    return "alipay";
-  return "other";
-};
 function wechatWatchPosition(onSuccess, onError, option) {
   const { timeout } = option;
   let enable = true;
@@ -3651,20 +3785,67 @@ function wechatWatchPosition(onSuccess, onError, option) {
     unwatchVisibilityState();
   };
 }
+function androidWatchPosition(onSuccess, onError, option) {
+  let enable = true;
+  let prevGeoPosition = void 0;
+  const isGeoWorkingRef = Vue.ref(true);
+  const { visibilityStateRef, unwatchVisibilityState } = watchVisibilityState();
+  const startWatch = async () => {
+    do {
+      if (visibilityStateRef.value === "hidden") {
+        await sleep(ANDROID_GET_LOCATION_INTERVAL);
+        continue;
+      }
+      const geoPosition = await new Promise((resolve) => {
+        navigator.geolocation.getCurrentPosition(
+          function onSuccess2(geoLocationPosition) {
+            isGeoWorkingRef.value = true;
+            resolve(geoLocationPosition);
+          },
+          function onFail(geoError) {
+            const isGeoWorking = isGeoWorkingRef.value;
+            isGeoWorkingRef.value = false;
+            resolve(void 0);
+            if (!isGeoWorking)
+              return;
+            console.warn(
+              "MyWarning: navigator.geolocation.getCurrentPosition failed: ",
+              geoError.message
+            );
+            onError == null ? void 0 : onError(geoError);
+          },
+          option
+        );
+      });
+      if (geoPosition && !isGeoPositionEqual(geoPosition, prevGeoPosition))
+        onSuccess(geoPosition);
+      prevGeoPosition = geoPosition;
+      await sleep(ANDROID_GET_LOCATION_INTERVAL);
+    } while (enable);
+  };
+  startWatch();
+  return () => {
+    enable = false;
+    unwatchVisibilityState();
+  };
+}
 function compatibleWathPosition(onSuccess, onError, option) {
   const isForceBrowserGeo = takeIsForceBrowserGeo();
   if (isForceBrowserGeo) {
-    const watchId = navigator.geolocation.watchPosition(onSuccess, onError, option);
-    return () => navigator.geolocation.clearWatch(watchId);
+    const watchId2 = navigator.geolocation.watchPosition(onSuccess, onError, option);
+    return () => navigator.geolocation.clearWatch(watchId2);
   }
-  switch (detectPlatform()) {
-    case "wechat":
-      return wechatWatchPosition(onSuccess, onError, option);
-    default: {
-      const watchId = navigator.geolocation.watchPosition(onSuccess, onError, option);
-      return () => navigator.geolocation.clearWatch(watchId);
-    }
+  const browserPlatform = detectBrowserPlatform();
+  const osPlatform = detectOSPlatform();
+  console.log("osPlatform = ", osPlatform);
+  if (browserPlatform === BRWOSER_PLATFORM.WECHAT || browserPlatform === BRWOSER_PLATFORM.WECHAT_MINIPROGRAM) {
+    return wechatWatchPosition(onSuccess, onError, option);
+  }
+  if (osPlatform === OS_PLATFORM.ANDROID) {
+    return androidWatchPosition(onSuccess, onError, option);
   }
+  const watchId = navigator.geolocation.watchPosition(onSuccess, onError, option);
+  return () => navigator.geolocation.clearWatch(watchId);
 }
 class SingleGeoWatch {
   constructor(option) {
@@ -5758,6 +5939,69 @@ const useMapRecomendPlace = (props) => {
   const { supplier } = useMapSupplier();
   return supplier === "gmap" ? useGmapRecomendPlace(props) : useAmapRecomendPlace(props);
 };
+const GOOGLE_MAP_ZOOM_CHANGE_DEBOUNCE_TIMEOUT = 50;
+const DEFAULT_ZOOM$1 = 13;
+const useAmapZoom = (props) => {
+  var _a, _b, _c;
+  const { onChange, mapRef, defaultValue } = props;
+  const zoomRef = Vue.ref((_c = (_b = (_a = mapRef.value) == null ? void 0 : _a.getZoom()) != null ? _b : defaultValue) != null ? _c : DEFAULT_ZOOM$1);
+  const setZoom = (v) => {
+    var _a2;
+    zoomRef.value = v;
+    (_a2 = mapRef.value) == null ? void 0 : _a2.setZoom(v, true);
+  };
+  const handleZoomEnd = (_, { target }) => {
+    const zoom = target.getZoom();
+    zoomRef.value = zoom;
+    onChange == null ? void 0 : onChange(zoom);
+  };
+  Vue.watch(
+    () => mapRef.value,
+    (map) => {
+      if (!map)
+        return;
+      zoomRef.value = map.getZoom();
+    }
+  );
+  watchPostEffectForAMapEvent(mapRef, {}, handleZoomEnd, [
+    "onZoomEnd"
+  ]);
+  return { zoomRef, setZoom };
+};
+const useGmapZoom = (props) => {
+  var _a, _b, _c;
+  const { onChange, mapRef, defaultValue } = props;
+  const zoomRef = Vue.ref((_c = (_b = (_a = mapRef.value) == null ? void 0 : _a.getZoom()) != null ? _b : defaultValue) != null ? _c : DEFAULT_ZOOM$1);
+  const setZoom = (v) => {
+    var _a2;
+    zoomRef.value = v;
+    (_a2 = mapRef.value) == null ? void 0 : _a2.setZoom(v);
+  };
+  const handleZoomChange = debounce(
+    (_, { target }) => {
+      const zoom = target.getZoom();
+      zoomRef.value = zoom;
+      onChange == null ? void 0 : onChange(zoom);
+    },
+    GOOGLE_MAP_ZOOM_CHANGE_DEBOUNCE_TIMEOUT
+  );
+  Vue.watch(
+    () => mapRef.value,
+    (map) => {
+      if (!map)
+        return;
+      zoomRef.value = map.getZoom();
+    }
+  );
+  watchPostEffectForGMapEvent(mapRef, {}, handleZoomChange, [
+    "onZoom_changed"
+  ]);
+  return { zoomRef, setZoom };
+};
+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();
@@ -6012,77 +6256,13 @@ const ConditionalFittablePassengerCircle = defineSetup(function ConditionalFitta
         "size": "small",
         "registerOverlay": registerOverlay
       }
-    }), Vue.h(KeyedFitView, {
+    }), Vue.h(FitViewOnce, {
       "attrs": {
-        "registerOverlay": registerOverlay,
-        "fitViewKey": JSON.stringify(position)
+        "registerOverlay": registerOverlay
       }
     })]);
   };
 });
-const GOOGLE_MAP_ZOOM_CHANGE_DEBOUNCE_TIMEOUT = 50;
-const DEFAULT_ZOOM$1 = 13;
-const useAmapZoom = (props) => {
-  var _a, _b, _c;
-  const { onChange, mapRef, defaultValue } = props;
-  const zoomRef = Vue.ref((_c = (_b = (_a = mapRef.value) == null ? void 0 : _a.getZoom()) != null ? _b : defaultValue) != null ? _c : DEFAULT_ZOOM$1);
-  const setZoom = (v) => {
-    var _a2;
-    zoomRef.value = v;
-    (_a2 = mapRef.value) == null ? void 0 : _a2.setZoom(v, true);
-  };
-  const handleZoomEnd = (_, { target }) => {
-    const zoom = target.getZoom();
-    zoomRef.value = zoom;
-    onChange == null ? void 0 : onChange(zoom);
-  };
-  Vue.watch(
-    () => mapRef.value,
-    (map) => {
-      if (!map)
-        return;
-      zoomRef.value = map.getZoom();
-    }
-  );
-  watchPostEffectForAMapEvent(mapRef, {}, handleZoomEnd, [
-    "onZoomEnd"
-  ]);
-  return { zoomRef, setZoom };
-};
-const useGmapZoom = (props) => {
-  var _a, _b, _c;
-  const { onChange, mapRef, defaultValue } = props;
-  const zoomRef = Vue.ref((_c = (_b = (_a = mapRef.value) == null ? void 0 : _a.getZoom()) != null ? _b : defaultValue) != null ? _c : DEFAULT_ZOOM$1);
-  const setZoom = (v) => {
-    var _a2;
-    zoomRef.value = v;
-    (_a2 = mapRef.value) == null ? void 0 : _a2.setZoom(v);
-  };
-  const handleZoomChange = debounce(
-    (_, { target }) => {
-      const zoom = target.getZoom();
-      zoomRef.value = zoom;
-      onChange == null ? void 0 : onChange(zoom);
-    },
-    GOOGLE_MAP_ZOOM_CHANGE_DEBOUNCE_TIMEOUT
-  );
-  Vue.watch(
-    () => mapRef.value,
-    (map) => {
-      if (!map)
-        return;
-      zoomRef.value = map.getZoom();
-    }
-  );
-  watchPostEffectForGMapEvent(mapRef, {}, handleZoomChange, [
-    "onZoom_changed"
-  ]);
-  return { zoomRef, setZoom };
-};
-const useMapZoom = (props) => {
-  const { supplier } = useMapSupplier();
-  return supplier === "gmap" ? useGmapZoom(props) : useAmapZoom(props);
-};
 const usePointsLabelDirection = (props) => {
   const { widthLimit, heightLimit } = props;
   const mapRef = useMap();
@@ -6460,10 +6640,11 @@ const RECOMMEND_PLACE_DRAG_LIMIT = 10;
 const RECOMMEND_PLACE_LARGE_LIMIT = 100;
 const RECOMMEND_PLACE_ICON_ZOOM_MIN = 16.25;
 const RECOMMEND_PLACE_TEXT_ZOOM_MIN = 16.25;
-const RECOMMEND_PLACE_ZONE_ICON_MIN = 15.25;
+const RECOMMEND_PLACE_ZONE_ICON_MIN = 12.75;
 const RECOMMEND_PLACE_ZONE_TEXT_MIN = 21;
 const DEFAULT_PLACE_NAME = "当前位置";
 const DEFAULT_ZOOM = 17;
+const ZONE_ZOOM = 13.75;
 const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlaceMap2(props, {
   emit,
   slots
@@ -6483,6 +6664,13 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
     setMap,
     panTo
   } = useHeycarMap();
+  const {
+    zoomRef,
+    setZoom
+  } = useMapZoom({
+    mapRef,
+    defaultValue: DEFAULT_ZOOM
+  });
   const {
     readyPromise
   } = useMapSupplier();
@@ -6521,6 +6709,7 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
     centerPlace.name = place.name;
     centerPlace.displayName = place.displayName;
     setPlaceCandidatesAndZone(recommends);
+    setZoom(ZONE_ZOOM);
     emit("changePlace", {
       ...place
     });
@@ -6532,6 +6721,8 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
     centerPlace.lat = place.lat;
     centerPlace.name = place.name;
     centerPlace.displayName = place.displayName;
+    if (zoneRef.value)
+      setZoom(ZONE_ZOOM);
     emit("changePlace", {
       ...place
     });
@@ -6640,6 +6831,8 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
       Object.assign(centerPlace, {
         ...place
       });
+      if (isInZone)
+        setZoom(ZONE_ZOOM);
       emit("changeRecomandPlace", {
         place,
         inputPlace,
@@ -6667,7 +6860,7 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
     return Vue.h(HeycarMap, {
       "attrs": {
         "center": centerPoint.value,
-        "zoom": DEFAULT_ZOOM,
+        "zoom": zoomRef.value,
         "touchZoomCenter": true,
         "mapRef": setMap,
         "fallback": slots.fallback,
@@ -6729,6 +6922,13 @@ const BusinessReselectPlaceMap = defineLagecySetup(function BusinessReselectPlac
     setMap,
     panTo
   } = useHeycarMap();
+  const {
+    zoomRef,
+    setZoom
+  } = useMapZoom({
+    mapRef,
+    defaultValue: DEFAULT_ZOOM
+  });
   const centerPlace = Vue.reactive({
     lng: defaultPlace.lng,
     lat: defaultPlace.lat,
@@ -6763,6 +6963,7 @@ const BusinessReselectPlaceMap = defineLagecySetup(function BusinessReselectPlac
     centerPlace.lat = place.lat;
     centerPlace.name = place.name;
     centerPlace.displayName = place.displayName;
+    setZoom(ZONE_ZOOM);
     setPlaceCandidatesAndZone(recommends);
     emit("changePlace", {
       ...place
@@ -6775,6 +6976,8 @@ const BusinessReselectPlaceMap = defineLagecySetup(function BusinessReselectPlac
     centerPlace.lat = place.lat;
     centerPlace.name = place.name;
     centerPlace.displayName = place.displayName;
+    if (zoneRef.value)
+      setZoom(ZONE_ZOOM);
     emit("changePlace", {
       ...place
     });
@@ -6862,6 +7065,8 @@ const BusinessReselectPlaceMap = defineLagecySetup(function BusinessReselectPlac
       Object.assign(centerPlace, {
         ...place
       });
+      if (isInZone)
+        setZoom(ZONE_ZOOM);
       emit("changeRecomandPlace", {
         place,
         inputPlace,
@@ -6892,7 +7097,7 @@ const BusinessReselectPlaceMap = defineLagecySetup(function BusinessReselectPlac
     return Vue.h(HeycarMap, {
       "attrs": {
         "center": centerPoint.value,
-        "zoom": DEFAULT_ZOOM,
+        "zoom": zoomRef.value,
         "touchZoomCenter": true,
         "mapRef": setMap,
         "fallback": slots.fallback,
@@ -6911,8 +7116,8 @@ const BusinessReselectPlaceMap = defineLagecySetup(function BusinessReselectPlac
       "attrs": {
         "basePlace": centerPlace,
         "places": placeCandidates.value,
-        "zoomIconMin": RECOMMEND_PLACE_ICON_ZOOM_MIN,
-        "zoomTextMin": RECOMMEND_PLACE_TEXT_ZOOM_MIN
+        "zoomIconMin": zoneRef.value ? RECOMMEND_PLACE_ZONE_ICON_MIN : RECOMMEND_PLACE_ICON_ZOOM_MIN,
+        "zoomTextMin": zoneRef.value ? RECOMMEND_PLACE_ZONE_TEXT_MIN : RECOMMEND_PLACE_TEXT_ZOOM_MIN
       },
       "on": {
         "click": panToCenterByPlace
@@ -7302,6 +7507,7 @@ const WaveCircle = defineSetup(function WaveCircle2(props) {
 const PASSENGER_DISTANCE_MAX = 2e3;
 const PASSENGER_DISTANCE_MIN = 10;
 const CAR_DISTANCE_MIN = 100;
+const AUTO_FIT_VIEW_INTERVAL = 15e3;
 const carDurationWithinMinDistance = (distance) => Math.floor(distance / 5);
 const SectionDispatching = defineSetup(function SectionDispatching2(props) {
   return () => {
@@ -7332,6 +7538,11 @@ const SectionDispatching = defineSetup(function SectionDispatching2(props) {
       "attrs": {
         "registerOverlay": registerOverlay
       }
+    }), Vue.h(InterruptableIntervalFitView, {
+      "attrs": {
+        "interval": AUTO_FIT_VIEW_INTERVAL,
+        "registerOverlay": registerOverlay
+      }
     })]);
   };
 });
@@ -7397,10 +7608,19 @@ const SectionConfirmed = defineSetup(function SectionConfirmed2(props) {
       "attrs": {
         "registerOverlay": registerOverlay
       }
+    }), Vue.h(InterruptableIntervalFitView, {
+      "attrs": {
+        "interval": AUTO_FIT_VIEW_INTERVAL,
+        "registerOverlay": registerOverlay
+      }
     })]);
   };
 });
 const SectionDriverStartService = defineSetup(function SectionDriverStartService2(props) {
+  const {
+    registerOverlay
+  } = props;
+  const fittableRegistryOverlay = createFittableRegisterOverlay(registerOverlay);
   const {
     apiMapDistance
   } = useMapGeometry();
@@ -7411,8 +7631,7 @@ const SectionDriverStartService = defineSetup(function SectionDriverStartService
       carAngle,
       passengerPosition,
       passengerAngle,
-      renderTitle,
-      registerOverlay
+      renderTitle
     } = props;
     const from = place2point(fromPlace);
     const passengerDistance = passengerPosition ? apiMapDistance(passengerPosition, from) : void 0;
@@ -7446,7 +7665,7 @@ const SectionDriverStartService = defineSetup(function SectionDriverStartService
           distance,
           duration
         }) => {
-          var _a, _b;
+          var _a;
           spaceLog("angleDifference", "carPosition, routeAngle, driverAngle = ", carPosition, angle, carAngle);
           return [Vue.h(DrivingLine, {
             "attrs": {
@@ -7460,12 +7679,7 @@ const SectionDriverStartService = defineSetup(function SectionDriverStartService
                 distance,
                 duration
               }),
-              "registerOverlay": registerOverlay
-            }
-          }), Vue.h(KeyedFitView, {
-            "attrs": {
-              "registerOverlay": registerOverlay,
-              "fitViewKey": JSON.stringify((_b = path[0]) != null ? _b : carPosition)
+              "registerOverlay": fittableRegistryOverlay
             }
           })];
         }
@@ -7478,12 +7692,7 @@ const SectionDriverStartService = defineSetup(function SectionDriverStartService
           distance: carDistance,
           duration: carDurationWithinMinDistance(carDistance)
         }),
-        "registerOverlay": registerOverlay
-      }
-    }), Vue.h(KeyedFitView, {
-      "attrs": {
-        "registerOverlay": registerOverlay,
-        "fitViewKey": JSON.stringify(carPosition)
+        "registerOverlay": fittableRegistryOverlay
       }
     })], !!passengerPosition && passengerDistance && passengerDistance < PASSENGER_DISTANCE_MAX && passengerDistance > PASSENGER_DISTANCE_MIN && Vue.h(WalkingRoute, {
       "attrs": {
@@ -7501,6 +7710,11 @@ const SectionDriverStartService = defineSetup(function SectionDriverStartService
       "attrs": {
         "registerOverlay": registerOverlay
       }
+    }), Vue.h(InterruptableIntervalFitView, {
+      "attrs": {
+        "interval": AUTO_FIT_VIEW_INTERVAL,
+        "registerOverlay": registerOverlay
+      }
     })]);
   };
 });
@@ -7578,10 +7792,19 @@ const SectionBookDispatched = defineSetup(function SectionBookDispatched2(props)
       "attrs": {
         "registerOverlay": registerOverlay
       }
+    }), Vue.h(InterruptableIntervalFitView, {
+      "attrs": {
+        "interval": AUTO_FIT_VIEW_INTERVAL,
+        "registerOverlay": registerOverlay
+      }
     })]);
   };
 });
 const SectionDriverArrived = defineSetup(function SectionDriverArrived2(props) {
+  const {
+    registerOverlay
+  } = props;
+  const fittableRegistryOverlay = createFittableRegisterOverlay(registerOverlay);
   const {
     apiMapDistance
   } = useMapGeometry();
@@ -7592,8 +7815,7 @@ const SectionDriverArrived = defineSetup(function SectionDriverArrived2(props) {
       carAngle,
       passengerPosition,
       passengerAngle,
-      title,
-      registerOverlay
+      title
     } = props;
     const from = place2point(fromPlace);
     const passengerDistance = passengerPosition ? apiMapDistance(passengerPosition, from) : void 0;
@@ -7621,12 +7843,7 @@ const SectionDriverArrived = defineSetup(function SectionDriverArrived2(props) {
         "position": carPosition,
         "angle": carAngle,
         "title": title,
-        "registerOverlay": registerOverlay
-      }
-    }), Vue.h(KeyedFitView, {
-      "attrs": {
-        "registerOverlay": registerOverlay,
-        "fitViewKey": JSON.stringify(carPosition)
+        "registerOverlay": fittableRegistryOverlay
       }
     })], Vue.h(StartEndPoint, {
       "attrs": {
@@ -7644,17 +7861,25 @@ const SectionDriverArrived = defineSetup(function SectionDriverArrived2(props) {
       "attrs": {
         "registerOverlay": registerOverlay
       }
+    }), Vue.h(InterruptableIntervalFitView, {
+      "attrs": {
+        "interval": AUTO_FIT_VIEW_INTERVAL,
+        "registerOverlay": registerOverlay
+      }
     })]);
   };
 });
 const SectionInService = defineSetup(function SectionInService2(props) {
+  const {
+    registerOverlay
+  } = props;
+  const fittableRegistryOverlay = createFittableRegisterOverlay(registerOverlay);
   return () => {
     const {
       to: toPlace,
       carPosition,
       carAngle,
-      renderTitle,
-      registerOverlay
+      renderTitle
     } = props;
     const to = place2point(toPlace);
     const {
@@ -7671,7 +7896,7 @@ const SectionInService = defineSetup(function SectionInService2(props) {
           distance,
           duration
         }) => {
-          var _a, _b;
+          var _a;
           spaceLog("angleDifference", "carPosition, routeAngle, driverAngle = ", carPosition, angle, carAngle);
           return [Vue.h(DrivingLine, {
             "attrs": {
@@ -7685,12 +7910,7 @@ const SectionInService = defineSetup(function SectionInService2(props) {
                 distance,
                 duration
               }),
-              "registerOverlay": registerOverlay
-            }
-          }), Vue.h(KeyedFitView, {
-            "attrs": {
-              "registerOverlay": registerOverlay,
-              "fitViewKey": JSON.stringify((_b = path[0]) != null ? _b : carPosition)
+              "registerOverlay": fittableRegistryOverlay
             }
           })];
         }
@@ -7703,12 +7923,7 @@ const SectionInService = defineSetup(function SectionInService2(props) {
           distance: carDistance,
           duration: carDurationWithinMinDistance(carDistance)
         }),
-        "registerOverlay": registerOverlay
-      }
-    }), Vue.h(KeyedFitView, {
-      "attrs": {
-        "registerOverlay": registerOverlay,
-        "fitViewKey": JSON.stringify(carPosition)
+        "registerOverlay": fittableRegistryOverlay
       }
     })], Vue.h(StartEndPoint, {
       "attrs": {
@@ -7726,6 +7941,11 @@ const SectionInService = defineSetup(function SectionInService2(props) {
       "attrs": {
         "registerOverlay": registerOverlay
       }
+    }), Vue.h(InterruptableIntervalFitView, {
+      "attrs": {
+        "interval": AUTO_FIT_VIEW_INTERVAL,
+        "registerOverlay": registerOverlay
+      }
     })]);
   };
 });
@@ -7766,6 +7986,11 @@ const SectionCanceled = defineSetup(function SectionCanceled2(props) {
       "attrs": {
         "registerOverlay": registerOverlay
       }
+    }), Vue.h(InterruptableIntervalFitView, {
+      "attrs": {
+        "interval": AUTO_FIT_VIEW_INTERVAL,
+        "registerOverlay": registerOverlay
+      }
     })]);
   };
 });
@@ -7819,6 +8044,11 @@ const SectionEndService = defineSetup(function SectionEndService2(props) {
       "attrs": {
         "registerOverlay": registerOverlay
       }
+    }), Vue.h(InterruptableIntervalFitView, {
+      "attrs": {
+        "interval": AUTO_FIT_VIEW_INTERVAL,
+        "registerOverlay": registerOverlay
+      }
     })]);
   };
 });