@heycar/heycars-map 0.7.0 → 0.7.1

package/dist/business-components/BusinessTaxiServiceMap/BusinessTaxiServiceSection.d.ts

@@ -8,14 +8,14 @@ type SectionDispatchingProps = Required<MROP> & {
 export declare const SectionDispatching: import("vue").DefineComponent<import("vue/types/v3-component-props").ComponentObjectPropsOptions<SectionDispatchingProps>, 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<SectionDispatchingProps, Required<SectionDispatchingProps>>, never, SectionDispatchingProps, {} | {}>;
 type SectionConfirmedProps = Required<MROP> & {
     passengerPosition?: Point;
-    passengerAngle?: number;
+    passengerAngle?: string;
     from: Place;
     to: Place;
 };
 export declare const SectionConfirmed: import("vue").DefineComponent<import("vue/types/v3-component-props").ComponentObjectPropsOptions<SectionConfirmedProps>, 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<SectionConfirmedProps, Required<SectionConfirmedProps>>, never, SectionConfirmedProps, {} | {}>;
 type SectionDriverStartServiceProps = Required<MROP> & {
     passengerPosition?: Point;
-    passengerAngle?: number;
+    passengerAngle?: string;
     carPosition?: Point;
     carAngle?: number;
     from: Place;
@@ -24,7 +24,7 @@ type SectionDriverStartServiceProps = Required<MROP> & {
 export declare const SectionDriverStartService: import("vue").DefineComponent<import("vue/types/v3-component-props").ComponentObjectPropsOptions<SectionDriverStartServiceProps>, 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<SectionDriverStartServiceProps, Required<SectionDriverStartServiceProps>>, never, SectionDriverStartServiceProps, {} | {}>;
 type SectionBookDispatchedProps = Required<MROP> & {
     passengerPosition?: Point;
-    passengerAngle?: number;
+    passengerAngle?: string;
     from: Place;
     to: Place;
 };
@@ -34,7 +34,7 @@ type SectionDriverArrivedProps = Required<MROP> & {
     carPosition?: Point;
     carAngle?: number;
     passengerPosition?: Point;
-    passengerAngle?: number;
+    passengerAngle?: string;
     title: string;
 };
 export declare const SectionDriverArrived: import("vue").DefineComponent<import("vue/types/v3-component-props").ComponentObjectPropsOptions<SectionDriverArrivedProps>, 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<SectionDriverArrivedProps, Required<SectionDriverArrivedProps>>, never, SectionDriverArrivedProps, {} | {}>;

package/dist/business-components/PassengerCircle/PassengerCircle.css.d.ts

@@ -1,14 +1,25 @@
 export declare const passengerCircle: import("@vanilla-extract/recipes").RuntimeFn<{
-    size: {
+    type: {
         small: {
             width: "6.6vw";
             height: "6.6vw";
             marginBottom: "-3.3vw";
         };
+        smallArrow: {
+            width: "6.6vw";
+            height: "7.738vw";
+            marginBottom: "-3.3vw";
+            transformOrigin: "center 4.438vw";
+        };
         large: {
             width: "16.27vw";
             height: "16.27vw";
             marginBottom: "-8.135vw";
         };
+        largeArrow: {
+            width: "16.27vw";
+            height: "16.27vw";
+            marginBottom: "-8.135vw";
+        };
     };
 }>;

package/dist/business-components/PassengerCircle/PassengerCircle.d.ts

@@ -2,7 +2,7 @@ import type { GmapOverlay, MROP, MapRegisterOverlayProps } from "../../hooks/use
 import type { Point } from "../../types/interface";
 export interface PassengerCircleProps<T> extends MapRegisterOverlayProps<T> {
     position: [number, number];
-    angle?: number;
+    angle?: string;
     size?: "small" | "large";
 }
 export declare const APassengerCircle: import("vue").DefineComponent<import("vue/types/v3-component-props").ComponentObjectPropsOptions<PassengerCircleProps<{
@@ -18315,6 +18315,6 @@ export declare const PassengerCircle: import("vue").DefineComponent<import("vue/
 export type ConditionalFittablePassengerCircleProps = MROP & {
     condition: boolean;
     position?: Point;
-    angle?: number;
+    angle?: string;
 };
 export declare const ConditionalFittablePassengerCircle: import("vue").DefineComponent<import("vue/types/v3-component-props").ComponentObjectPropsOptions<ConditionalFittablePassengerCircleProps>, 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<ConditionalFittablePassengerCircleProps, Required<ConditionalFittablePassengerCircleProps>>, never, ConditionalFittablePassengerCircleProps, {} | {}>;

package/dist/hooks/useDeviceOrientation.d.ts

@@ -1,16 +1,20 @@
+import { ShallowRef } from "vue-demi";
 interface Orientation {
     alpha?: number;
     beta?: number;
     gamma?: number;
+    cssRotationVariableName?: string;
 }
 export interface UseDeviceOrientationProps {
+    elementRef: ShallowRef<HTMLElement | undefined>;
     onChange?: (value: Orientation) => void;
 }
-export declare const useDeviceOrientation: (props?: UseDeviceOrientationProps) => {
+export declare const useDeviceOrientation: (props: UseDeviceOrientationProps) => {
     orientation: {
         alpha?: number | undefined;
         beta?: number | undefined;
         gamma?: number | undefined;
+        cssRotationVariableName?: string | undefined;
     };
 };
 export {};

package/dist/hooks/useHeycarMap.d.ts

@@ -397,6 +397,7 @@ export declare const useHeycarAmap: () => {
         emit(type: AMap.EventType, data?: any): any;
         getEvents(): Record<string, any[]>;
     } | undefined>;
+    mapElementRef: import("vue-demi").ShallowRef<HTMLElement | undefined>;
     panTo: (value: [number, number]) => void | undefined;
     setMap: SetMap<{
         _outseaDataType: string;
@@ -797,6 +798,7 @@ export declare const useHeycarAmap: () => {
 };
 export declare const useHeycarGamp: () => {
     mapRef: import("vue-demi").ShallowRef<google.maps.Map | undefined>;
+    mapElementRef: import("vue-demi").ShallowRef<HTMLElement | undefined>;
     panTo: (value: [number, number]) => void | undefined;
     setMap: SetMap<google.maps.Map>;
 };
@@ -1197,6 +1199,7 @@ export declare const useHeycarMap: () => {
         emit(type: AMap.EventType, data?: any): any;
         getEvents(): Record<string, any[]>;
     } | undefined>;
+    mapElementRef: import("vue-demi").ShallowRef<HTMLElement | undefined>;
     panTo: (value: [number, number]) => void | undefined;
     setMap: SetMap<{
         _outseaDataType: string;
@@ -1596,6 +1599,7 @@ export declare const useHeycarMap: () => {
     }>;
 } | {
     mapRef: import("vue-demi").ShallowRef<google.maps.Map | undefined>;
+    mapElementRef: import("vue-demi").ShallowRef<HTMLElement | undefined>;
     panTo: (value: [number, number]) => void | undefined;
     setMap: SetMap<google.maps.Map>;
 };

package/dist/index.cjs

@@ -947,6 +947,12 @@ const language2vectorMapForeign = (lang) => {
   }
 };
 const place2point = (place) => [Number(place.lng), Number(place.lat)];
+const combineHandler = (fn1, fn2) => {
+  return (...args) => {
+    fn1 == null ? void 0 : fn1(...args);
+    return fn2(...args);
+  };
+};
 const pipeAsync = (fn) => (...args) => {
   Promise.resolve().then(() => fn == null ? void 0 : fn(...args));
 };
@@ -1931,12 +1937,30 @@ const useMapLoader = (props) => {
     onChange
   });
 };
+var OS_PLATFORM = /* @__PURE__ */ ((OS_PLATFORM2) => {
+  OS_PLATFORM2["IOS"] = "IOS";
+  OS_PLATFORM2["ANDROID"] = "ANDROID";
+  OS_PLATFORM2["OTHER"] = "OTHER";
+  return OS_PLATFORM2;
+})(OS_PLATFORM || {});
 var WEBGL_STATUS = /* @__PURE__ */ ((WEBGL_STATUS2) => {
   WEBGL_STATUS2["NOT_SUPPORTED"] = "NOT_SUPPORTED";
   WEBGL_STATUS2["DISABLED"] = "DISABLED";
   WEBGL_STATUS2["ENABLED"] = "ENABLED";
   return WEBGL_STATUS2;
 })(WEBGL_STATUS || {});
+const detectOSPlatform = () => {
+  if (typeof navigator === "undefined")
+    return "OTHER";
+  const userAgent = navigator.userAgent || navigator.vendor;
+  if (/android/i.test(userAgent)) {
+    return "ANDROID";
+  }
+  if (/iPad|iPhone|iPod/.test(userAgent) && !globalThis.MSStream) {
+    return "IOS";
+  }
+  return "OTHER";
+};
 function detectWebGL() {
   if (typeof window === "undefined")
     return "NOT_SUPPORTED";
@@ -3163,6 +3187,65 @@ const BusinessQuotingMap = defineLagecySetup(function BusinessQuotingMap2(props)
     })]);
   };
 }).props(["fallback", "from", "loading", "mapRef", "registerOverlay", "renderDescription", "to", "fromDescription", "log"]);
