@heycar/heycars-map 0.3.5 → 0.3.7

package/dist/style.css

@@ -1 +1 @@
-.n8tgem0{pointer-events:none;position:absolute;bottom:50%;left:0;right:0;margin-left:auto;margin-right:auto;display:flex;flex-direction:column;align-items:center;z-index:1}.n8tgem1{pointer-events:auto;padding:2.67vw 4.27vw;background:linear-gradient(90deg,#79AFFF 0%,#5C8DFF 32%,#507FFF 75%,#4471FF 100%);border-radius:3.2vw;display:flex;align-items:center}.n8tgem2{padding-right:2.67vw;max-width:41.33vw}.n8tgem3{display:-webkit-box;font-size:3.47vw;font-family:PingFangSC-Semibold,PingFang SC;font-weight:600;color:#fff;line-height:4.8vw;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.n8tgem4{margin-top:.53vw;font-size:2.93vw;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#fff;line-height:4.27vw;opacity:.8}.n8tgem5{width:1.758vw;height:2.93vw}.n8tgem6{width:.8vw;height:4vw;background:#4C80FF;border-radius:0vw 0vw 26.67vw 26.67vw}.n8tgem7{width:6.9355vw;height:10.67vw}.rgf09w0{width:7.1045vw;height:10.93vw;display:flex}._15rq2xn0{display:flex;flex-direction:column;align-items:center;margin-bottom:-1.6vw}._15rq2xn1{padding:2.13vw 4.5vw 2.67vw 4.27vw;display:flex;align-items:center;background:linear-gradient(90deg,#79AFFF 0%,#5C8DFF 32%,#507FFF 75%,#4471FF 100%);border-radius:3.2vw}._15rq2xn2{font-size:3.47vw;font-family:PingFangSC-Semibold,PingFang SC;font-weight:600;color:#fff;line-height:4.8vw;white-space:nowrap}._15rq2xn3{font-size:2.93vw;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#eafaf8;line-height:4.27vw;white-space:nowrap;opacity:.8}._15rq2xn4{margin-left:3.2vw;width:1.44vw;height:2.4vw}._15rq2xn5{width:.8vw;height:4vw;background:#4C80FF;border-radius:0vw 0vw 26.67vw 26.67vw;z-index:1}._15rq2xn6{margin-top:-1.5vw;width:3.2vw;height:3.2vw}._1d8ur7t0,._7anfuo0{position:relative}._4a4ovk0{margin-bottom:-.4vw;display:flex;flex-direction:column;align-items:center}._4a4ovk1{padding:1.07vw 2.4vw 1.6vw 2.67vw;background:#FFFFFF;box-shadow:0 .53vw 2.4vw #3f3f3f33;border-radius:2.13vw}._4a4ovk2{padding:2.67vw 2.67vw 2.4vw 3.2vw;background:#FFFFFF;box-shadow:0 0 2.67vw #4e556c26;border-radius:4.8vw;font-size:3.2vw;font-family:PingFangSC-Medium,PingFang SC;font-weight:500;color:#1e1e1e;line-height:4.53vw;white-space:nowrap}._4a4ovk3{font-size:3.2vw;font-family:PingFangSC-Medium,PingFang SC;font-weight:500;color:#1e1e1e;line-height:4.53vw;white-space:nowrap}._4a4ovk4{font-size:2.4vw;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#7e7e7e;line-height:3.47vw;white-space:nowrap}._4a4ovk5{color:#4471ff;font-family:PingFangSC-Medium,PingFang SC;font-weight:500}._4a4ovk6{margin-top:1.33vw;width:6.192vw;height:7.998vw}._4a4ovk7{margin-top:2.4vw;width:6.192vw;height:7.998vw}._1l6offo0{display:flex}._1l6offo1{width:4.53vw;height:4.53vw;margin-bottom:-2.265vw}._1l6offo2{width:16.27vw;height:16.27vw;margin-bottom:-8.135vw}.fhyw80{display:flex;align-items:center}.fhyw81{flex-direction:row-reverse}.fhyw83{margin-right:-2.265vw}.fhyw84{margin-left:-2.265vw}.fhyw85{margin-bottom:-2.265vw}.fhyw86{margin-right:calc(50% - 2.265vw)}.fhyw87{margin-left:calc(50% - 2.265vw)}.fhyw88{display:flex;width:4.53vw;height:4.53vw}.fhyw89{opacity:0}.fhyw8b{font-size:3.47vw;font-family:PingFangSC-Semibold,PingFang SC;font-weight:600;color:#243e66;line-height:4.53vw;white-space:nowrap}._65j3sr1{margin-top:1.87vw;margin-bottom:-5.5vw;width:6vw;height:11vw}@keyframes rrvp0y0{0%{transform:scale(0);opacity:1}33.33%{transform:scale(.5);opacity:1}66.66%{transform:scale(1);opacity:0}to{transform:scale(1);opacity:0}}@keyframes rrvp0y1{0%{transform:scale(0);opacity:0}33.33%{transform:scale(0);opacity:1}66.66%{transform:scale(.5);opacity:1}to{transform:scale(1);opacity:0}}.rrvp0y2{display:flex;margin-bottom:-30.935vw;width:61.87vw;height:61.87vw;animation-name:rrvp0y0;animation-duration:3s;animation-iteration-count:infinite;animation-timing-function:linear}.rrvp0y3{animation-name:rrvp0y1}
+.n8tgem0{pointer-events:none;position:absolute;bottom:50%;left:0;right:0;margin-left:auto;margin-right:auto;display:flex;flex-direction:column;align-items:center;z-index:1}.n8tgem1{pointer-events:auto;padding:2.67vw 4.27vw;background:linear-gradient(90deg,#79AFFF 0%,#5C8DFF 32%,#507FFF 75%,#4471FF 100%);border-radius:3.2vw;display:flex;align-items:center}.n8tgem2{padding-right:2.67vw;max-width:41.33vw}.n8tgem3{display:-webkit-box;font-size:3.47vw;font-family:PingFangSC-Semibold,PingFang SC;font-weight:600;color:#fff;line-height:4.8vw;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.n8tgem4{margin-top:.53vw;font-size:2.93vw;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#fff;line-height:4.27vw;opacity:.8}.n8tgem5{width:1.758vw;height:2.93vw}.n8tgem6{width:.8vw;height:4vw;background:#4C80FF;border-radius:0vw 0vw 26.67vw 26.67vw}.n8tgem7{width:6.9355vw;height:10.67vw}.rgf09w0{width:7.1045vw;height:10.93vw;display:flex}._15rq2xn0{display:flex;flex-direction:column;align-items:center;margin-bottom:-1.6vw}._15rq2xn1{padding:2.13vw 4.5vw 2.67vw 4.27vw;display:flex;align-items:center;background:linear-gradient(90deg,#79AFFF 0%,#5C8DFF 32%,#507FFF 75%,#4471FF 100%);border-radius:3.2vw}._15rq2xn2{font-size:3.47vw;font-family:PingFangSC-Semibold,PingFang SC;font-weight:600;color:#fff;line-height:4.8vw;white-space:nowrap}._15rq2xn3{font-size:2.93vw;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#eafaf8;line-height:4.27vw;white-space:nowrap;opacity:.8}._15rq2xn4{margin-left:3.2vw;width:1.44vw;height:2.4vw}._15rq2xn5{width:.8vw;height:4vw;background:#4C80FF;border-radius:0vw 0vw 26.67vw 26.67vw;z-index:1}._15rq2xn6{margin-top:-1.5vw;width:3.2vw;height:3.2vw}._1d8ur7t0{position:relative}._7anfuo0{height:inherit;width:inherit}._7anfuo1{position:relative}._4a4ovk0{margin-bottom:-.4vw;display:flex;flex-direction:column;align-items:center}._4a4ovk1{padding:1.07vw 2.4vw 1.6vw 2.67vw;background:#FFFFFF;box-shadow:0 .53vw 2.4vw #3f3f3f33;border-radius:2.13vw}._4a4ovk2{padding:2.67vw 2.67vw 2.4vw 3.2vw;background:#FFFFFF;box-shadow:0 0 2.67vw #4e556c26;border-radius:4.8vw;font-size:3.2vw;font-family:PingFangSC-Medium,PingFang SC;font-weight:500;color:#1e1e1e;line-height:4.53vw;white-space:nowrap}._4a4ovk3{font-size:3.2vw;font-family:PingFangSC-Medium,PingFang SC;font-weight:500;color:#1e1e1e;line-height:4.53vw;white-space:nowrap}._4a4ovk4{font-size:2.4vw;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#7e7e7e;line-height:3.47vw;white-space:nowrap}._4a4ovk5{color:#4471ff;font-family:PingFangSC-Medium,PingFang SC;font-weight:500}._4a4ovk6{margin-top:1.33vw;width:6.192vw;height:7.998vw}._4a4ovk7{margin-top:2.4vw;width:6.192vw;height:7.998vw}._1l6offo0{display:flex}._1l6offo1{width:4.53vw;height:4.53vw;margin-bottom:-2.265vw}._1l6offo2{width:16.27vw;height:16.27vw;margin-bottom:-8.135vw}.fhyw80{display:flex;align-items:center}.fhyw81{flex-direction:row-reverse}.fhyw83{margin-right:-2.265vw}.fhyw84{margin-left:-2.265vw}.fhyw85{margin-bottom:-2.265vw}.fhyw86{margin-right:calc(50% - 2.265vw)}.fhyw87{margin-left:calc(50% - 2.265vw)}.fhyw88{display:flex;width:4.53vw;height:4.53vw}.fhyw89{opacity:0}.fhyw8b{display:-webkit-box;font-size:3.2vw;font-family:PingFangSC-Semibold,PingFang SC;font-weight:600;color:#243e66;line-height:4.53vw;width:max-content;max-width:32vw;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}._65j3sr1{margin-top:1.87vw;margin-bottom:-5.5vw;width:6vw;height:11vw}@keyframes rrvp0y0{0%{transform:scale(0);opacity:1}33.33%{transform:scale(.5);opacity:1}66.66%{transform:scale(1);opacity:0}to{transform:scale(1);opacity:0}}@keyframes rrvp0y1{0%{transform:scale(0);opacity:0}33.33%{transform:scale(0);opacity:1}66.66%{transform:scale(.5);opacity:1}to{transform:scale(1);opacity:0}}.rrvp0y2{display:flex;margin-bottom:-30.935vw;width:61.87vw;height:61.87vw;animation-name:rrvp0y0;animation-duration:3s;animation-iteration-count:infinite;animation-timing-function:linear}.rrvp0y3{animation-name:rrvp0y1}

package/dist/utils/transform.d.ts

@@ -13,3 +13,5 @@ export declare const language2vectorMapForeign: (lang: "en" | "zh") => VectorMap
 export declare const place2point: (place: Place) => Point;
 export declare const pipeAsync: <P extends any[]>(fn?: ((...args: P) => any) | undefined) => (...args: P) => void;
 export declare const geocoderResult2cityName: (value: google.maps.GeocoderResult) => string | undefined;
+export declare const isPlaceEqual: (p1: Place, p2?: Place) => boolean;
+export declare const isPointEqual: (p1: Point, p2?: Point) => boolean;

package/package.json

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

package/src/App.tsx

@@ -15,7 +15,7 @@ export const App = defineComponent({
         amapSecret={amapApiSecret}
         gmapId={gmapId}
         gmapKey={gmapApiKey}
-        supplier={"amap"}
+        supplier={"gmap"}
       >
         <DemoBusinessRecomendPlace />
         {/* <DemoBusinessQuoting /> */}

package/src/Demo/DemoBusinessRecomendPlace.tsx

@@ -42,8 +42,13 @@ export const DemoBusinessRecomendPlace = defineSetup(function DemoBusinessRecome
     const { lat, lng } = place;
     console.log("getRecomendPlace context?.source = ", context?.source);
     return [
-      { lat: lat + 0.0001, lng: lng + 0.0001, name: "place name 1" },
-      { lat: lat + 0.002, lng: lng + 0.002, name: "place name 2" },
+      {
+        lat: lat + 0.1001,
+        lng: lng + 0.0001,
+        name: "Blessing Koko Dayc are Blessing Koko which is a very long name",
+      },
+      { lat: lat + 0.0002, lng: lng + 0.0003, name: "place name 2" },
+      { lat: lat + 0.0003, lng: lng + 0.0002, name: "place name 3" },
     ];
   };
   const {
@@ -64,10 +69,9 @@ export const DemoBusinessRecomendPlace = defineSetup(function DemoBusinessRecome
         <SomeAutoComplete cityName="Shinjuku-ku"></SomeAutoComplete>
         <BusinessRecomendPlaceMap
           class={css.demo}
-          geoErrorTitle={"定位获取失败\n请手动设置上车点"}
           geoLoadingTitle={"正在读取GPS位置信息..."}
           unavailableTitle={"当前区域暂未开通服务"}
-          noRecomendDescription={"附近无推荐上车地点"}
+          noRecomendDescription={""}
           recomendDescription={"最佳上车地点"}
           geoDefaultPosition={[139.728287, 35.661007]}
           getRecomendPlace={getRecomendPlace}

package/src/business-components/AbsoluteAddressBox/AbsoluteAddressBox.tsx

@@ -39,7 +39,7 @@ export const AbsoluteAddressBox = defineSetup(function AbsoluteAddressBox(
         <div class={css.absoluteAddressBox} onClick={handleClick}>
           <div class={css.boxTextLayout}>
             <MultilineTitle class={css.boxTitle} value={title} />
-            {description && <div class={css.boxDescription}>{description}</div>}
+            {!!description && <div class={css.boxDescription}>{description}</div>}
           </div>
           <img class={css.arrowRight} src={imgArrowRight} />
         </div>

package/src/business-components/BusinessRecomendPlaceMap/BusinessRecomendPlaceMap.tsx

@@ -8,13 +8,16 @@ import { MapLogProps, useMapLog } from "../../hooks/useMapLog";
 import type { UseMapPlaceProps } from "../../hooks/useMapPlace";
 import { useMapRecomendPlace, UseMapRecomendPlaceProps } from "../../hooks/useMapRecomendPlace";
 import { useMapSupplier } from "../../hooks/useMapSupplier";
+import { useWaitTimer } from "../../hooks/useWaitTimer";
 import { defineLagecySetup } from "../../types/helper";
 import type { Place, Point } from "../../types/interface";
+import { isPlaceEqual } from "../../utils/transform";
 import { AbsoluteAddressBox, AbsoluteAddressBoxProps } from "../AbsoluteAddressBox";
 import { PassengerCircle } from "../PassengerCircle";
 import { PickupPoints } from "../PickupPoints";
 
 const RECOMMEND_PLACE_LIMIT = 30;
+const MAP_DRAG_END_WAIT_ANIMATION = 500;
 
 export interface CenterPlaceSource {
   source: "default" | "geo" | "drag" | "recomend" | "api";
@@ -24,7 +27,6 @@ export interface BusinessRecomendPlaceMapProps
     Pick<UseMapRecomendPlaceProps<CenterPlaceSource>, "getRecomendPlace">,
     MapLogProps {
   geoLoadingTitle: string;
-  geoErrorTitle: string;
   unavailableTitle: string;
   recomendDescription: string;
   noRecomendDescription: string;
@@ -45,7 +47,8 @@ export const BusinessRecomendPlaceMap = defineLagecySetup(
     useMapLog(props, "BusinessRecomendPlaceMap");
     const { geoDefaultPosition, getRecomendPlace, mapContext } = props;
     const { mapRef, setMap } = useHeycarMap();
-    const { readyPromise } = useMapSupplier();
+    const { readyPromise, supplier } = useMapSupplier();
+    const { timerStart, timerStop } = useWaitTimer({ interval: MAP_DRAG_END_WAIT_ANIMATION });
     const centerPlace = reactive<Place>({
       lng: geoDefaultPosition?.[0] ?? 0,
       lat: geoDefaultPosition?.[1] ?? 0,
@@ -99,6 +102,7 @@ export const BusinessRecomendPlaceMap = defineLagecySetup(
       mapRef,
       onChange: (point) => {
         centerSource.source = "drag";
+        timerStart();
         updatePlace(point);
         emit("changeByDrag", point);
       },
@@ -110,6 +114,7 @@ export const BusinessRecomendPlaceMap = defineLagecySetup(
       updateRecomandPlace,
       placeCandidates,
       availableRef,
+      isElectedRef,
     } = useMapRecomendPlace({
       pointRef: centerPoint,
       context: centerSource,
@@ -133,7 +138,8 @@ export const BusinessRecomendPlaceMap = defineLagecySetup(
         }
         emit("changePlace", place);
       },
-      onChange: (place) => {
+      onChange: async (place) => {
+        await timerStop.promise;
         centerSource.source = "recomend";
         Object.assign(centerPlace, { ...place });
         emit("changeRecomandPlace", place);
@@ -151,35 +157,55 @@ export const BusinessRecomendPlaceMap = defineLagecySetup(
     return () => {
       const title = geoLoading.value
         ? props.geoLoadingTitle
-        : geoError.value
-        ? props.geoErrorTitle
         : availableRef.value
         ? centerPlace.name
         : props.unavailableTitle;
       const description =
-        !availableRef.value || geoError.value || geoLoading.value
+        !availableRef.value || geoLoading.value
           ? undefined
-          : placeCandidates.value.length > 0
+          : isElectedRef.value
           ? props.recomendDescription
           : props.noRecomendDescription;
       return (
-        <HeycarMap center={centerPoint.value} zoom={18} mapRef={setMap} log={props.log}>
-          <PassengerCircle position={geoPosition.value} />
-          <PickupPoints places={placeCandidates.value} onClick={setCenterByPlace} log={props.log} />
-          <AbsoluteAddressBox
-            title={title}
-            description={description}
-            type={isDragging.value ? "locator" : "box"}
+        <HeycarMap
+          center={centerPoint.value}
+          zoom={18}
+          mapRef={setMap}
+          renderOverlay={() => {
+            return supplier === "gmap" ? (
+              <AbsoluteAddressBox
+                title={title}
+                description={description}
+                type={isDragging.value ? "locator" : "box"}
+                log={props.log}
+                onClick={() => emit("clickLocator")}
+              />
+            ) : null;
+          }}
+          log={props.log}
+        >
+          {!geoError.value && <PassengerCircle position={geoPosition.value} />}
+          <PickupPoints
+            places={placeCandidates.value}
+            renderLabel={(place) => (isPlaceEqual(place, centerPlace) ? undefined : place.name)}
+            onClick={setCenterByPlace}
             log={props.log}
-            onClick={() => emit("clickLocator")}
           />
+          {supplier === "amap" && (
+            <AbsoluteAddressBox
+              title={title}
+              description={description}
+              type={isDragging.value ? "locator" : "box"}
+              log={props.log}
+              onClick={() => emit("clickLocator")}
+            />
+          )}
         </HeycarMap>
       );
     };
   }
 ).props([
   "log",
-  "geoErrorTitle",
   "geoLoadingTitle",
   "unavailableTitle",
   "recomendDescription",

package/src/business-components/PickupPoints/PickupPoints.tsx

@@ -1,4 +1,6 @@
+import { reactive, toRef } from "vue-demi";
 import { MapLogProps, useMapLog } from "../../hooks/useMapLog";
+import { usePointsLabelDirection } from "../../hooks/usePlacesLabelDirection";
 import { defineSetup } from "../../types/helper";
 import type { Place } from "../../types/interface";
 import { place2point } from "../../utils/transform";
@@ -6,20 +8,31 @@ import { PlaceCircle } from "../PlaceCircle";
 
 export interface PickupPointsProps extends MapLogProps {
   places: Place[];
+  renderLabel?: (place: Place) => string | undefined;
   onClick?: (value: Place) => any;
 }
 export const PickupPoints = defineSetup(function PickupPoints(props: PickupPointsProps, { emit }) {
   useMapLog(props, "PickupPoints");
-  return () => (
-    <div>
-      {props.places.map((place) => (
-        <PlaceCircle
-          position={place2point(place)}
-          label={place.name}
-          textAlign="left"
-          onClick={() => emit("click", place)}
-        />
-      ))}
-    </div>
+  const { renderLabel } = props;
+  const directions = usePointsLabelDirection(
+    reactive({ places: toRef(props, "places"), heightLimit: 9, widthLimit: 32 })
   );
+  return () => {
+    return (
+      <div>
+        {props.places.map((place, idx) => {
+          const direction = directions.value[idx];
+          const label = renderLabel ? renderLabel(place) : place.name;
+          return (
+            <PlaceCircle
+              position={place2point(place)}
+              label={label}
+              textAlign={direction}
+              onClick={() => emit("click", place)}
+            />
+          );
+        })}
+      </div>
+    );
+  };
 });

package/src/business-components/PlaceCircle/PlaceCircle.css.ts

@@ -62,10 +62,15 @@ export const placeIcon = recipe({
 });
 
 export const label = style({
-  fontSize: "3.47vw",
+  display: "-webkit-box",
+  fontSize: "3.2vw",
   fontFamily: "PingFangSC-Semibold, PingFang SC",
   fontWeight: 600,
   color: "#243E66",
   lineHeight: "4.53vw",
-  whiteSpace: "nowrap",
+  width: "max-content",
+  maxWidth: "32vw",
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: "vertical",
+  overflow: "hidden",
 });

package/src/components/Gmap/Gmap.css.ts

@@ -1,5 +1,10 @@
 import { style } from "@vanilla-extract/css";
 
 export const gmap = style({
+  height: "inherit",
+  width: "inherit",
+});
+
+export const gmapLayout = style({
   position: "relative",
 });

package/src/components/Gmap/Gmap.ts

@@ -2,7 +2,7 @@ import { computed, h, shallowRef, watchPostEffect } from "vue-demi";
 import type { SetMap } from "../../hooks/useHeycarMap";
 import { provideGmap } from "../../hooks/useMap";
 import { useMapEventSource } from "../../hooks/useMapEventSource";
-import { defineSetup } from "../../types/helper";
+import { defineSetup, VueNode } from "../../types/helper";
 import type { MapEventHandler } from "../../types/mapHelper";
 import {
   watchNoneImmediatePostEffectForDeepOption,
@@ -14,12 +14,13 @@ export interface GmapProps extends google.maps.MapOptions {
   mapRef?: SetMap<google.maps.Map>;
   onDragStart?: MapEventHandler<google.maps.Map>;
   onDragEnd?: MapEventHandler<google.maps.Map>;
+  renderOverlay?: () => VueNode;
 }
 
 export const Gmap = defineSetup(function Gmap(props: GmapProps, { slots, emit }) {
   const setMap = props.mapRef;
   const options = computed(() => {
-    const { mapRef, onDragStart, onDragEnd, ...options } = props;
+    const { renderOverlay, mapRef, onDragStart, onDragEnd, ...options } = props;
     return options;
   });
   const defaultOptions = options.value;
@@ -38,13 +39,6 @@ export const Gmap = defineSetup(function Gmap(props: GmapProps, { slots, emit })
     mapRef.value = map!;
     setMap?.(map!);
   });
-  // watch(
-  //   () => options.value.zoom,
-  //   (zoom) => {
-  //     if (zoom) mapRef.value?.setZoom(zoom);
-  //   },
-  //   { flush: "post" }
-  // );
   watchNoneImmediatePostEffectForDeepOption(
     () => options.value,
     (options) => {
@@ -52,5 +46,9 @@ export const Gmap = defineSetup(function Gmap(props: GmapProps, { slots, emit })
     }
   );
   watchPostEffectForGMapEvent(mapRef, props, handleDrag, ["onDragStart", "onDragEnd"]);
-  return () => h("div", { ref: elementRef, class: css.gmap }, slots.default?.());
+  return () =>
+    h("div", { class: css.gmapLayout }, [
+      props.renderOverlay?.(),
+      h("div", { ref: elementRef, class: css.gmap }, slots.default?.()),
+    ]);
 });

package/src/components/MapProvider/MapProvider.tsx

@@ -29,6 +29,7 @@ export interface HeycarMapProps
     Pick<AmapProps, "center" | "zoom">,
     MapLogProps {
   mapRef?: SetMap<AMap.Map> | SetMap<google.maps.Map>;
+  renderOverlay?: GmapProps["renderOverlay"];
   onDragEnd?: (value: [number, number]) => any;
 }
 export const HeycarMap = defineLagecySetup(function HeycarMap(
@@ -47,7 +48,7 @@ export const HeycarMap = defineLagecySetup(function HeycarMap(
   };
   return () => {
     const { supplier, gmapId, language = "zh", status } = payload;
-    const { mapRef: setMap, center, zoom } = props;
+    const { mapRef: setMap, center, zoom, renderOverlay } = props;
     if (status === Status.LOADING) return slots.loading?.();
     if (status === Status.FAILURE) return slots.fallback?.();
     const children = slots.default?.();
@@ -59,6 +60,7 @@ export const HeycarMap = defineLagecySetup(function HeycarMap(
             mapId={gmapId}
             center={center ? vec2lnglat(center) : undefined}
             zoom={zoom}
+            renderOverlay={renderOverlay}
             onDragEnd={gmapDebouncedEmit}
           >
             {children}
@@ -78,4 +80,4 @@ export const HeycarMap = defineLagecySetup(function HeycarMap(
         );
     }
   };
-}).props(["center", "fallback", "loading", "mapRef", "zoom"]);
+}).props(["center", "fallback", "loading", "mapRef", "zoom", "renderOverlay"]);

package/src/hooks/useGeoLocation.ts

@@ -1,6 +1,8 @@
 import { ref, watch } from "vue-demi";
 import type { Point } from "../types/interface";
 
+const GEO_TIMEOUT = 5000;
+
 export interface UseGeoLocationProps {
   geoDefaultPosition?: Point;
   onChange?: (value: { position: Point; coordinate: GeolocationCoordinates }) => any;
@@ -52,8 +54,7 @@ export const useGeoLocation = (props?: UseGeoLocationProps) => {
           onError?.(error);
           console.log("errorRef = ", errorRef);
         },
-        // todo 要不要 timeout
-        { timeout: 3000, maximumAge: 0, enableHighAccuracy: false }
+        { timeout: GEO_TIMEOUT, maximumAge: 0, enableHighAccuracy: false }
       );
       onCleanup(() => navigator.geolocation.clearWatch(watchId));
     },

package/src/hooks/useMapDrag.ts

@@ -23,7 +23,6 @@ export const useAmapDrag = (props: UseMapDragProps<AMap.Map>) => {
     });
   };
   const emitDragEnd: SetupContextEmitHandler<Pick<AmapProps, "onDragEnd">> = (_, { target }) => {
-    console.log("on DragEnd ------");
     isDragging.value = false;
     const { lng, lat } = target.getCenter();
     centerRef.value = [lng, lat];

package/src/hooks/useMapFitView.ts

@@ -32,7 +32,6 @@ export const useAmapFitView = (props: UseMapFitViewProps<AMap.Map>) => {
     if (!map) return;
     const vw = window.innerWidth / 100;
     const [top, right, bottom, left] = props.padding ?? [0, 0, 0, 0];
-    console.log([...overlayGroup]);
     map.setFitView([...overlayGroup], false, [top * vw, bottom * vw, left * vw, right * vw]);
   };
   const registerFitVeiw: RegisterOverlay<AmapOverlay> = {

package/src/hooks/useMapLngLatToVw.ts

@@ -0,0 +1,31 @@
+import type { Point } from "../types/interface";
+import { useAmap, useGmap } from "./useMap";
+import { useMapSupplier } from "./useMapSupplier";
+
+export const useAmapLngLatToVw = () => {
+  const amap = useAmap();
+  const apiMapLngLatToVw = (point: Point) => {
+    return amap?.value?.lngLatToContainer(point).toArray() as [number, number];
+  };
+  return { apiMapLngLatToVw };
+};
+
+export const useGmapLngLatToVw = () => {
+  const gmap = useGmap();
+  const apiMapLngLatToVw = (point: Point) => {
+    const [lng, lat] = point;
+    const projection = gmap?.value?.getProjection();
+    const worldCoordinate = projection?.fromLatLngToPoint({ lng, lat });
+    const x = worldCoordinate?.x ?? 0;
+    const y = worldCoordinate?.y ?? 0;
+    const zoom = gmap?.value?.getZoom() ?? 0;
+    const scale = 2 ** zoom;
+    return [x * scale, y * scale] as [number, number];
+  };
+  return { apiMapLngLatToVw };
+};
+
+export const useMapLngLatToVw = () => {
+  const { supplier } = useMapSupplier();
+  return supplier === "gmap" ? useGmapLngLatToVw() : useAmapLngLatToVw();
+};

package/src/hooks/useMapPlace.ts

@@ -8,6 +8,7 @@ import { useUpdate } from "./useUdate";
 export interface UseMapPlaceOnChangeCityProps {
   cityName?: string;
   cityParentName?: string;
+  countryName?: string;
 }
 export interface UseMapPlaceProps {
   pointRef: Ref<Point>;
@@ -33,7 +34,7 @@ export const useAmapPlace = (props: UseMapPlaceProps) => {
       const { addressComponent } = (result as AMap.ReGeocoderResult).regeocode;
       const cityName = addressComponent.city ? addressComponent.city : addressComponent.province;
       const cityParentName = addressComponent.province;
-      onChangeCity?.({ cityName, cityParentName });
+      onChangeCity?.({ cityName, cityParentName, countryName: "" });
     });
   };
   const updatePlace = (value: Point) => {
@@ -64,7 +65,7 @@ export const useAmapPlace = (props: UseMapPlaceProps) => {
             place.lng = lng;
             place.lat = lat;
             onChange?.({ lng, lat, name });
-            onChangeCity?.({ cityName, cityParentName });
+            onChangeCity?.({ cityName, cityParentName, countryName: "" });
             return;
           }
 
@@ -82,14 +83,20 @@ export const useAmapPlace = (props: UseMapPlaceProps) => {
 };
 
 export const useGmapPlace = (props: UseMapPlaceProps) => {
-  const { pointRef, onChange, onChangeCity } = props;
+  const { onChange, onChangeCity } = props;
+  const defaultPoint: Point = [...props.pointRef.value];
+  const pointRef = ref<Point>(defaultPoint);
   const { readyPromise } = useMapSupplier();
-  const { idx: placeKey, update: updatePlace } = useUpdate();
+  const { idx: placeKey, update } = useUpdate();
   const place = reactive<Place>({
     lng: pointRef.value[0],
     lat: pointRef.value[1],
     name: "",
   });
+  const updatePlace = (value: Point) => {
+    pointRef.value = value;
+    update();
+  };
   const setPlace = (value: Place) => {
     place.lng = value.lng;
     place.lat = value.lat;
@@ -101,7 +108,8 @@ export const useGmapPlace = (props: UseMapPlaceProps) => {
     const { results } = await geocoder.geocode({ language: LANGUAGE, location: { lng, lat } });
     const cityName = geocoderResult2cityName(results[0]);
     const cityParentName = results.slice(-2)[0].address_components[0].long_name;
-    onChangeCity?.({ cityName, cityParentName });
+    const countryName = results.slice(-1)[0].address_components[0].long_name;
+    onChangeCity?.({ cityName, cityParentName, countryName });
   };
   watch(
     () => placeKey.value,
@@ -113,12 +121,12 @@ export const useGmapPlace = (props: UseMapPlaceProps) => {
       const name = results[0].formatted_address;
       const cityName = geocoderResult2cityName(results[0]);
       const cityParentName = results.slice(-2)[0].address_components[0].long_name;
-      // const countryName = results.slice(-1)[0].address_components[0].long_name;
+      const countryName = results.slice(-1)[0].address_components[0].long_name;
       place.lng = lng;
       place.lat = lat;
       place.name = name;
       onChange?.({ lng, lat, name });
-      onChangeCity?.({ cityName, cityParentName });
+      onChangeCity?.({ cityName, cityParentName, countryName });
     }
   );
   return { place, updatePlace, setPlace, updateCity };

package/src/hooks/useMapRecomendPlace.ts

@@ -1,6 +1,7 @@
-import { reactive, ref, Ref, watch } from "vue-demi";
+import { computed, reactive, ref, Ref, watch } from "vue-demi";
 import type { Place, Point } from "../types/interface";
-import { place2point } from "../utils/transform";
+
+import { isPointEqual, place2point } from "../utils/transform";
 import { useAmapPlace, useGmapPlace, UseMapPlaceProps } from "./useMapPlace";
 import { useMapSupplier } from "./useMapSupplier";
 import { useUpdate } from "./useUdate";
@@ -52,6 +53,12 @@ export const useAmapRecomendPlace = <C>(props: UseMapRecomendPlaceProps<C>) => {
     onChangeCity,
   });
   const recomendPlace = reactive<Place>({ ...place });
+  const isElectedRef = computed(() => {
+    const point = pointRef.value;
+    return placeCandidatesRef.value.some((candidate) =>
+      isPointEqual(place2point(candidate), point)
+    );
+  });
   watch(
     () => recomendPlaceKey.value,
     async () => {
@@ -77,6 +84,7 @@ export const useAmapRecomendPlace = <C>(props: UseMapRecomendPlaceProps<C>) => {
     recomendPlace,
     placeCandidates: placeCandidatesRef,
     availableRef,
+    isElectedRef,
     updateRecomandPlace,
     updatePlace,
     setPlace,
@@ -97,6 +105,12 @@ export const useGmapRecomendPlace = <C>(props: UseMapRecomendPlaceProps<C>) => {
     onChangeCity,
   });
   const recomendPlace = reactive<Place>({ ...place });
+  const isElectedRef = computed(() => {
+    const point = pointRef.value;
+    return placeCandidatesRef.value.some((candidate) =>
+      isPointEqual(place2point(candidate), point)
+    );
+  });
   watch(
     () => recomendPlaceKey.value,
     async () => {
@@ -122,6 +136,7 @@ export const useGmapRecomendPlace = <C>(props: UseMapRecomendPlaceProps<C>) => {
     recomendPlace,
     placeCandidates: placeCandidatesRef,
     availableRef,
+    isElectedRef,
     updateRecomandPlace,
     updatePlace,
     setPlace,

package/src/hooks/usePlacesLabelDirection.ts

@@ -0,0 +1,61 @@
+import { ref } from "vue-demi";
+import type { Place, Point } from "../types/interface";
+import { watchEffectForDeepOption } from "../utils/compare";
+import { place2point } from "../utils/transform";
+import { useMapLngLatToVw } from "./useMapLngLatToVw";
+
+type LabelDirection = "left" | "right";
+const reverse = (direction: LabelDirection) => (direction === "left" ? "right" : "left");
+
+export interface UsePointsLabelDirectionProps {
+  places: Place[];
+  widthLimit: number;
+  heightLimit: number;
+}
+export const usePointsLabelDirection = (props: UsePointsLabelDirectionProps) => {
+  const { widthLimit, heightLimit } = props;
+  const { apiMapLngLatToVw } = useMapLngLatToVw();
+  const diffVw = (from: Point, to: Point) => {
+    const vw = 100 / window.innerWidth;
+    const [x1, y1] = apiMapLngLatToVw(from);
+    const [x2, y2] = apiMapLngLatToVw(to);
+    return [(x2 - x1) * vw, (y2 - y1) * vw];
+  };
+  const directionsRef = ref<LabelDirection[]>(Array(props.places.length).fill("right"));
+  watchEffectForDeepOption(
+    () => props.places.map(place2point),
+    (points) => {
+      const sortedPoints = points
+        .map((point, index) => ({ point, index }))
+        .sort(({ point: [, lat1] }, { point: [, lat2] }) =>
+          lat1 < lat2 ? 1 : lat1 > lat2 ? -1 : 0
+        );
+      const len = points.length;
+      const result: LabelDirection[] = Array(len);
+      let prevDirection: LabelDirection = "right";
+      let isLimited = false;
+      for (let idx = 0; idx < len; idx++) {
+        const { index } = sortedPoints[idx];
+        if (idx === len - 1) {
+          result[index] = isLimited ? reverse(prevDirection) : "right";
+          continue;
+        }
+        if (idx === 0) {
+          const [dx, dy] = diffVw(sortedPoints[idx].point, sortedPoints[idx + 1].point);
+          isLimited = dx > -widthLimit && dx < widthLimit && dy > -heightLimit && dy < heightLimit;
+          const direction: LabelDirection = !isLimited ? "right" : dx > 0 ? "left" : "right";
+          result[index] = direction;
+          prevDirection = direction;
+          continue;
+        }
+        const [dx, dy] = diffVw(sortedPoints[idx].point, sortedPoints[idx + 1].point);
+        const direction: LabelDirection = isLimited ? reverse(prevDirection) : "right";
+        result[index] = direction;
+        prevDirection = direction;
+        isLimited = dx > -widthLimit && dx < widthLimit && dy > -heightLimit && dy < heightLimit;
+      }
+      directionsRef.value = result;
+    }
+  );
+  return directionsRef;
+};

package/src/hooks/useWaitTimer.ts

@@ -0,0 +1,25 @@
+interface TimerStop {
+  promise: Promise<void>;
+  resolve?: () => void;
+}
+
+export interface UseWaitTimerProps {
+  interval: number;
+}
+export const useWaitTimer = (props: UseWaitTimerProps) => {
+  const { interval } = props;
+  let timer: number | undefined = undefined;
+  const timerStop: TimerStop = {
+    promise: Promise.resolve(),
+    resolve: undefined,
+  };
+  const timerStart = () => {
+    if (timer) clearTimeout(timer);
+    timerStop.resolve?.();
+    timerStop.promise = new Promise((resolve) => {
+      timerStop.resolve = resolve;
+      timer = setTimeout(resolve, interval);
+    });
+  };
+  return { timerStart, timerStop };
+};