@heycar/heycars-map 0.5.1 → 0.5.2

package/dist/components/Amap/Amap.d.ts

@@ -12,6 +12,7 @@ export interface AmapProps extends Omit<AMap.MapOptions, "vectorMapForeign"> {
     touchZoom?: boolean;
     keyboardEnable?: boolean;
     pitchEnable?: boolean;
+    touchZoomCenter?: 0 | 1;
     onDragStart?: MapEventHandler<AMap.Map>;
     onDragEnd?: MapEventHandler<AMap.Map>;
     onZoomEnd?: MapEventHandler<AMap.Map>;

package/dist/components/MapProvider/MapProvider.d.ts

@@ -7,9 +7,10 @@ export type MapProviderProps = UseMapLoaderProps & Pick<MapSupplierPayolad, "gma
 export declare const MapProvider: import("vue").DefineComponent<import("vue/types/v3-component-props").ComponentObjectPropsOptions<MapProviderProps>, 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<MapProviderProps, Required<MapProviderProps>>, "change", MapProviderProps, {}>;
 export interface HeycarMapProps extends Pick<GmapLoaderProps, "fallback" | "loading">, Pick<AmapProps, "center" | "zoom"> {
     mapRef?: SetMap<AMap.Map> | SetMap<google.maps.Map>;
+    touchZoomCenter?: boolean;
+    touchEnable?: boolean;
     onDragEnd?: (value: [number, number]) => any;
     onZoomEnd?: (value: number) => any;
     onResize?: () => any;
-    touchEnable?: boolean;
 }
 export declare const HeycarMap: import("vue").DefineComponent<import("vue/types/v3-component-props").ComponentObjectPropsOptions<HeycarMapProps>, 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<HeycarMapProps, Required<HeycarMapProps>>, "resize" | "dragEnd" | "zoomEnd", HeycarMapProps, {}>;

package/dist/hooks/useMapWheelZoomCenter.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="google.maps" />
+import { Ref, ShallowRef } from "vue-demi";
+interface UseWheelZoomCenterProps<M = AMap.Map | google.maps.Map> {
+    mapRef: ShallowRef<M | undefined>;
+    enableRef?: Ref<boolean>;
+}
+export declare const useAmapWheelZoomCenter: (props: UseWheelZoomCenterProps<AMap.Map>) => void;
+export {};

package/dist/index.cjs

@@ -1859,6 +1859,35 @@ const useMapLoader = (props) => {
     onChange
   });
 };