+const DEVICE_ORIENTATION_INTERVAL = 1e3;
+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()}`;
+  Vue.watch(
+    () => elementRef.value,
+    (element, _, onCleanup) => {
+      const handleDeviceOrientation = throttle((event) => {
+        var _a, _b, _c;
+        const alpha = (_a = event.alpha) != null ? _a : void 0;
+        const beta = (_b = event.beta) != null ? _b : void 0;
+        const gamma = (_c = event.gamma) != null ? _c : void 0;
+        const cssRotationVariableValue = `${360 - (alpha != null ? alpha : 0)}deg`;
+        const cssRotationVariableName = alpha === void 0 ? void 0 : cssVarName;
+        Object.assign(orientation, { alpha, beta, gamma });
+        if (orientation.cssRotationVariableName !== cssRotationVariableName) {
+          orientation.cssRotationVariableName = cssRotationVariableName;
+        }
+        onChange == null ? void 0 : onChange({ alpha, beta, gamma, cssRotationVariableName });
+        if (cssRotationVariableName) {
+          element == null ? void 0 : element.style.setProperty(cssRotationVariableName, cssRotationVariableValue);
+        }
+      }, DEVICE_ORIENTATION_INTERVAL);
+      compatibaleAddEventListenerDeviceOrientation(handleDeviceOrientation);
+      onCleanup(() => {
+        compatibleRemoveEventListenerDeviceOrientation(handleDeviceOrientation);
+        element == null ? void 0 : element.style.removeProperty(cssVarName);
+      });
+    }
+  );
+  return { orientation };
+};
+let isIOSDeviceOrientationPermissionGranted = false;
+function compatibaleAddEventListenerDeviceOrientation(handler) {
+  if (detectOSPlatform() === OS_PLATFORM.ANDROID) {
+    return addEventListener("deviceorientationabsolute", handler);
+  }
+  if (isIOSDeviceOrientationPermissionGranted) {
+    return addEventListener("deviceorientation", handler);
+  }
+  const handleTouchEnd = () => {
+    removeEventListener("touchend", handleTouchEnd);
+    DeviceOrientationEvent == null ? void 0 : DeviceOrientationEvent.requestPermission().then((permissionState) => {
+      if (permissionState === "granted") {
+        isIOSDeviceOrientationPermissionGranted = true;
+        addEventListener("deviceorientation", handler);
+      }
+    }).catch((err) => console.error(err.message));
+  };
+  addEventListener("touchend", handleTouchEnd);
+}
+function compatibleRemoveEventListenerDeviceOrientation(handler) {
+  if (detectOSPlatform() === OS_PLATFORM.ANDROID) {
+    return removeEventListener("deviceorientationabsolute", handler);
+  }
+  return removeEventListener("deviceorientation", handler);
+}
 const watchVisibilityState = () => {
   const visibilityStateRef = Vue.ref(document.visibilityState);
   const handleVisibilityChange = () => {
@@ -3425,25 +3508,29 @@ const useGeoLocation = (props) => {
 };
 const useHeycarAmap = () => {
   const amapRef = Vue.shallowRef();
+  const amapElementRef = Vue.shallowRef();
   const setMap = (map) => {
     amapRef.value = map;
+    amapElementRef.value = map.getContainer();
   };
   const panTo = (value) => {
     var _a;
     return (_a = amapRef == null ? void 0 : amapRef.value) == null ? void 0 : _a.panTo(value);
   };
-  return { mapRef: amapRef, panTo, setMap };
+  return { mapRef: amapRef, mapElementRef: amapElementRef, panTo, setMap };
 };
 const useHeycarGamp = () => {
   const gmapRef = Vue.shallowRef();
+  const gmapElementRef = Vue.shallowRef();
   const setMap = (map) => {
     gmapRef.value = map;
+    gmapElementRef.value = map.getDiv();
   };
   const panTo = (value) => {
     var _a;
     return (_a = gmapRef == null ? void 0 : gmapRef.value) == null ? void 0 : _a.panTo(vec2lnglat(value));
   };
-  return { mapRef: gmapRef, panTo, setMap };
+  return { mapRef: gmapRef, mapElementRef: gmapElementRef, panTo, setMap };
 };
 const useHeycarMap = () => {
   const { supplier } = useMapSupplier();
@@ -3469,7 +3556,6 @@ const useAmapDrag = (props) => {
     zoomStartCenter = (_a = mapRef.value) == null ? void 0 : _a.getCenter().toJSON();
   };
   const handleChange = (value) => {
-    console.log("useAmapDrag value, zoomStartCenter = ", value, zoomStartCenter);
     if (isZoom) {
       isZoom = false;
       if (isPointEqual(value, zoomStartCenter))
@@ -5343,7 +5429,7 @@ const imgPassengerCircle = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjEiIGhlaW
 const imgPassengerSmallArrow = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMzQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxmaWx0ZXIgeD0iLTI4LjYlIiB5PSItMjguNiUiIHdpZHRoPSIxNTcuMSUiIGhlaWdodD0iMTU3LjElIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJwcmVmaXhfX2EiPjxmZU9mZnNldCBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMjQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48Y2lyY2xlIGlkPSJwcmVmaXhfX2IiIGN4PSIxMC41IiBjeT0iMTkuNSIgcj0iMTAuNSIvPjwvZGVmcz48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGZpbGw9IiM0NDcxRkYiIGQ9Ik0xNC40ODEgMGw2LjYwMyAxMy4xODFINy44Nzl6Ii8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCkiPjx1c2UgZmlsbD0iIzAwMCIgZmlsdGVyPSJ1cmwoI3ByZWZpeF9fYSkiIHhsaW5rOmhyZWY9IiNwcmVmaXhfX2IiLz48Y2lyY2xlIHN0cm9rZT0iI0ZGRiIgc3Ryb2tlLXdpZHRoPSIyLjQiIHN0cm9rZS1saW5lam9pbj0ic3F1YXJlIiBmaWxsPSIjNDg3MUYxIiBjeD0iMTAuNSIgY3k9IjE5LjUiIHI9IjkuMyIvPjwvZz48L2c+PC9zdmc+";
 const imgPassengerSmall = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxmaWx0ZXIgeD0iLTMwJSIgeT0iLTMwJSIgd2lkdGg9IjE2MCUiIGhlaWdodD0iMTYwJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0icHJlZml4X19hIj48ZmVPZmZzZXQgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjI0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PGNpcmNsZSBpZD0icHJlZml4X19iIiBjeD0iMTU3IiBjeT0iMzUyIiByPSIxMCIvPjwvZGVmcz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTQzIC0zMzgpIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjx1c2UgZmlsbD0iIzAwMCIgZmlsdGVyPSJ1cmwoI3ByZWZpeF9fYSkiIHhsaW5rOmhyZWY9IiNwcmVmaXhfX2IiLz48Y2lyY2xlIHN0cm9rZT0iI0ZGRiIgc3Ryb2tlLXdpZHRoPSIyLjQiIHN0cm9rZS1saW5lam9pbj0ic3F1YXJlIiBmaWxsPSIjNDg3MUYxIiBjeD0iMTU3IiBjeT0iMzUyIiByPSI4LjgiLz48L2c+PC9zdmc+";
 const PassengerCircle_css_ts_vanilla = "";
-var passengerCircle = createRuntimeFn({ defaultClassName: "_1l6offo0", variantClassNames: { size: { small: "_1l6offo1", large: "_1l6offo2" } }, defaultVariants: {}, compoundVariants: [] });
+var passengerCircle = createRuntimeFn({ defaultClassName: "_1l6offo0", variantClassNames: { type: { small: "_1l6offo1", smallArrow: "_1l6offo2", large: "_1l6offo3", largeArrow: "_1l6offo4" } }, defaultVariants: {}, compoundVariants: [] });
 const APassengerCircle = defineSetup(function APassengerCircle2(props) {
   const contentRef = Vue.computed(() => {
     const {
@@ -5351,10 +5437,12 @@ const APassengerCircle = defineSetup(function APassengerCircle2(props) {
       angle
     } = props;
     const src = size === "large" ? angle === void 0 ? imgPassengerCircle : imgPassengerCircleArrow : angle === void 0 ? imgPassengerSmall : imgPassengerSmallArrow;
+    const style2 = angle === void 0 ? "" : `transform: rotate(var(${angle}))`;
+    const type = size === "large" ? angle === void 0 ? "large" : "largeArrow" : angle === void 0 ? "small" : "smallArrow";
     return `
         <img src="${src}" class="${passengerCircle({
