@heycar/heycars-map 0.3.4 → 0.3.6

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,._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{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.4",
+  "version": "0.3.6",
   "type": "module",
   "scripts": {
     "dev": "vite -c vite.config.dev.ts",

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 {
@@ -66,7 +71,7 @@ export const DemoBusinessRecomendPlace = defineSetup(function DemoBusinessRecome
           class={css.demo}
           geoLoadingTitle={"正在读取GPS位置信息..."}
           unavailableTitle={"当前区域暂未开通服务"}
-          noRecomendDescription={"附近无推荐上车地点"}
+          noRecomendDescription={""}
           recomendDescription={"最佳上车地点"}
           geoDefaultPosition={[139.728287, 35.661007]}
           getRecomendPlace={getRecomendPlace}

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

@@ -1,9 +1,20 @@
+import { computed } from "vue-demi";
 import imgAddressLocator from "../../assets/icons/svg/address-locator.svg";
 import imgArrowRight from "../../assets/icons/svg/arrow-right.svg";
 import type { MapLogProps } from "../../hooks/useMapLog";
 import { defineSetup } from "../../types/helper";
 import * as css from "./AbsoluteAddressBox.css";
 
+interface MultilineTitleProps {
+  value?: string;
+}
+const MultilineTitle = defineSetup(function MultilineTitle(props: MultilineTitleProps) {
+  const linesRef = computed(() => {
+    return props.value?.split("\n").flatMap((line, idx) => (idx === 0 ? line : [<br />, line]));
+  });
+  return () => <div>{linesRef.value}</div>;
+});
+
 export interface AbsoluteAddressBoxProps extends MapLogProps {
   type: "box" | "locator";
   title: string;
@@ -27,8 +38,8 @@ export const AbsoluteAddressBox = defineSetup(function AbsoluteAddressBox(
       <div class={css.absoluteAddressBoxLayout}>
         <div class={css.absoluteAddressBox} onClick={handleClick}>
           <div class={css.boxTextLayout}>
-            <div class={css.boxTitle}>{title}</div>
-            {description && <div class={css.boxDescription}>{description}</div>}
+            <MultilineTitle class={css.boxTitle} value={title} />
+            {!!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";
@@ -45,6 +48,7 @@ export const BusinessRecomendPlaceMap = defineLagecySetup(
     const { geoDefaultPosition, getRecomendPlace, mapContext } = props;
     const { mapRef, setMap } = useHeycarMap();
     const { readyPromise } = useMapSupplier();
+    const { timerStart, timerStop } = useWaitTimer({ interval: MAP_DRAG_END_WAIT_ANIMATION });
     const centerPlace = reactive<Place>({
       lng: geoDefaultPosition?.[0] ?? 0,
       lat: geoDefaultPosition?.[1] ?? 0,
@@ -98,6 +102,7 @@ export const BusinessRecomendPlaceMap = defineLagecySetup(
       mapRef,
       onChange: (point) => {
         centerSource.source = "drag";
+        timerStart();
         updatePlace(point);
         emit("changeByDrag", point);
       },
@@ -109,6 +114,7 @@ export const BusinessRecomendPlaceMap = defineLagecySetup(
       updateRecomandPlace,
       placeCandidates,
       availableRef,
+      isElectedRef,
     } = useMapRecomendPlace({
       pointRef: centerPoint,
       context: centerSource,
@@ -132,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);
@@ -153,15 +160,21 @@ export const BusinessRecomendPlaceMap = defineLagecySetup(
         : availableRef.value
         ? centerPlace.name
         : props.unavailableTitle;
-      const description = !availableRef.value
-        ? undefined
-        : placeCandidates.value.length > 0
-        ? props.recomendDescription
-        : props.noRecomendDescription;
+      const description =
+        !availableRef.value || geoLoading.value
+          ? undefined
+          : 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} />
+          {!geoError.value && <PassengerCircle position={geoPosition.value} />}
+          <PickupPoints
+            places={placeCandidates.value}
+            renderLabel={(place) => (isPlaceEqual(place, centerPlace) ? undefined : place.name)}
+            onClick={setCenterByPlace}
+            log={props.log}
+          />
           <AbsoluteAddressBox
             title={title}
             description={description}

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/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/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 };
+};

package/src/hooks/useWalkingRoute.ts

@@ -23,7 +23,6 @@ export const useAWalkingRoute = (props: UseWalkingRouteProps) => {
               return;
             }
             const firstRoute = walkingResult.routes[0];
-            console.log("firstRoute = ", firstRoute);
             for (const step of firstRoute.steps) {
               const stepPath = step.path.map<Point>(({ lng, lat }) => [lng, lat]);
               path = path.concat(stepPath);

package/src/utils/transform.ts

@@ -58,3 +58,11 @@ export const geocoderResult2cityName = (value: google.maps.GeocoderResult): stri
   if (countryIdx > 0) return address_components[countryIdx - 1].long_name;
   return undefined;
 };
+
+export const isPlaceEqual = (p1: Place, p2?: Place) => {
+  return p1.lng === p2?.lng && p1.lat === p2?.lat;
+};
+
+export const isPointEqual = (p1: Point, p2?: Point) => {
+  return p1[0] === p2?.[0] && p1[1] === p2?.[1];
+};

package/todo.md

@@ -1,9 +1,8 @@
 https://dawchihliou.github.io/articles/building-custom-google-maps-marker-react-component-like-airbnb-in-nextjs
 
 2. Google 地址名称太长
-3. 中心点 drag 期间位置
-4. 高德地图加载期间出现大量的请求
-5. google/高德 坐标系转化
+3. 高德地图加载期间出现大量的请求
+4. google/高德 坐标系转化
 
 ---
 
@@ -17,5 +16,5 @@ https://dawchihliou.github.io/articles/building-custom-google-maps-marker-react-
 
 ---
 
-1. 定位失败的视觉稿文字提示
-2. 用户地址搜索，先设置台湾，搜个结果，然后切换城市到新加坡，搜索到结果依然是台湾
+2. google cityparent 要用 city 上级，目前是 country 下级
+3. 推荐点搜索是距离参数可能要优化，比如没搜到推荐点，应该扩大搜索距离