@heycar/heycars-map 0.6.2 → 0.6.4

package/dist/components/Gmap/Gmap.css.d.ts

@@ -1,2 +1,10 @@
 export declare const gmap: string;
+export declare const noneTouchAction: import("@vanilla-extract/recipes").RuntimeFn<{
+    enable: {
+        true: {
+            touchAction: "none";
+        };
+        false: {};
+    };
+}>;
 export declare const gmapLayout: string;

package/dist/components/Gmap/Gmap.d.ts

@@ -4,9 +4,10 @@ import { UseResizeObserverProps } from "../../hooks/useResizeObserver";
 import type { MapEventHandler } from "../../types/mapHelper";
 export interface GmapProps extends google.maps.MapOptions {
     mapRef?: SetMap<google.maps.Map>;
+    touchZoomCenter?: boolean;
     onDragStart?: MapEventHandler<google.maps.Map>;
     onDragEnd?: MapEventHandler<google.maps.Map>;
-    onZoom_change?: MapEventHandler<google.maps.Map>;
+    onZoom_changed?: MapEventHandler<google.maps.Map>;
     onResize?: UseResizeObserverProps["onChange"];
 }
-export declare const Gmap: import("vue-demi").DefineComponent<import("vue/types/v3-component-props").ComponentObjectPropsOptions<GmapProps>, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").EmitByProps<GmapProps, Required<GmapProps>>, "resize" | "dragStart" | "dragEnd" | "zoom_change", GmapProps, {}>;
+export declare const Gmap: import("vue-demi").DefineComponent<import("vue/types/v3-component-props").ComponentObjectPropsOptions<GmapProps>, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").EmitByProps<GmapProps, Required<GmapProps>>, "resize" | "dragStart" | "dragEnd" | "zoom_changed", GmapProps, {}>;

package/dist/hooks/useMapGestureZoomCenter.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="google.maps" />
+import { Ref, ShallowRef } from "vue-demi";
+interface UseMapGestureZoomCenterProps {
+    elementRef: ShallowRef<HTMLDivElement | undefined>;
+    mapRef: ShallowRef<google.maps.Map | undefined>;
+    enableRef: Ref<boolean>;
+}
+export declare const useGmapGestureZoomCenter: (props: UseMapGestureZoomCenterProps) => void;
+export {};

package/dist/hooks/useMapTouchStartCenter.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="google.maps" />
+import { ShallowRef } from "vue-demi";
+interface UseGmapTouchStartCenterProps {
+    mapRef: ShallowRef<google.maps.Map | undefined>;
+    elementRef: ShallowRef<HTMLDivElement | undefined>;
+}
+export declare const useGmapTouchStartCenter: (props: UseGmapTouchStartCenterProps) => {
+    touchstartCenterRef: import("vue-demi").Ref<[number, number] | undefined>;
+};
+export {};

package/dist/hooks/useMapWheelZoomCenter.d.ts

@@ -5,4 +5,5 @@ interface UseWheelZoomCenterProps<M = AMap.Map | google.maps.Map> {
     enableRef?: Ref<boolean>;
 }
 export declare const useAmapWheelZoomCenter: (props: UseWheelZoomCenterProps<AMap.Map>) => void;
+export declare const useGmapWheelZoomCenter: (props: UseWheelZoomCenterProps<google.maps.Map>) => void;
 export {};

package/dist/hooks/useResizeObserver.d.ts