-      size
-    })}">
+      type
+    })}" style="${style2}">
       `;
   });
   return () => {
@@ -5363,7 +5451,6 @@ const APassengerCircle = defineSetup(function APassengerCircle2(props) {
         "position": props.position,
         "content": contentRef.value,
         "anchor": "bottom-center",
-        "angle": props.angle,
         "registerOverlay": props.registerOverlay,
         "zIndex": ZINDEX_PASSENGER_LAYER
       }
@@ -5377,10 +5464,11 @@ const GPassengerCircle = defineSetup(function GPassengerCircle2(props) {
       angle
     } = props;
     const src = size === "large" ? angle === void 0 ? imgPassengerCircle : imgPassengerCircleArrow : angle === void 0 ? imgPassengerSmall : imgPassengerSmallArrow;
-    const style2 = angle === void 0 ? "" : `transform: rotate(${angle}deg)`;
+    const style2 = angle === void 0 ? "" : `transform: rotate(var(${angle}))`;
+    const type = size === "large" ? angle === void 0 ? "large" : "largeArrow" : angle === void 0 ? "small" : "smallArrow";
     return createDom("img", {
       class: passengerCircle({
-        size
+        type
       }),
       src,
       style: style2
@@ -5698,6 +5786,7 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
   const pipedGetRecomendPlace = pipeOnlyLastEffect(getRecomendPlace);
   const {
     mapRef,
+    mapElementRef,
     setMap,
     panTo
   } = useHeycarMap();
@@ -5752,6 +5841,11 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
   const defaultCenterPlacePromise = new Promise((resolve) => {
     getDefaultCenterPlace().then(resolve).catch(() => resolve(void 0));
   });
+  const {
+    orientation
+  } = useDeviceOrientation({
+    elementRef: mapElementRef
+  });
   const {
     geoPosition,
     geoError,
@@ -5869,7 +5963,8 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
       }
     }, [!geoLoading.value && !geoError.value && Vue.h(PassengerCircle, {
       "attrs": {
-        "position": geoPosition.value
+        "position": geoPosition.value,
+        "angle": orientation.cssRotationVariableName
       }
     }), zoomRef.value >= RECOMMEND_PLACE_ZOOM_MIN && Vue.h(PickupPoints, {
       "attrs": {
@@ -6826,42 +6921,30 @@ const BusinessTaxiEndMap = defineSetup(function BusinessTaxiEndMap2(props) {
     })]);
   };
 });
-const DEVICE_ORIENTATION_INTERVAL = 100;
-const useDeviceOrientation = (props) => {
-  const orientation = Vue.reactive({});
-  const { onChange } = props != null ? props : {};
-  Vue.watchEffect((onCleanup) => {
-    const handleDeviceOrientation = throttle((event) => {
-      var _a, _b, _c;
-      const alpha = (_a = event.alpha) != null ? _a : void 0;
-      const beta = (_b = event.beta) != null ? _b : void 0;
-      const gamma = (_c = event.gamma) != null ? _c : void 0;
-      Object.assign(orientation, { alpha, beta, gamma });
-      onChange == null ? void 0 : onChange({ alpha, beta, gamma });
-    }, DEVICE_ORIENTATION_INTERVAL);
-    addEventListener("deviceorientation", handleDeviceOrientation);
-    onCleanup(() => removeEventListener("deviceorientation", handleDeviceOrientation));
-  });
-  return { orientation };
-};
 const STATUS_NEED_CAR_POSITION = ["book-driverStartService", "dispatched", "driverStartService", "inService", "driverArrived"];
 const BusinessTaxiServiceMap = defineLagecySetup(function BusinessTaxiServiceMap2(props) {
   const {
     interval,
     registerOverlay,
-    mapRef,
+    mapRef: outerSetMap,
     getDriverPosition,
     renderStartSerivceTitle,
     renderInServiceTitle
   } = props;
   const deferedSetFitView = pipeDefer(registerOverlay.setFitView);
+  const {
+    setMap,
+    mapElementRef
+  } = useHeycarMap();
   const {
     geoPosition,
     geoError
   } = useGeoLocation();
   const {
     orientation
-  } = useDeviceOrientation();
+  } = useDeviceOrientation({
+    elementRef: mapElementRef
+  });
   const carPositionRef = Vue.ref();
   const carAngleRef = Vue.ref();
   const {
@@ -6902,13 +6985,12 @@ const BusinessTaxiServiceMap = defineLagecySetup(function BusinessTaxiServiceMap
     const carAngle = carAngleRef.value;
     const touchEnable = !["canceled", "canceling", "completed", "endService", "waitpay", "waitRechargePay", "refund", "rechargePayed", "payed"].includes(driverStatus);
     const passengerPosition = geoError.value ? void 0 : geoPosition.value;
-    const passengerAngle = orientation.alpha === void 0 ? void 0 : 360 - orientation.alpha;
-    console.log("passengerAngle = ", passengerAngle);
+    const passengerAngle = orientation.cssRotationVariableName;
     return Vue.h(HeycarMap, {
       "attrs": {
         "center": place2point(from),
         "zoom": 13,
-        "mapRef": mapRef,
+        "mapRef": combineHandler(outerSetMap, setMap),
         "touchEnable": touchEnable
       },
       "on": {

package/dist/index.js

@@ -945,6 +945,12 @@ const language2vectorMapForeign = (lang) => {
   }
 };
 const place2point = (place) => [Number(place.lng), Number(place.lat)];
+const combineHandler = (fn1, fn2) => {
+  return (...args) => {
+    fn1 == null ? void 0 : fn1(...args);
+    return fn2(...args);
+  };
+};
 const pipeAsync = (fn) => (...args) => {
   Promise.resolve().then(() => fn == null ? void 0 : fn(...args));
 };
@@ -1929,12 +1935,30 @@ const useMapLoader = (props) => {
     onChange
   });
 };
+var OS_PLATFORM = /* @__PURE__ */ ((OS_PLATFORM2) => {
+  OS_PLATFORM2["IOS"] = "IOS";
+  OS_PLATFORM2["ANDROID"] = "ANDROID";
+  OS_PLATFORM2["OTHER"] = "OTHER";
+  return OS_PLATFORM2;
+})(OS_PLATFORM || {});
 var WEBGL_STATUS = /* @__PURE__ */ ((WEBGL_STATUS2) => {
   WEBGL_STATUS2["NOT_SUPPORTED"] = "NOT_SUPPORTED";
   WEBGL_STATUS2["DISABLED"] = "DISABLED";
   WEBGL_STATUS2["ENABLED"] = "ENABLED";
   return WEBGL_STATUS2;
 })(WEBGL_STATUS || {});
+const detectOSPlatform = () => {
+  if (typeof navigator === "undefined")
+    return "OTHER";
+  const userAgent = navigator.userAgent || navigator.vendor;
+  if (/android/i.test(userAgent)) {
+    return "ANDROID";
+  }
+  if (/iPad|iPhone|iPod/.test(userAgent) && !globalThis.MSStream) {
+    return "IOS";
+  }
+  return "OTHER";
+};
 function detectWebGL() {
   if (typeof window === "undefined")
     return "NOT_SUPPORTED";
@@ -3161,6 +3185,65 @@ const BusinessQuotingMap = defineLagecySetup(function BusinessQuotingMap2(props)
     })]);
   };
 }).props(["fallback", "from", "loading", "mapRef", "registerOverlay", "renderDescription", "to", "fromDescription", "log"]);
+const DEVICE_ORIENTATION_INTERVAL = 1e3;
+const CSS_DEVICE_ORIENTATION_VAR_PREFIX = "--CSS_DEVICE_ORIENTATION_VAR_ROTATION_DEGREE_";
+const useDeviceOrientation = (props) => {
+  const { onChange, elementRef } = props;
+  const orientation = reactive({ cssRotationVariableName: void 0 });
+  const cssVarName = `${CSS_DEVICE_ORIENTATION_VAR_PREFIX}${Date.now()}`;
+  watch(
+    () => elementRef.value,
+    (element, _, onCleanup) => {
+      const handleDeviceOrientation = throttle((event) => {
+        var _a, _b, _c;
+        const alpha = (_a = event.alpha) != null ? _a : void 0;
+        const beta = (_b = event.beta) != null ? _b : void 0;
+        const gamma = (_c = event.gamma) != null ? _c : void 0;
+        const cssRotationVariableValue = `${360 - (alpha != null ? alpha : 0)}deg`;
+        const cssRotationVariableName = alpha === void 0 ? void 0 : cssVarName;
+        Object.assign(orientation, { alpha, beta, gamma });
+        if (orientation.cssRotationVariableName !== cssRotationVariableName) {
+          orientation.cssRotationVariableName = cssRotationVariableName;
+        }
+        onChange == null ? void 0 : onChange({ alpha, beta, gamma, cssRotationVariableName });
+        if (cssRotationVariableName) {
+          element == null ? void 0 : element.style.setProperty(cssRotationVariableName, cssRotationVariableValue);
+        }
+      }, DEVICE_ORIENTATION_INTERVAL);
+      compatibaleAddEventListenerDeviceOrientation(handleDeviceOrientation);
+      onCleanup(() => {
+        compatibleRemoveEventListenerDeviceOrientation(handleDeviceOrientation);
+        element == null ? void 0 : element.style.removeProperty(cssVarName);
+      });
+    }
+  );
+  return { orientation };
+};
+let isIOSDeviceOrientationPermissionGranted = false;
+function compatibaleAddEventListenerDeviceOrientation(handler) {
+  if (detectOSPlatform() === OS_PLATFORM.ANDROID) {
+    return addEventListener("deviceorientationabsolute", handler);
+  }
+  if (isIOSDeviceOrientationPermissionGranted) {
+    return addEventListener("deviceorientation", handler);
+  }
+  const handleTouchEnd = () => {
+    removeEventListener("touchend", handleTouchEnd);
+    DeviceOrientationEvent == null ? void 0 : DeviceOrientationEvent.requestPermission().then((permissionState) => {
+      if (permissionState === "granted") {
+        isIOSDeviceOrientationPermissionGranted = true;
+        addEventListener("deviceorientation", handler);
+      }
+    }).catch((err) => console.error(err.message));
+  };
+  addEventListener("touchend", handleTouchEnd);
+}
+function compatibleRemoveEventListenerDeviceOrientation(handler) {
+  if (detectOSPlatform() === OS_PLATFORM.ANDROID) {
+    return removeEventListener("deviceorientationabsolute", handler);
+  }
+  return removeEventListener("deviceorientation", handler);
+}
 const watchVisibilityState = () => {
   const visibilityStateRef = ref(document.visibilityState);
   const handleVisibilityChange = () => {
@@ -3423,25 +3506,29 @@ const useGeoLocation = (props) => {
 };
 const useHeycarAmap = () => {
   const amapRef = shallowRef();
+  const amapElementRef = shallowRef();
   const setMap = (map) => {
     amapRef.value = map;
+    amapElementRef.value = map.getContainer();
   };
   const panTo = (value) => {
     var _a;
     return (_a = amapRef == null ? void 0 : amapRef.value) == null ? void 0 : _a.panTo(value);
   };
-  return { mapRef: amapRef, panTo, setMap };
+  return { mapRef: amapRef, mapElementRef: amapElementRef, panTo, setMap };
 };
 const useHeycarGamp = () => {
   const gmapRef = shallowRef();
+  const gmapElementRef = shallowRef();
   const setMap = (map) => {
     gmapRef.value = map;
+    gmapElementRef.value = map.getDiv();
   };
   const panTo = (value) => {
     var _a;
     return (_a = gmapRef == null ? void 0 : gmapRef.value) == null ? void 0 : _a.panTo(vec2lnglat(value));
   };
-  return { mapRef: gmapRef, panTo, setMap };
+  return { mapRef: gmapRef, mapElementRef: gmapElementRef, panTo, setMap };
 };
 const useHeycarMap = () => {
   const { supplier } = useMapSupplier();
@@ -3467,7 +3554,6 @@ const useAmapDrag = (props) => {
     zoomStartCenter = (_a = mapRef.value) == null ? void 0 : _a.getCenter().toJSON();
   };
   const handleChange = (value) => {
-    console.log("useAmapDrag value, zoomStartCenter = ", value, zoomStartCenter);
     if (isZoom) {
       isZoom = false;
       if (isPointEqual(value, zoomStartCenter))
@@ -5341,7 +5427,7 @@ const imgPassengerCircle = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjEiIGhlaW
 const imgPassengerSmallArrow = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMzQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxmaWx0ZXIgeD0iLTI4LjYlIiB5PSItMjguNiUiIHdpZHRoPSIxNTcuMSUiIGhlaWdodD0iMTU3LjElIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJwcmVmaXhfX2EiPjxmZU9mZnNldCBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMjQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48Y2lyY2xlIGlkPSJwcmVmaXhfX2IiIGN4PSIxMC41IiBjeT0iMTkuNSIgcj0iMTAuNSIvPjwvZGVmcz48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGZpbGw9IiM0NDcxRkYiIGQ9Ik0xNC40ODEgMGw2LjYwMyAxMy4xODFINy44Nzl6Ii8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCkiPjx1c2UgZmlsbD0iIzAwMCIgZmlsdGVyPSJ1cmwoI3ByZWZpeF9fYSkiIHhsaW5rOmhyZWY9IiNwcmVmaXhfX2IiLz48Y2lyY2xlIHN0cm9rZT0iI0ZGRiIgc3Ryb2tlLXdpZHRoPSIyLjQiIHN0cm9rZS1saW5lam9pbj0ic3F1YXJlIiBmaWxsPSIjNDg3MUYxIiBjeD0iMTAuNSIgY3k9IjE5LjUiIHI9IjkuMyIvPjwvZz48L2c+PC9zdmc+";
 const imgPassengerSmall = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxmaWx0ZXIgeD0iLTMwJSIgeT0iLTMwJSIgd2lkdGg9IjE2MCUiIGhlaWdodD0iMTYwJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0icHJlZml4X19hIj48ZmVPZmZzZXQgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjI0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PGNpcmNsZSBpZD0icHJlZml4X19iIiBjeD0iMTU3IiBjeT0iMzUyIiByPSIxMCIvPjwvZGVmcz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTQzIC0zMzgpIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjx1c2UgZmlsbD0iIzAwMCIgZmlsdGVyPSJ1cmwoI3ByZWZpeF9fYSkiIHhsaW5rOmhyZWY9IiNwcmVmaXhfX2IiLz48Y2lyY2xlIHN0cm9rZT0iI0ZGRiIgc3Ryb2tlLXdpZHRoPSIyLjQiIHN0cm9rZS1saW5lam9pbj0ic3F1YXJlIiBmaWxsPSIjNDg3MUYxIiBjeD0iMTU3IiBjeT0iMzUyIiByPSI4LjgiLz48L2c+PC9zdmc+";
 const PassengerCircle_css_ts_vanilla = "";
-var passengerCircle = createRuntimeFn({ defaultClassName: "_1l6offo0", variantClassNames: { size: { small: "_1l6offo1", large: "_1l6offo2" } }, defaultVariants: {}, compoundVariants: [] });
+var passengerCircle = createRuntimeFn({ defaultClassName: "_1l6offo0", variantClassNames: { type: { small: "_1l6offo1", smallArrow: "_1l6offo2", large: "_1l6offo3", largeArrow: "_1l6offo4" } }, defaultVariants: {}, compoundVariants: [] });
 const APassengerCircle = defineSetup(function APassengerCircle2(props) {
   const contentRef = computed(() => {
     const {
@@ -5349,10 +5435,12 @@ const APassengerCircle = defineSetup(function APassengerCircle2(props) {
       angle
     } = props;
     const src = size === "large" ? angle === void 0 ? imgPassengerCircle : imgPassengerCircleArrow : angle === void 0 ? imgPassengerSmall : imgPassengerSmallArrow;
+    const style2 = angle === void 0 ? "" : `transform: rotate(var(${angle}))`;
+    const type = size === "large" ? angle === void 0 ? "large" : "largeArrow" : angle === void 0 ? "small" : "smallArrow";
     return `
         <img src="${src}" class="${passengerCircle({
