@heycar/heycars-map 0.5.1 → 0.5.3

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

@@ -9,3 +9,4 @@ export declare const hide: import("@vanilla-extract/recipes").RuntimeFn<{
         false: {};
     };
 }>;
+export declare const taxiCarTitle: string;

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,31 @@ 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;
+    (_c = mapRef.value) == null ? void 0 : _c.setZoom(zoom);
+  };
+  Vue.watch(
+    () => enableRef == null ? void 0 : enableRef.value,
+    (enable, _, onCleanup) => {
+      if (enable) {
+        addEventListener("wheel", handleWheel);
+      } else {
+        removeEventListener("wheel", handleWheel);
+      }
+      onCleanup(() => {
+        removeEventListener("wheel", handleWheel);
+      });
+    },
+    { immediate: true }
+  );
+};
 const Amap_css_ts_vanilla = "";
 var amap = "_1d8ur7t0";
 const Amap = defineSetup(function Amap2(props, { slots, emit }) {
@@ -1881,9 +1906,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 +1920,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"
     });
@@ -2005,6 +2034,7 @@ const Gmap = defineSetup(function Gmap2(props, { slots, emit }) {
     return Vue.h("div", { ref: elementRef, class: gmap }, (_a = slots.default) == null ? void 0 : _a.call(slots));
   };
 });