+const ZOOM_WHEEL_RATIO = -135e-5;
+const useAmapWheelZoomCenter = (props) => {
+  const { mapRef, enableRef } = props;
+  const handleWheel = (e) => {
+    var _a, _b, _c;
+    const { deltaY } = e;
+    const prevZoom = (_b = (_a = mapRef.value) == null ? void 0 : _a.getZoom()) != null ? _b : 0;
+    const zoom = prevZoom + ZOOM_WHEEL_RATIO * deltaY;
+    console.log("handleWheel zoom = ", zoom);
+    (_c = mapRef.value) == null ? void 0 : _c.setZoom(zoom);
+  };
+  Vue.watch(
+    () => enableRef == null ? void 0 : enableRef.value,
+    (enable, _, onCleanup) => {
+      if (enable) {
+        console.log("addEventListener wheel");
+        addEventListener("wheel", handleWheel);
+      } else {
+        console.log("removeEventListener wheel");
+        removeEventListener("wheel", handleWheel);
+      }
+      onCleanup(() => {
+        console.log("onClean removeEventListener wheel");
+        removeEventListener("wheel", handleWheel);
+      });
+    },
+    { immediate: true }
+  );
+};
 const Amap_css_ts_vanilla = "";
 var amap = "_1d8ur7t0";
 const Amap = defineSetup(function Amap2(props, { slots, emit }) {
@@ -1881,9 +1910,10 @@ const Amap = defineSetup(function Amap2(props, { slots, emit }) {
       animateEnable = true,
       keyboardEnable = true,
       doubleClickZoom = true,
-      scrollWheel = true,
-      touchZoom = true
+      touchZoom = true,
+      touchZoomCenter = 0
     } = props;
+    const scrollWheel = touchZoomCenter ? false : props.scrollWheel;
     return {
       dragEnable,
       zoomEnable,
@@ -1894,17 +1924,20 @@ const Amap = defineSetup(function Amap2(props, { slots, emit }) {
       keyboardEnable,
       doubleClickZoom,
       scrollWheel,
-      touchZoom
+      touchZoom,
+      touchZoomCenter
     };
   });
   const elementRef = Vue.shallowRef();
   const mapRef = Vue.shallowRef();
   provideAmap(mapRef);
+  useAmapWheelZoomCenter({ mapRef, enableRef: Vue.computed(() => !!props.touchZoomCenter) });
   Vue.watchPostEffect(() => {
     if (mapRef.value || !elementRef.value)
       return;
     const map = new AMap.Map(elementRef.value, {
       ...defaultOptions,
+      scrollWheel: defaultOptions.touchZoomCenter ? false : defaultOptions.scrollWheel,
       vectorMapForeign,
       mapStyle: "amap://styles/95498a904992a4c0b866a3e4d7729682"
     });
@@ -2063,7 +2096,8 @@ const HeycarMap = defineLagecySetup(function HeycarMap2(props, {
       mapRef: setMap,
       center,
       zoom,
-      touchEnable = true
+      touchEnable = true,
+      touchZoomCenter
     } = props;
     if (status === Status.LOADING)
       return (_a = slots.loading) == null ? void 0 : _a.call(slots);
@@ -2104,6 +2138,7 @@ const HeycarMap = defineLagecySetup(function HeycarMap2(props, {
             "doubleClickZoom": touchEnable,
             "scrollWheel": touchEnable,
             "touchZoom": touchEnable,
+            "touchZoomCenter": touchZoomCenter ? 1 : 0,
             "keyboardEnable": touchEnable,
             "pitchEnable": touchEnable
           },
@@ -2114,7 +2149,7 @@ const HeycarMap = defineLagecySetup(function HeycarMap2(props, {
         }, [children]);
     }
   };
-}).props(["center", "fallback", "loading", "mapRef", "zoom", "touchEnable"]);
+}).props(["center", "fallback", "loading", "mapRef", "zoom", "touchEnable", "touchZoomCenter"]);
 const AmapPolyline = defineSetup(function AmapPolyline2(props) {
   const polylineRef = Vue.shallowRef();
   const mapRef = useAmap();
@@ -3999,6 +4034,7 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
       "attrs": {
         "center": centerPoint.value,
         "zoom": zoomRef.value,
+        "touchZoomCenter": true,
         "mapRef": setMap
       }
     }, [!geoLoading.value && !geoError.value && Vue.h(PassengerCircle, {

package/dist/index.js

@@ -1857,6 +1857,35 @@ const useMapLoader = (props) => {
     onChange
   });
 };
+const ZOOM_WHEEL_RATIO = -135e-5;
+const useAmapWheelZoomCenter = (props) => {
+  const { mapRef, enableRef } = props;
+  const handleWheel = (e) => {
+    var _a, _b, _c;
+    const { deltaY } = e;
+    const prevZoom = (_b = (_a = mapRef.value) == null ? void 0 : _a.getZoom()) != null ? _b : 0;
+    const zoom = prevZoom + ZOOM_WHEEL_RATIO * deltaY;
+    console.log("handleWheel zoom = ", zoom);
+    (_c = mapRef.value) == null ? void 0 : _c.setZoom(zoom);
+  };
+  watch(
+    () => enableRef == null ? void 0 : enableRef.value,
+    (enable, _, onCleanup) => {
+      if (enable) {
+        console.log("addEventListener wheel");
+        addEventListener("wheel", handleWheel);
+      } else {
+        console.log("removeEventListener wheel");
+        removeEventListener("wheel", handleWheel);
+      }
+      onCleanup(() => {
+        console.log("onClean removeEventListener wheel");
+        removeEventListener("wheel", handleWheel);
+      });
+    },
+    { immediate: true }
+  );
+};
 const Amap_css_ts_vanilla = "";
 var amap = "_1d8ur7t0";
 const Amap = defineSetup(function Amap2(props, { slots, emit }) {
@@ -1879,9 +1908,10 @@ const Amap = defineSetup(function Amap2(props, { slots, emit }) {
       animateEnable = true,
       keyboardEnable = true,
       doubleClickZoom = true,
-      scrollWheel = true,
-      touchZoom = true
+      touchZoom = true,
+      touchZoomCenter = 0
     } = props;
+    const scrollWheel = touchZoomCenter ? false : props.scrollWheel;
     return {
       dragEnable,
       zoomEnable,
@@ -1892,17 +1922,20 @@ const Amap = defineSetup(function Amap2(props, { slots, emit }) {
       keyboardEnable,
       doubleClickZoom,
       scrollWheel,
-      touchZoom
+      touchZoom,
+      touchZoomCenter
     };
   });
   const elementRef = shallowRef();
   const mapRef = shallowRef();
   provideAmap(mapRef);
+  useAmapWheelZoomCenter({ mapRef, enableRef: computed(() => !!props.touchZoomCenter) });
   watchPostEffect(() => {
     if (mapRef.value || !elementRef.value)
       return;
     const map = new AMap.Map(elementRef.value, {
       ...defaultOptions,
+      scrollWheel: defaultOptions.touchZoomCenter ? false : defaultOptions.scrollWheel,
       vectorMapForeign,
       mapStyle: "amap://styles/95498a904992a4c0b866a3e4d7729682"
     });
@@ -2061,7 +2094,8 @@ const HeycarMap = defineLagecySetup(function HeycarMap2(props, {
       mapRef: setMap,
       center,
       zoom,
-      touchEnable = true
+      touchEnable = true,
+      touchZoomCenter
     } = props;
     if (status === Status.LOADING)
       return (_a = slots.loading) == null ? void 0 : _a.call(slots);
@@ -2102,6 +2136,7 @@ const HeycarMap = defineLagecySetup(function HeycarMap2(props, {
             "doubleClickZoom": touchEnable,
             "scrollWheel": touchEnable,
             "touchZoom": touchEnable,
+            "touchZoomCenter": touchZoomCenter ? 1 : 0,
             "keyboardEnable": touchEnable,
             "pitchEnable": touchEnable
           },
@@ -2112,7 +2147,7 @@ const HeycarMap = defineLagecySetup(function HeycarMap2(props, {
         }, [children]);
     }
   };
-}).props(["center", "fallback", "loading", "mapRef", "zoom", "touchEnable"]);
+}).props(["center", "fallback", "loading", "mapRef", "zoom", "touchEnable", "touchZoomCenter"]);
 const AmapPolyline = defineSetup(function AmapPolyline2(props) {
   const polylineRef = shallowRef();
   const mapRef = useAmap();
@@ -3997,6 +4032,7 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
       "attrs": {
         "center": centerPoint.value,
         "zoom": zoomRef.value,
+        "touchZoomCenter": true,
         "mapRef": setMap
       }
     }, [!geoLoading.value && !geoError.value && h(PassengerCircle, {

package/package.json

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