-      size
-    })}">
+      type
+    })}" style="${style2}">
       `;
   });
   return () => {
@@ -5361,7 +5449,6 @@ const APassengerCircle = defineSetup(function APassengerCircle2(props) {
         "position": props.position,
         "content": contentRef.value,
         "anchor": "bottom-center",
-        "angle": props.angle,
         "registerOverlay": props.registerOverlay,
         "zIndex": ZINDEX_PASSENGER_LAYER
       }
@@ -5375,10 +5462,11 @@ const GPassengerCircle = defineSetup(function GPassengerCircle2(props) {
       angle
     } = props;
     const src = size === "large" ? angle === void 0 ? imgPassengerCircle : imgPassengerCircleArrow : angle === void 0 ? imgPassengerSmall : imgPassengerSmallArrow;
-    const style2 = angle === void 0 ? "" : `transform: rotate(${angle}deg)`;
+    const style2 = angle === void 0 ? "" : `transform: rotate(var(${angle}))`;
+    const type = size === "large" ? angle === void 0 ? "large" : "largeArrow" : angle === void 0 ? "small" : "smallArrow";
     return createDom("img", {
       class: passengerCircle({
-        size
+        type
       }),
       src,
       style: style2
@@ -5696,6 +5784,7 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
   const pipedGetRecomendPlace = pipeOnlyLastEffect(getRecomendPlace);
   const {
     mapRef,
+    mapElementRef,
     setMap,
     panTo
   } = useHeycarMap();
@@ -5750,6 +5839,11 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
   const defaultCenterPlacePromise = new Promise((resolve) => {
     getDefaultCenterPlace().then(resolve).catch(() => resolve(void 0));
   });
+  const {
+    orientation
+  } = useDeviceOrientation({
+    elementRef: mapElementRef
+  });
   const {
     geoPosition,
     geoError,
@@ -5867,7 +5961,8 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
       }
     }, [!geoLoading.value && !geoError.value && h(PassengerCircle, {
       "attrs": {
-        "position": geoPosition.value
+        "position": geoPosition.value,
+        "angle": orientation.cssRotationVariableName
       }
     }), zoomRef.value >= RECOMMEND_PLACE_ZOOM_MIN && h(PickupPoints, {
       "attrs": {
@@ -6824,42 +6919,30 @@ const BusinessTaxiEndMap = defineSetup(function BusinessTaxiEndMap2(props) {
     })]);
   };
 });
-const DEVICE_ORIENTATION_INTERVAL = 100;
-const useDeviceOrientation = (props) => {
-  const orientation = reactive({});
-  const { onChange } = props != null ? props : {};
-  watchEffect((onCleanup) => {
-    const handleDeviceOrientation = throttle((event) => {
-      var _a, _b, _c;
-      const alpha = (_a = event.alpha) != null ? _a : void 0;
-      const beta = (_b = event.beta) != null ? _b : void 0;
-      const gamma = (_c = event.gamma) != null ? _c : void 0;
-      Object.assign(orientation, { alpha, beta, gamma });
-      onChange == null ? void 0 : onChange({ alpha, beta, gamma });
-    }, DEVICE_ORIENTATION_INTERVAL);
-    addEventListener("deviceorientation", handleDeviceOrientation);
-    onCleanup(() => removeEventListener("deviceorientation", handleDeviceOrientation));
-  });
-  return { orientation };
-};
 const STATUS_NEED_CAR_POSITION = ["book-driverStartService", "dispatched", "driverStartService", "inService", "driverArrived"];
 const BusinessTaxiServiceMap = defineLagecySetup(function BusinessTaxiServiceMap2(props) {
   const {
     interval,
     registerOverlay,
-    mapRef,
+    mapRef: outerSetMap,
     getDriverPosition,
     renderStartSerivceTitle,
     renderInServiceTitle
   } = props;
   const deferedSetFitView = pipeDefer(registerOverlay.setFitView);
+  const {
+    setMap,
+    mapElementRef
+  } = useHeycarMap();
   const {
     geoPosition,
     geoError
   } = useGeoLocation();
   const {
     orientation
-  } = useDeviceOrientation();
+  } = useDeviceOrientation({
+    elementRef: mapElementRef
+  });
   const carPositionRef = ref();
   const carAngleRef = ref();
   const {
@@ -6900,13 +6983,12 @@ const BusinessTaxiServiceMap = defineLagecySetup(function BusinessTaxiServiceMap
     const carAngle = carAngleRef.value;
     const touchEnable = !["canceled", "canceling", "completed", "endService", "waitpay", "waitRechargePay", "refund", "rechargePayed", "payed"].includes(driverStatus);
     const passengerPosition = geoError.value ? void 0 : geoPosition.value;
-    const passengerAngle = orientation.alpha === void 0 ? void 0 : 360 - orientation.alpha;
-    console.log("passengerAngle = ", passengerAngle);
+    const passengerAngle = orientation.cssRotationVariableName;
     return h(HeycarMap, {
       "attrs": {
         "center": place2point(from),
         "zoom": 13,
-        "mapRef": mapRef,
+        "mapRef": combineHandler(outerSetMap, setMap),
         "touchEnable": touchEnable
       },
       "on": {

package/dist/style.css

@@ -206,6 +206,17 @@ a[title*="Google"]>div>img[alt="Google"], .gmnoprint {
   margin-bottom: -3.3vw;
 }
 ._1l6offo2 {
+  width: 6.6vw;
+  height: 7.738vw;
+  margin-bottom: -3.3vw;
+  transform-origin: center 4.438vw;
+}
+._1l6offo3 {
+  width: 16.27vw;
+  height: 16.27vw;
+  margin-bottom: -8.135vw;
+}
+._1l6offo4 {
   width: 16.27vw;
   height: 16.27vw;
   margin-bottom: -8.135vw;

package/dist/utils/transform.d.ts

@@ -12,6 +12,7 @@ export declare const property2mapEventName: (propertyName: string) => string;
 export type VectorMapForeign = "style_en" | "style_local" | "style_zh_cn";
 export declare const language2vectorMapForeign: (lang: "en" | "zh") => VectorMapForeign;
 export declare const place2point: (place: Place) => Point;
+export declare const combineHandler: <P extends any[], R>(fn1: ((...args: P) => any) | undefined, fn2: (...args: P) => R) => (...args: P) => R;
 export declare const pipeAsync: <P extends any[]>(fn?: ((...args: P) => any) | undefined) => (...args: P) => void;
 export declare const pipeDefer: <P extends any[], R>(fn: (...args: P) => R) => (...args: P) => Promise<R>;
 export declare const pipeOnlyLastEffect: <P extends any[], R>(fn: (...arg: P) => Promise<R>) => (...args: P) => Promise<R>;

package/package.json

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