@@ -1,6 +1,6 @@
 import { ShallowRef } from "vue-demi";
 export interface UseResizeObserverProps {
-    elementRef: ShallowRef<HTMLDivElement>;
+    elementRef: ShallowRef<HTMLDivElement | undefined>;
     onChange?: (props: {
         width: number;
         height: number;

package/dist/index.cjs

@@ -1043,7 +1043,7 @@ function watchPostEffectForGMapEvent(targetRef, props, emit, propertyNames) {
     for (const name of propertyNames) {
       const emitEventName = property2emitEventName(name);
       const eventName = property2mapEventName(name);
-      const handler = (e) => emit(emitEventName, e);
+      const handler = (e) => emit(emitEventName, { ...e, target });
       const listener = target.addListener(eventName, handler);
       cleanList.push(() => google.maps.event.removeListener(listener));
     }
@@ -1977,6 +1977,25 @@ const useMapEventSource = () => {
   };
   return { executeMapApi };
 };
+const useGmapTouchStartCenter = (props) => {
+  const { mapRef, elementRef } = props;
+  const touchstartCenterRef = Vue.ref(void 0);
+  Vue.watchEffect((onCleanup) => {
+    const map = mapRef.value;
+    const element = elementRef.value;
+    if (!map || !element)
+      return;
+    const handleTouchStart = () => {
+      const center = map.getCenter();
+      const lng = center == null ? void 0 : center.lng();
+      const lat = center == null ? void 0 : center.lat();
+      touchstartCenterRef.value = lng && lat ? [lng, lat] : void 0;
+    };
+    element.addEventListener("touchstart", handleTouchStart);
+    onCleanup(() => element.removeEventListener("touchstart", handleTouchStart));
+  });
+  return { touchstartCenterRef };
+};
 const useResizeObserver = (props) => {
   const { elementRef, onChange } = props;
   const resizeObserver = new ResizeObserver(([entry]) => {
@@ -1997,27 +2016,109 @@ const useResizeObserver = (props) => {
   });
 };
 const Gmap_css_ts_vanilla = "";
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function ownKeys(object, enumerableOnly) {
+  var keys2 = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function(sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys2.push.apply(keys2, symbols);
+  }
+  return keys2;
+}
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), true).forEach(function(key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+  return target;
+}
+var shouldApplyCompound = (compoundCheck, selections, defaultVariants) => {
+  for (var key of Object.keys(compoundCheck)) {
+    var _selections$key;
+    if (compoundCheck[key] !== ((_selections$key = selections[key]) !== null && _selections$key !== void 0 ? _selections$key : defaultVariants[key])) {
+      return false;
+    }
+  }
+  return true;
+};
+var createRuntimeFn = (config) => (options) => {
+  var className = config.defaultClassName;
+  var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
+  for (var variantName in selections) {
+    var _selections$variantNa;
+    var variantSelection = (_selections$variantNa = selections[variantName]) !== null && _selections$variantNa !== void 0 ? _selections$variantNa : config.defaultVariants[variantName];
+    if (variantSelection != null) {
+      var selection = variantSelection;
+      if (typeof selection === "boolean") {
+        selection = selection === true ? "true" : "false";
+      }
+      var selectionClassName = (
+        // @ts-expect-error
+        config.variantClassNames[variantName][selection]
+      );
+      if (selectionClassName) {
+        className += " " + selectionClassName;
+      }
+    }
+  }
+  for (var [compoundCheck, compoundClassName] of config.compoundVariants) {
+    if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) {
+      className += " " + compoundClassName;
+    }
+  }
+  return className;
+};
 var gmap = "_7anfuo0";
+createRuntimeFn({ defaultClassName: "", variantClassNames: { enable: { true: "_7anfuo1", false: "_7anfuo2" } }, defaultVariants: {}, compoundVariants: [] });
 const Gmap = defineSetup(function Gmap2(props, { slots, emit }) {
   const setMap = props.mapRef;
   const { onResize } = props;
   const options = Vue.computed(() => {
-    const { mapRef: mapRef2, onDragStart, onDragEnd, onZoom_change, ...options2 } = props;
+    const { mapRef: mapRef2, onDragStart, onDragEnd, onZoom_changed, touchZoomCenter, ...options2 } = props;
     return options2;
   });
   const defaultOptions = options.value;
   const elementRef = Vue.shallowRef();
   const mapRef = Vue.shallowRef();
   const { executeMapApi } = useMapEventSource();
-  const handleDrag = (name) => emit(name, { target: mapRef.value });
+  const { touchstartCenterRef } = useGmapTouchStartCenter({ mapRef, elementRef });
+  const handleDrag = (name) => {
+    emit(name, { target: mapRef.value });
+  };
+  const handleZoom = (name) => {
+    var _a;
+    emit(name, { target: mapRef.value });
+    const center = touchstartCenterRef.value;
+    if (center)
+      (_a = mapRef.value) == null ? void 0 : _a.setCenter(vec2lnglat(center));
+  };
   provideGmap(mapRef);
   useResizeObserver({ elementRef, onChange: onResize });
   Vue.watchPostEffect(() => {
-    if (mapRef.value || !elementRef.value)
+    const element = elementRef.value;
+    if (mapRef.value || !element)
       return;
     let map;
     executeMapApi(() => {
-      map = new google.maps.Map(elementRef.value, { ...defaultOptions });
+      map = new google.maps.Map(element, { ...defaultOptions });
       window.GlobalGmap = map;
     });
     mapRef.value = map;
@@ -2032,11 +2133,8 @@ const Gmap = defineSetup(function Gmap2(props, { slots, emit }) {
       });
     }
   );
-  watchPostEffectForGMapEvent(mapRef, props, handleDrag, [
-    "onDragStart",
-    "onDragEnd",
-    "onZoom_change"
-  ]);
+  watchPostEffectForGMapEvent(mapRef, props, handleDrag, ["onDragStart", "onDragEnd"]);
+  watchPostEffectForGMapEvent(mapRef, props, handleZoom, ["onZoom_changed"]);
   return () => {
     var _a;
     return Vue.h("div", { ref: elementRef, class: gmap }, (_a = slots.default) == null ? void 0 : _a.call(slots));
@@ -2115,12 +2213,14 @@ const HeycarMap = defineLagecySetup(function HeycarMap2(props, {
           "attrs": {
             "mapRef": setMap,
             "mapId": gmapId,
-            "center": center ? vec2lnglat(center) : void 0,
+            "center": center ? vec2lnglat(center.map(Number)) : void 0,
             "zoom": zoom,
             "disableDefaultUI": true,
+            "clickableIcons": false,
             "disableDoubleClickZoom": touchEnable,
             "gestureHandling": touchEnable ? "auto" : "none",
-            "keyboardShortcuts": touchEnable
+            "keyboardShortcuts": touchEnable,
+            "touchZoomCenter": touchZoomCenter
           },
           "on": {
             "dragEnd": gmapHandleDargEnd,
@@ -2269,11 +2369,11 @@ const GDrivingLine = defineSetup(function GDrivingLine2(props) {
   const pathRef = Vue.computed(() => props.path.map(vec2lnglat));
   return () => {
     const vw = window.innerWidth * 0.01;
-    const repeat = 5 * vw;
-    const strokeWidth = 1.25 * vw;
-    const borderWidth = 0.175 * vw;
-    const dirStrokeWeight = 0.375 * vw;
-    const outlineWidth = 0.4 * vw;
+    const repeat = 10 * vw;
+    const strokeWidth = 1.25 * vw * 0.65;
+    const borderWidth = 0.175 * vw * 0.65;
+    const dirStrokeWeight = 0.375 * vw * 0.65;
+    const outlineWidth = 0.45 * vw * 0.65;
     const strokeColorInner = props.done ? "#96B2CA" : "#487BF4";
     const strokeColorOuter = props.done ? "#7693AF" : "#4175F1";
     const strokeColorBorder = props.done ? "#7693AF" : "#6C95F5";
@@ -2310,7 +2410,7 @@ const GDrivingLine = defineSetup(function GDrivingLine2(props) {
             path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
             strokeColor: "white",
             strokeWeight: dirStrokeWeight,
-            scale: 1
+            scale: 0.7
           },
           repeat: `${repeat}px`
         }]
@@ -2539,7 +2639,7 @@ const spaceLog = (logKey, ...args) => {
     return;
   console.log(logKey, ...args);
 };
-const GOOGLE_MAP_ZOOM_CHANGE_DEBOUNCE_TIMEOUT = 20;
+const GOOGLE_MAP_ZOOM_CHANGE_DEBOUNCE_TIMEOUT$1 = 20;
 const useAmapFitView = (props) => {
   const { mapRef, autoFitTimeout } = props;
   const overlayGroup = /* @__PURE__ */ new Set();
@@ -2661,7 +2761,7 @@ const useGmapFitView = (props) => {
       setFitView();
     }, autoFitTimeout);
   };
-  const handleZoomChange = debounce(handleMoveEnd, GOOGLE_MAP_ZOOM_CHANGE_DEBOUNCE_TIMEOUT);
+  const handleZoomChange = debounce(handleMoveEnd, GOOGLE_MAP_ZOOM_CHANGE_DEBOUNCE_TIMEOUT$1);
   watchPostEffectForGMapEvent(mapRef, {}, handleMoveEnd, [
     "onDragEnd"
   ]);
@@ -2759,76 +2859,6 @@ 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 = "";
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
-function ownKeys(object, enumerableOnly) {
-  var keys2 = Object.keys(object);
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function(sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys2.push.apply(keys2, symbols);
-  }
-  return keys2;
-}
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), true).forEach(function(key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    });
-  }
-  return target;
-}
-var shouldApplyCompound = (compoundCheck, selections, defaultVariants) => {
-  for (var key of Object.keys(compoundCheck)) {
-    var _selections$key;
-    if (compoundCheck[key] !== ((_selections$key = selections[key]) !== null && _selections$key !== void 0 ? _selections$key : defaultVariants[key])) {
-      return false;
-    }
-  }
-  return true;
-};
-var createRuntimeFn = (config) => (options) => {
-  var className = config.defaultClassName;
-  var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
-  for (var variantName in selections) {
-    var _selections$variantNa;
-    var variantSelection = (_selections$variantNa = selections[variantName]) !== null && _selections$variantNa !== void 0 ? _selections$variantNa : config.defaultVariants[variantName];
-    if (variantSelection != null) {
-      var selection = variantSelection;
-      if (typeof selection === "boolean") {
-        selection = selection === true ? "true" : "false";
-      }
-      var selectionClassName = (
-        // @ts-expect-error
-        config.variantClassNames[variantName][selection]
-      );
-      if (selectionClassName) {
-        className += " " + selectionClassName;
-      }
-    }
-  }
-  for (var [compoundCheck, compoundClassName] of config.compoundVariants) {
-    if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) {
-      className += " " + compoundClassName;
-    }
-  }
-  return className;
-};
 var pointIcon = createRuntimeFn({ defaultClassName: "", variantClassNames: { type: { start: "_4a4ovk6", end: "_4a4ovk7" } }, defaultVariants: {}, compoundVariants: [] });
 var pointInfoBox = "_4a4ovk1";
 var pointInfoBoxDescription = "_4a4ovk4";
@@ -3109,6 +3139,7 @@ const useGeoLocation = (props) => {
       loading.value = true;
       const watchId = singleGeoWatch.watchPosition(
         async (position) => {
+          console.log("watchPosition success position = ", position);
           const coordinate = position.coords;
           const wgsPoint = [position.coords.longitude, position.coords.latitude];
           const point = await toGcj02(wgsPoint);
@@ -3122,6 +3153,7 @@ const useGeoLocation = (props) => {
           onChange == null ? void 0 : onChange({ position: point, coordinate });
         },
         (error) => {
+          console.log("watchPosition error = ", error);
           loading.value = false;
           errorRef.value = error;
           const position = props == null ? void 0 : props.geoDefaultPosition;
@@ -3488,6 +3520,7 @@ 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;
@@ -3517,13 +3550,16 @@ const useGmapZoom = (props) => {
     zoomRef.value = v;
     (_a2 = mapRef.value) == null ? void 0 : _a2.setZoom(v);
   };
-  const handleZoomChange = (_, { target }) => {
-    const zoom = target.getZoom();
-    zoomRef.value = zoom;
-    onChange == null ? void 0 : onChange(zoom);
-  };
+  const handleZoomChange = debounce(
+    (_, { target }) => {
+      const zoom = target.getZoom();
+      zoomRef.value = zoom;
+      onChange == null ? void 0 : onChange(zoom);
+    },
+    GOOGLE_MAP_ZOOM_CHANGE_DEBOUNCE_TIMEOUT
+  );
   watchPostEffectForGMapEvent(mapRef, {}, handleZoomChange, [
-    "onZoom_change"
+    "onZoom_changed"
   ]);
   return { zoomRef, setZoom };
 };
@@ -3939,12 +3975,14 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
   } = useGeoLocation({
     geoDefaultPosition,
     onLoad: async (value) => {
+      console.log("useGeoLocation onLoad value = ", value);
       await readyPromise;
       centerSource.source = "geo";
       updatePlace(value.position);
       emit("loadGeoLocation", value);
     },
     onLoadDefault: async (value) => {
+      console.log("useGeoLocation onLoadDefault value = ", value);
       await readyPromise;
       const place = await defaultCenterPlacePromise;
       centerSource.source = "geo";
@@ -4038,6 +4076,7 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
     } = props;
     const title = geoLoading.value ? geoLoadingTitle : !availableRef.value ? unavailableTitle : centerPlace.name;
     const description = !availableRef.value ? void 0 : isElectedRef.value ? recomendDescription : void 0;
+    console.log("BusinessRecomendPlaceMap render geoLoading, isFirstWorkflowRecomendLoadingRef = ", geoLoading.value, isFirstWorkflowRecomendLoadingRef.value);
     return Vue.h(HeycarMap, {
       "attrs": {
         "center": centerPoint.value,

package/dist/index.js

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import Vue, { defineComponent, h, computed, inject, provide, watch, onMounted, onUnmounted, watchPostEffect, shallowRef, reactive, toRefs, ref, toRef, watchEffect } from "vue";
+import Vue, { defineComponent, h, computed, inject, provide, watch, onMounted, onUnmounted, watchPostEffect, shallowRef, ref, watchEffect, reactive, toRefs, toRef } from "vue";
 const style = "";
 Vue.util.warn;
 const imgAddressLocator = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IHgxPSItMzkuNzE5JSIgeTE9IjUwJSIgeDI9IjEyNi4wOTMlIiB5Mj0iNTAlIiBpZD0icHJlZml4X19hIj48c3RvcCBzdG9wLWNvbG9yPSIjNzlBRkZGIiBvZmZzZXQ9IjAlIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzVDOERGRiIgb2Zmc2V0PSIzMi4zNDIlIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzUwN0ZGRiIgb2Zmc2V0PSI3NC44NTMlIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzQ0NzFGRiIgb2Zmc2V0PSIxMDAlIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTEuNSAyNGgzdjE0LjVhMS41IDEuNSAwIDAxLTMgMFYyNHoiIGZpbGw9IiM0QzgwRkYiLz48Zz48Y2lyY2xlIGZpbGw9InVybCgjcHJlZml4X19hKSIgY3g9IjEzIiBjeT0iMTMiIHI9IjEzIi8+PGNpcmNsZSBmaWxsPSIjRkZGIiBjeD0iMTMiIGN5PSIxMyIgcj0iNCIvPjwvZz48L2c+PC9zdmc+";
@@ -1041,7 +1041,7 @@ function watchPostEffectForGMapEvent(targetRef, props, emit, propertyNames) {
     for (const name of propertyNames) {
       const emitEventName = property2emitEventName(name);
       const eventName = property2mapEventName(name);
-      const handler = (e) => emit(emitEventName, e);
+      const handler = (e) => emit(emitEventName, { ...e, target });
       const listener = target.addListener(eventName, handler);
       cleanList.push(() => google.maps.event.removeListener(listener));
     }
@@ -1975,6 +1975,25 @@ const useMapEventSource = () => {
   };
   return { executeMapApi };
 };
+const useGmapTouchStartCenter = (props) => {
+  const { mapRef, elementRef } = props;
+  const touchstartCenterRef = ref(void 0);
+  watchEffect((onCleanup) => {
+    const map = mapRef.value;
+    const element = elementRef.value;
+    if (!map || !element)
+      return;
+    const handleTouchStart = () => {
+      const center = map.getCenter();
+      const lng = center == null ? void 0 : center.lng();
+      const lat = center == null ? void 0 : center.lat();
+      touchstartCenterRef.value = lng && lat ? [lng, lat] : void 0;
+    };
+    element.addEventListener("touchstart", handleTouchStart);
+    onCleanup(() => element.removeEventListener("touchstart", handleTouchStart));
+  });
+  return { touchstartCenterRef };
+};
 const useResizeObserver = (props) => {
   const { elementRef, onChange } = props;
   const resizeObserver = new ResizeObserver(([entry]) => {
@@ -1995,27 +2014,109 @@ const useResizeObserver = (props) => {
   });
 };
 const Gmap_css_ts_vanilla = "";
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function ownKeys(object, enumerableOnly) {
+  var keys2 = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function(sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys2.push.apply(keys2, symbols);
+  }
+  return keys2;
+}
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), true).forEach(function(key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+  return target;
+}
+var shouldApplyCompound = (compoundCheck, selections, defaultVariants) => {
+  for (var key of Object.keys(compoundCheck)) {
+    var _selections$key;
+    if (compoundCheck[key] !== ((_selections$key = selections[key]) !== null && _selections$key !== void 0 ? _selections$key : defaultVariants[key])) {
+      return false;
+    }
+  }
+  return true;
+};
+var createRuntimeFn = (config) => (options) => {
+  var className = config.defaultClassName;
+  var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
+  for (var variantName in selections) {
+    var _selections$variantNa;
+    var variantSelection = (_selections$variantNa = selections[variantName]) !== null && _selections$variantNa !== void 0 ? _selections$variantNa : config.defaultVariants[variantName];
+    if (variantSelection != null) {
+      var selection = variantSelection;
+      if (typeof selection === "boolean") {
+        selection = selection === true ? "true" : "false";
+      }
+      var selectionClassName = (
+        // @ts-expect-error
+        config.variantClassNames[variantName][selection]
+      );
+      if (selectionClassName) {
+        className += " " + selectionClassName;
+      }
+    }
+  }
+  for (var [compoundCheck, compoundClassName] of config.compoundVariants) {
+    if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) {
+      className += " " + compoundClassName;
+    }
+  }
+  return className;
+};
 var gmap = "_7anfuo0";
+createRuntimeFn({ defaultClassName: "", variantClassNames: { enable: { true: "_7anfuo1", false: "_7anfuo2" } }, defaultVariants: {}, compoundVariants: [] });
 const Gmap = defineSetup(function Gmap2(props, { slots, emit }) {
   const setMap = props.mapRef;
   const { onResize } = props;
   const options = computed(() => {
-    const { mapRef: mapRef2, onDragStart, onDragEnd, onZoom_change, ...options2 } = props;
+    const { mapRef: mapRef2, onDragStart, onDragEnd, onZoom_changed, touchZoomCenter, ...options2 } = props;
     return options2;
   });
   const defaultOptions = options.value;
   const elementRef = shallowRef();
   const mapRef = shallowRef();
   const { executeMapApi } = useMapEventSource();
-  const handleDrag = (name) => emit(name, { target: mapRef.value });
+  const { touchstartCenterRef } = useGmapTouchStartCenter({ mapRef, elementRef });
+  const handleDrag = (name) => {
+    emit(name, { target: mapRef.value });
+  };
+  const handleZoom = (name) => {
+    var _a;
+    emit(name, { target: mapRef.value });
+    const center = touchstartCenterRef.value;
+    if (center)
+      (_a = mapRef.value) == null ? void 0 : _a.setCenter(vec2lnglat(center));
+  };
   provideGmap(mapRef);
   useResizeObserver({ elementRef, onChange: onResize });
   watchPostEffect(() => {
-    if (mapRef.value || !elementRef.value)
+    const element = elementRef.value;
+    if (mapRef.value || !element)
       return;
     let map;
     executeMapApi(() => {
-      map = new google.maps.Map(elementRef.value, { ...defaultOptions });
+      map = new google.maps.Map(element, { ...defaultOptions });
       window.GlobalGmap = map;
     });
     mapRef.value = map;
@@ -2030,11 +2131,8 @@ const Gmap = defineSetup(function Gmap2(props, { slots, emit }) {
       });
     }
   );
-  watchPostEffectForGMapEvent(mapRef, props, handleDrag, [
-    "onDragStart",
-    "onDragEnd",
-    "onZoom_change"
-  ]);
+  watchPostEffectForGMapEvent(mapRef, props, handleDrag, ["onDragStart", "onDragEnd"]);
+  watchPostEffectForGMapEvent(mapRef, props, handleZoom, ["onZoom_changed"]);
   return () => {
     var _a;
     return h("div", { ref: elementRef, class: gmap }, (_a = slots.default) == null ? void 0 : _a.call(slots));
@@ -2113,12 +2211,14 @@ const HeycarMap = defineLagecySetup(function HeycarMap2(props, {
           "attrs": {
             "mapRef": setMap,
             "mapId": gmapId,
-            "center": center ? vec2lnglat(center) : void 0,
+            "center": center ? vec2lnglat(center.map(Number)) : void 0,
             "zoom": zoom,
             "disableDefaultUI": true,
+            "clickableIcons": false,
             "disableDoubleClickZoom": touchEnable,
             "gestureHandling": touchEnable ? "auto" : "none",
-            "keyboardShortcuts": touchEnable
+            "keyboardShortcuts": touchEnable,
+            "touchZoomCenter": touchZoomCenter
           },
           "on": {
             "dragEnd": gmapHandleDargEnd,
@@ -2267,11 +2367,11 @@ const GDrivingLine = defineSetup(function GDrivingLine2(props) {
   const pathRef = computed(() => props.path.map(vec2lnglat));
   return () => {
     const vw = window.innerWidth * 0.01;
-    const repeat = 5 * vw;
-    const strokeWidth = 1.25 * vw;
-    const borderWidth = 0.175 * vw;
-    const dirStrokeWeight = 0.375 * vw;
-    const outlineWidth = 0.4 * vw;
+    const repeat = 10 * vw;
+    const strokeWidth = 1.25 * vw * 0.65;
+    const borderWidth = 0.175 * vw * 0.65;
+    const dirStrokeWeight = 0.375 * vw * 0.65;
+    const outlineWidth = 0.45 * vw * 0.65;
     const strokeColorInner = props.done ? "#96B2CA" : "#487BF4";
     const strokeColorOuter = props.done ? "#7693AF" : "#4175F1";
     const strokeColorBorder = props.done ? "#7693AF" : "#6C95F5";
@@ -2308,7 +2408,7 @@ const GDrivingLine = defineSetup(function GDrivingLine2(props) {
             path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
             strokeColor: "white",
             strokeWeight: dirStrokeWeight,
-            scale: 1
+            scale: 0.7
           },
           repeat: `${repeat}px`
         }]
@@ -2537,7 +2637,7 @@ const spaceLog = (logKey, ...args) => {
     return;
   console.log(logKey, ...args);
 };
-const GOOGLE_MAP_ZOOM_CHANGE_DEBOUNCE_TIMEOUT = 20;
+const GOOGLE_MAP_ZOOM_CHANGE_DEBOUNCE_TIMEOUT$1 = 20;
 const useAmapFitView = (props) => {
   const { mapRef, autoFitTimeout } = props;
   const overlayGroup = /* @__PURE__ */ new Set();
@@ -2659,7 +2759,7 @@ const useGmapFitView = (props) => {
       setFitView();
     }, autoFitTimeout);
   };
-  const handleZoomChange = debounce(handleMoveEnd, GOOGLE_MAP_ZOOM_CHANGE_DEBOUNCE_TIMEOUT);
+  const handleZoomChange = debounce(handleMoveEnd, GOOGLE_MAP_ZOOM_CHANGE_DEBOUNCE_TIMEOUT$1);
   watchPostEffectForGMapEvent(mapRef, {}, handleMoveEnd, [
     "onDragEnd"
   ]);
@@ -2757,76 +2857,6 @@ 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 = "";
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
-function ownKeys(object, enumerableOnly) {
-  var keys2 = Object.keys(object);
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function(sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys2.push.apply(keys2, symbols);
-  }
-  return keys2;
-}
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), true).forEach(function(key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    });
-  }
-  return target;
-}
-var shouldApplyCompound = (compoundCheck, selections, defaultVariants) => {
-  for (var key of Object.keys(compoundCheck)) {
-    var _selections$key;
-    if (compoundCheck[key] !== ((_selections$key = selections[key]) !== null && _selections$key !== void 0 ? _selections$key : defaultVariants[key])) {
-      return false;
-    }
-  }
-  return true;
-};
-var createRuntimeFn = (config) => (options) => {
-  var className = config.defaultClassName;
-  var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
-  for (var variantName in selections) {
-    var _selections$variantNa;
-    var variantSelection = (_selections$variantNa = selections[variantName]) !== null && _selections$variantNa !== void 0 ? _selections$variantNa : config.defaultVariants[variantName];
-    if (variantSelection != null) {
-      var selection = variantSelection;
-      if (typeof selection === "boolean") {
-        selection = selection === true ? "true" : "false";
-      }
-      var selectionClassName = (
-        // @ts-expect-error
-        config.variantClassNames[variantName][selection]
-      );
-      if (selectionClassName) {
-        className += " " + selectionClassName;
-      }
-    }
-  }
-  for (var [compoundCheck, compoundClassName] of config.compoundVariants) {
-    if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) {
-      className += " " + compoundClassName;
-    }
-  }
-  return className;
-};
 var pointIcon = createRuntimeFn({ defaultClassName: "", variantClassNames: { type: { start: "_4a4ovk6", end: "_4a4ovk7" } }, defaultVariants: {}, compoundVariants: [] });
 var pointInfoBox = "_4a4ovk1";
 var pointInfoBoxDescription = "_4a4ovk4";
@@ -3107,6 +3137,7 @@ const useGeoLocation = (props) => {
       loading.value = true;
       const watchId = singleGeoWatch.watchPosition(
         async (position) => {
+          console.log("watchPosition success position = ", position);
           const coordinate = position.coords;
           const wgsPoint = [position.coords.longitude, position.coords.latitude];
           const point = await toGcj02(wgsPoint);
@@ -3120,6 +3151,7 @@ const useGeoLocation = (props) => {
           onChange == null ? void 0 : onChange({ position: point, coordinate });
         },
         (error) => {
+          console.log("watchPosition error = ", error);
           loading.value = false;
           errorRef.value = error;
           const position = props == null ? void 0 : props.geoDefaultPosition;
@@ -3486,6 +3518,7 @@ 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;
@@ -3515,13 +3548,16 @@ const useGmapZoom = (props) => {
     zoomRef.value = v;
     (_a2 = mapRef.value) == null ? void 0 : _a2.setZoom(v);
   };
-  const handleZoomChange = (_, { target }) => {
-    const zoom = target.getZoom();
-    zoomRef.value = zoom;
-    onChange == null ? void 0 : onChange(zoom);
-  };
+  const handleZoomChange = debounce(
+    (_, { target }) => {
+      const zoom = target.getZoom();
+      zoomRef.value = zoom;
+      onChange == null ? void 0 : onChange(zoom);
+    },
+    GOOGLE_MAP_ZOOM_CHANGE_DEBOUNCE_TIMEOUT
+  );
   watchPostEffectForGMapEvent(mapRef, {}, handleZoomChange, [
-    "onZoom_change"
+    "onZoom_changed"
   ]);
   return { zoomRef, setZoom };
 };
@@ -3937,12 +3973,14 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
   } = useGeoLocation({
     geoDefaultPosition,
     onLoad: async (value) => {
+      console.log("useGeoLocation onLoad value = ", value);
       await readyPromise;
       centerSource.source = "geo";
       updatePlace(value.position);
       emit("loadGeoLocation", value);
     },
     onLoadDefault: async (value) => {
+      console.log("useGeoLocation onLoadDefault value = ", value);
       await readyPromise;
       const place = await defaultCenterPlacePromise;
       centerSource.source = "geo";
@@ -4036,6 +4074,7 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
     } = props;
     const title = geoLoading.value ? geoLoadingTitle : !availableRef.value ? unavailableTitle : centerPlace.name;
     const description = !availableRef.value ? void 0 : isElectedRef.value ? recomendDescription : void 0;
+    console.log("BusinessRecomendPlaceMap render geoLoading, isFirstWorkflowRecomendLoadingRef = ", geoLoading.value, isFirstWorkflowRecomendLoadingRef.value);
     return h(HeycarMap, {
       "attrs": {
         "center": centerPoint.value,

package/dist/style.css

@@ -116,10 +116,16 @@
   width: inherit;
 }
 ._7anfuo1 {
+  touch-action: none;
+}
+._7anfuo3 {
   position: relative;
 }
 a[title*="Google"]>div>img[alt="Google"], .gmnoprint {
   display: none;
+}
+._7anfuo0 [class*="marker-view"] {
+  will-change: unset !important;
 }._4a4ovk0 {
   margin-bottom: -0.4vw;
   display: flex;
@@ -201,6 +207,7 @@ a[title*="Google"]>div>img[alt="Google"], .gmnoprint {
 }
 .fhyw85 {
   margin-bottom: -2.265vw;
+  width: max-content;
 }
 .fhyw86 {
   margin-right: calc(50% - 2.265vw);

package/dist/utils/easeAnimate.d.ts

@@ -0,0 +1,12 @@
+interface EaseAnimatieRenderProps {
+    value: number[];
+    delta: number[];
+}
+export interface EaseAnimatieProps {
+    from: number[];
+    to: number[];
+    duration: number;
+    render: (props: EaseAnimatieRenderProps) => void;
+}
+export declare const easeAnimate: (props: EaseAnimatieProps) => void;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heycar/heycars-map",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "type": "module",
   "scripts": {
     "dev": "vite -c vite.config.dev.ts",
@@ -26,6 +26,7 @@
     "@amap/amap-jsapi-types": "^0.0.13",
     "@googlemaps/js-api-loader": "^1.15.1",
     "@googlemaps/typescript-guards": "^2.0.3",
+    "@use-gesture/vanilla": "^10.2.26",
     "fast-equals": "^3.0.3",
     "lodash-es": "^4.17.21",
     "vue-demi": "^0.13.11"

package/todo.md

@@ -5,6 +5,11 @@ https://dawchihliou.github.io/articles/building-custom-google-maps-marker-react-
 4. map 的两个 slot loading 和 error slot 没有生效
 5. 企业微信如果关闭定位，会不停的跳 geoError 事件
 
+二期：
+
+1. 绿区数据格式约定
+2. map loading 设计稿
+
 缩放问题
 
 - 4867
@@ -106,3 +111,12 @@ https://dawchihliou.github.io/articles/building-custom-google-maps-marker-react-
 
 - 5500
 - 5524
+
+  0.6.3
+
+- 5623
+- 5625
+- 5550
+- 5546
+- 5541
+- 5540