+window.movingDraw = !new URLSearchParams(location.search).has("disableMovingDraw");
 const MapProvider = defineLagecySetup(function MapProvider2(props, {
   slots
 }) {
@@ -2063,7 +2093,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 +2135,7 @@ const HeycarMap = defineLagecySetup(function HeycarMap2(props, {
             "doubleClickZoom": touchEnable,
             "scrollWheel": touchEnable,
             "touchZoom": touchEnable,
+            "touchZoomCenter": touchZoomCenter ? 1 : 0,
             "keyboardEnable": touchEnable,
             "pitchEnable": touchEnable
           },
@@ -2114,7 +2146,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();
@@ -2489,7 +2521,7 @@ const useAmapFitView = (props) => {
   const overlayGroup = /* @__PURE__ */ new Set();
   let timer = void 0;
   const setFitView = () => {
-    var _a;
+    var _a, _b;
     const map = mapRef.value;
     if (!map)
       return;
@@ -2497,6 +2529,12 @@ const useAmapFitView = (props) => {
     const [top, right, bottom, left] = (_a = props.padding) != null ? _a : [0, 0, 0, 0];
     spaceLog("setFitView", "overlayGroup = ", overlayGroup);
     map.setFitView([...overlayGroup], false, [top * vw, bottom * vw, left * vw, right * vw]);
+    if (overlayGroup.size === 1) {
+      const [overlay] = [...overlayGroup];
+      const position = (_b = overlay.getPosition) == null ? void 0 : _b.call(overlay);
+      if (position)
+        map.panTo(position);
+    }
   };
   const registerFitVeiw = {
     add: (overlay) => {
@@ -2746,7 +2784,7 @@ var pointIcon = createRuntimeFn({ defaultClassName: "", variantClassNames: { typ
 var pointInfoBox = "_4a4ovk1";
 var pointInfoBoxDescription = "_4a4ovk4";
 var pointInfoBoxEmphasize$1 = "_4a4ovk5";
-var pointInfoBoxTitle$1 = "_4a4ovk3";
+var pointInfoBoxTitle = "_4a4ovk3";
 var pointLayout$1 = "_4a4ovk0";
 var pointSingleInfoBox$1 = "_4a4ovk2";
 const AStartEndPoint = defineSetup(function AStartEndPoint2(props) {
@@ -2762,7 +2800,7 @@ const AStartEndPoint = defineSetup(function AStartEndPoint2(props) {
       return `
         <div class="${pointLayout$1}">
           <div class="${pointSingleInfoBox$1}">
-            <div class="${pointInfoBoxTitle$1}">${props.title}</div>
+            <div class="${pointInfoBoxTitle}">${props.title}</div>
           </div>
           <img src="${icon}" class="${pointIcon({
         type: props.type
@@ -2772,7 +2810,7 @@ const AStartEndPoint = defineSetup(function AStartEndPoint2(props) {
     return `
         <div class="${pointLayout$1}">
           <div class="${pointInfoBox}">
-            <div class="${pointInfoBoxTitle$1}">${(_a = props.title) != null ? _a : ""}</div>
+            <div class="${pointInfoBoxTitle}">${(_a = props.title) != null ? _a : ""}</div>
             <div class="${pointInfoBoxDescription}">${descriptionRow}</div>
           </div>
           <img src="${icon}" class="${pointIcon({
@@ -2808,7 +2846,7 @@ const GStartEndPoint = defineSetup(function GStartEndPoint2(props) {
         class: pointLayout$1
       }, `
           <div class="${pointSingleInfoBox$1}">
-            <div class="${pointInfoBoxTitle$1}">${props.title}</div>
+            <div class="${pointInfoBoxTitle}">${props.title}</div>
           </div>
           <img src="${icon}" class="${pointIcon({
         type: props.type
@@ -2818,7 +2856,7 @@ const GStartEndPoint = defineSetup(function GStartEndPoint2(props) {
       class: pointLayout$1
     }, `
         <div class="${pointInfoBox}">
-          <div class="${pointInfoBoxTitle$1}">${(_a = props.title) != null ? _a : ""}</div>
+          <div class="${pointInfoBoxTitle}">${(_a = props.title) != null ? _a : ""}</div>
           <div class="${pointInfoBoxDescription}">${descriptionRow}</div>
         </div>
         <img src="${icon}" class="${pointIcon({
@@ -3999,6 +4037,7 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
       "attrs": {
         "center": centerPoint.value,
         "zoom": zoomRef.value,
+        "touchZoomCenter": true,
         "mapRef": setMap
       }
     }, [!geoLoading.value && !geoError.value && Vue.h(PassengerCircle, {
@@ -4052,9 +4091,9 @@ const TaxiCar_css_ts_vanilla = "";
 var carIcon = "_65j3sr1";
 var hide = createRuntimeFn({ defaultClassName: "", variantClassNames: { hide: { true: "_65j3sr2", false: "_65j3sr3" } }, defaultVariants: {}, compoundVariants: [] });
 var pointInfoBoxEmphasize = "_4a4ovk5";
-var pointInfoBoxTitle = "_4a4ovk3";
 var pointLayout = "_4a4ovk0";
 var pointSingleInfoBox = "_4a4ovk2";
+var taxiCarTitle = "_65j3sr4";
 const ATaxiCar = defineSetup(function ATaxiCar2(props) {
   const contentRef = Vue.computed(() => {
     var _a;
@@ -4069,7 +4108,7 @@ const ATaxiCar = defineSetup(function ATaxiCar2(props) {
         <div class="${pointSingleInfoBox} ${hide({
       hide: !hide$1
     })}">
-          <div class="${pointInfoBoxTitle}">${titleRow}</div>
+          <div class="${taxiCarTitle}">${titleRow}</div>
         </div>
         <img src="${imgTaxicar}" class="${carIcon} ${hide({
       hide: hide$1
@@ -4118,7 +4157,7 @@ const GTaxiCar = defineSetup(function GTaxiCar2(props) {
         <div class="${pointSingleInfoBox} ${hide({
       hide: !hide$1
     })}">
-          <div class="${pointInfoBoxTitle}">${titleRow}</div>
+          <div class="${taxiCarTitle}">${titleRow}</div>
         </div>
         <img src="${imgTaxicar}" class="${carIcon} ${hide({
       hide: hide$1

package/dist/index.js

@@ -1857,6 +1857,31 @@ 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;
+    (_c = mapRef.value) == null ? void 0 : _c.setZoom(zoom);
+  };
+  watch(
+    () => enableRef == null ? void 0 : enableRef.value,
+    (enable, _, onCleanup) => {
+      if (enable) {
+        addEventListener("wheel", handleWheel);
+      } else {
+        removeEventListener("wheel", handleWheel);
+      }
+      onCleanup(() => {
+        removeEventListener("wheel", handleWheel);
+      });
+    },
+    { immediate: true }
+  );
+};
 const Amap_css_ts_vanilla = "";
 var amap = "_1d8ur7t0";
 const Amap = defineSetup(function Amap2(props, { slots, emit }) {
@@ -1879,9 +1904,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 +1918,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"
     });
@@ -2003,6 +2032,7 @@ const Gmap = defineSetup(function Gmap2(props, { slots, emit }) {
     return h("div", { ref: elementRef, class: gmap }, (_a = slots.default) == null ? void 0 : _a.call(slots));
   };
 });
+window.movingDraw = !new URLSearchParams(location.search).has("disableMovingDraw");
 const MapProvider = defineLagecySetup(function MapProvider2(props, {
   slots
 }) {
@@ -2061,7 +2091,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 +2133,7 @@ const HeycarMap = defineLagecySetup(function HeycarMap2(props, {
             "doubleClickZoom": touchEnable,
             "scrollWheel": touchEnable,
             "touchZoom": touchEnable,
+            "touchZoomCenter": touchZoomCenter ? 1 : 0,
             "keyboardEnable": touchEnable,
             "pitchEnable": touchEnable
           },
@@ -2112,7 +2144,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();
@@ -2487,7 +2519,7 @@ const useAmapFitView = (props) => {
   const overlayGroup = /* @__PURE__ */ new Set();
   let timer = void 0;
   const setFitView = () => {
-    var _a;
+    var _a, _b;
     const map = mapRef.value;
     if (!map)
       return;
@@ -2495,6 +2527,12 @@ const useAmapFitView = (props) => {
     const [top, right, bottom, left] = (_a = props.padding) != null ? _a : [0, 0, 0, 0];
     spaceLog("setFitView", "overlayGroup = ", overlayGroup);
     map.setFitView([...overlayGroup], false, [top * vw, bottom * vw, left * vw, right * vw]);
+    if (overlayGroup.size === 1) {
+      const [overlay] = [...overlayGroup];
+      const position = (_b = overlay.getPosition) == null ? void 0 : _b.call(overlay);
+      if (position)
+        map.panTo(position);
+    }
   };
   const registerFitVeiw = {
     add: (overlay) => {
@@ -2744,7 +2782,7 @@ var pointIcon = createRuntimeFn({ defaultClassName: "", variantClassNames: { typ
 var pointInfoBox = "_4a4ovk1";
 var pointInfoBoxDescription = "_4a4ovk4";
 var pointInfoBoxEmphasize$1 = "_4a4ovk5";
-var pointInfoBoxTitle$1 = "_4a4ovk3";
+var pointInfoBoxTitle = "_4a4ovk3";
 var pointLayout$1 = "_4a4ovk0";
 var pointSingleInfoBox$1 = "_4a4ovk2";
 const AStartEndPoint = defineSetup(function AStartEndPoint2(props) {
@@ -2760,7 +2798,7 @@ const AStartEndPoint = defineSetup(function AStartEndPoint2(props) {
       return `
         <div class="${pointLayout$1}">
           <div class="${pointSingleInfoBox$1}">
-            <div class="${pointInfoBoxTitle$1}">${props.title}</div>
+            <div class="${pointInfoBoxTitle}">${props.title}</div>
           </div>
           <img src="${icon}" class="${pointIcon({
         type: props.type
@@ -2770,7 +2808,7 @@ const AStartEndPoint = defineSetup(function AStartEndPoint2(props) {
     return `
         <div class="${pointLayout$1}">
           <div class="${pointInfoBox}">
-            <div class="${pointInfoBoxTitle$1}">${(_a = props.title) != null ? _a : ""}</div>
+            <div class="${pointInfoBoxTitle}">${(_a = props.title) != null ? _a : ""}</div>
             <div class="${pointInfoBoxDescription}">${descriptionRow}</div>
           </div>
           <img src="${icon}" class="${pointIcon({
@@ -2806,7 +2844,7 @@ const GStartEndPoint = defineSetup(function GStartEndPoint2(props) {
         class: pointLayout$1
       }, `
           <div class="${pointSingleInfoBox$1}">
-            <div class="${pointInfoBoxTitle$1}">${props.title}</div>
+            <div class="${pointInfoBoxTitle}">${props.title}</div>
           </div>
           <img src="${icon}" class="${pointIcon({
         type: props.type
@@ -2816,7 +2854,7 @@ const GStartEndPoint = defineSetup(function GStartEndPoint2(props) {
       class: pointLayout$1
     }, `
         <div class="${pointInfoBox}">
-          <div class="${pointInfoBoxTitle$1}">${(_a = props.title) != null ? _a : ""}</div>
+          <div class="${pointInfoBoxTitle}">${(_a = props.title) != null ? _a : ""}</div>
           <div class="${pointInfoBoxDescription}">${descriptionRow}</div>
         </div>
         <img src="${icon}" class="${pointIcon({
@@ -3997,6 +4035,7 @@ const BusinessRecomendPlaceMap = defineLagecySetup(function BusinessRecomendPlac
       "attrs": {
         "center": centerPoint.value,
         "zoom": zoomRef.value,
+        "touchZoomCenter": true,
         "mapRef": setMap
       }
     }, [!geoLoading.value && !geoError.value && h(PassengerCircle, {
@@ -4050,9 +4089,9 @@ const TaxiCar_css_ts_vanilla = "";
 var carIcon = "_65j3sr1";
 var hide = createRuntimeFn({ defaultClassName: "", variantClassNames: { hide: { true: "_65j3sr2", false: "_65j3sr3" } }, defaultVariants: {}, compoundVariants: [] });
 var pointInfoBoxEmphasize = "_4a4ovk5";
-var pointInfoBoxTitle = "_4a4ovk3";
 var pointLayout = "_4a4ovk0";
 var pointSingleInfoBox = "_4a4ovk2";
+var taxiCarTitle = "_65j3sr4";
 const ATaxiCar = defineSetup(function ATaxiCar2(props) {
   const contentRef = computed(() => {
     var _a;
@@ -4067,7 +4106,7 @@ const ATaxiCar = defineSetup(function ATaxiCar2(props) {
         <div class="${pointSingleInfoBox} ${hide({
       hide: !hide$1
     })}">
-          <div class="${pointInfoBoxTitle}">${titleRow}</div>
+          <div class="${taxiCarTitle}">${titleRow}</div>
         </div>
         <img src="${imgTaxicar}" class="${carIcon} ${hide({
       hide: hide$1
@@ -4116,7 +4155,7 @@ const GTaxiCar = defineSetup(function GTaxiCar2(props) {
         <div class="${pointSingleInfoBox} ${hide({
       hide: !hide$1
     })}">
-          <div class="${pointInfoBoxTitle}">${titleRow}</div>
+          <div class="${taxiCarTitle}">${titleRow}</div>
         </div>
         <img src="${imgTaxicar}" class="${carIcon} ${hide({
       hide: hide$1

package/dist/style.css

@@ -108,6 +108,9 @@
   height: 3.2vw;
 }._1d8ur7t0 {
   position: relative;
+}
+.amap-logo, .amap-copyright {
+  opacity: 0;
 }._7anfuo0 {
   height: inherit;
   width: inherit;
@@ -230,6 +233,14 @@
 }
 ._65j3sr2 {
   visibility: hidden;
+}
+._65j3sr4 {
+  font-size: 3.2vw;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #1E1E1E;
+  line-height: 3.8vw;
+  white-space: nowrap;
 }@keyframes rrvp0y0 {
   0% {
     transform: scale(0);

package/package.json

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

package/todo.md

@@ -5,6 +5,7 @@ https://dawchihliou.github.io/articles/building-custom-google-maps-marker-react-
 4. 做完其他事情进入首页，变成了获取定位失败，但其实 gps 是 ok 的，因为刷新页面是有点位的
 5. map 的两个 slot loading 和 error slot 没有生效
 6. 企业微信如果关闭定位，会不停的跳 geoError 事件
+7. 司机已接单页面，title 倒计时, 1s 更新一次 title，引起 walking 接口 1s 触发
 
 缩放问题
 
@@ -79,3 +80,12 @@ https://dawchihliou.github.io/articles/building-custom-google-maps-marker-react-
 - 5347
 - 5348
 - 5057
+
+  0.5.3
+
+- 4867
+- 4920
+- 5252
+- 5366
+- 5364
+- 5373