@heycar/heycars-map 0.3.2 → 0.3.3

package/package.json

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

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

@@ -25,14 +25,12 @@ export const AbsoluteAddressBox = defineSetup(function AbsoluteAddressBox(
       );
     return (
       <div class={css.absoluteAddressBoxLayout}>
-        <div class={css.absoluteAddressBox}>
+        <div class={css.absoluteAddressBox} onClick={handleClick}>
           <div class={css.boxTextLayout}>
-            <div class={css.boxTitle} onClick={handleClick}>
-              {title}
-            </div>
+            <div class={css.boxTitle}>{title}</div>
             {description && <div class={css.boxDescription}>{description}</div>}
           </div>
-          <img class={css.arrowRight} src={imgArrowRight} onClick={handleClick} />
+          <img class={css.arrowRight} src={imgArrowRight} />
         </div>
         <i class={css.straightLine} />
       </div>

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

@@ -59,6 +59,7 @@ export const BusinessRecomendPlaceMap = defineLagecySetup(
     const setCenterPlaceByUserSpecified = (place: Place) => {
       centerSource.source = "api";
       setPlace(place);
+      updateCity(place);
       updateRecomandPlace();
     };
     const setCenterByPlace = (place: Place) => {
@@ -101,39 +102,45 @@ export const BusinessRecomendPlaceMap = defineLagecySetup(
         emit("changeByDrag", point);
       },
     });
-    const { updatePlace, setPlace, updateRecomandPlace, placeCandidates, availableRef } =
-      useMapRecomendPlace({
-        pointRef: centerPoint,
-        context: centerSource,
-        getRecomendPlace,
-        getLimit: (context) => {
-          const source = context?.source;
-          switch (source) {
-            case "drag":
-            case "api":
-              return RECOMMEND_PLACE_LIMIT;
-            case "geo":
-            case "default":
-              return Infinity;
-            default:
-              throw new Error(`MyError: should not call getLimit on source: ${source}`);
-          }
-        },
-        onChangePlace: (place) => {
-          if (centerSource.source !== "recomend") {
-            updateRecomandPlace();
-          }
-          emit("changePlace", place);
-        },
-        onChange: (place) => {
-          centerSource.source = "recomend";
-          Object.assign(centerPlace, { ...place });
-          emit("changeRecomandPlace", place);
-        },
-        onChangeCity: (value) => {
-          emit("changeCity", value);
-        },
-      });
+    const {
+      updatePlace,
+      setPlace,
+      updateCity,
+      updateRecomandPlace,
+      placeCandidates,
+      availableRef,
+    } = useMapRecomendPlace({
+      pointRef: centerPoint,
+      context: centerSource,
+      getRecomendPlace,
+      getLimit: (context) => {
+        const source = context?.source;
+        switch (source) {
+          case "drag":
+          case "api":
+            return RECOMMEND_PLACE_LIMIT;
+          case "geo":
+          case "default":
+            return Infinity;
+          default:
+            throw new Error(`MyError: should not call getLimit on source: ${source}`);
+        }
+      },
+      onChangePlace: (place) => {
+        if (centerSource.source !== "recomend") {
+          updateRecomandPlace();
+        }
+        emit("changePlace", place);
+      },
+      onChange: (place) => {
+        centerSource.source = "recomend";
+        Object.assign(centerPlace, { ...place });
+        emit("changeRecomandPlace", place);
+      },
+      onChangeCity: (value) => {
+        emit("changeCity", value);
+      },
+    });
     watchEffect(() => {
       mapContext.onChangeCenterPlace({ ...centerPlace });
     });

package/src/hooks/useMapPlace.ts

@@ -25,6 +25,17 @@ export const useAmapPlace = (props: UseMapPlaceProps) => {
     name: "",
   });
   const { idx: placeKey, update } = useUpdate();
+  const updateCity = (value: Place) => {
+    const geocoder = new AMap.Geocoder({ lang: LANGUAGE });
+    const { lng, lat } = value;
+    geocoder.getAddress(new AMap.LngLat(lng, lat), (status, result) => {
+      if (status !== "complete") return;
+      const { addressComponent } = (result as AMap.ReGeocoderResult).regeocode;
+      const cityName = addressComponent.city ? addressComponent.city : addressComponent.province;
+      const cityParentName = addressComponent.province;
+      onChangeCity?.({ cityName, cityParentName });
+    });
+  };
   const updatePlace = (value: Point) => {
     pointRef.value = value;
     update();
@@ -67,7 +78,7 @@ export const useAmapPlace = (props: UseMapPlaceProps) => {
       });
     }
   );
-  return { place, updatePlace, setPlace };
+  return { place, updatePlace, setPlace, updateCity };
 };
 
 export const useGmapPlace = (props: UseMapPlaceProps) => {
@@ -84,6 +95,14 @@ export const useGmapPlace = (props: UseMapPlaceProps) => {
     place.lat = value.lat;
     place.name = value.name;
   };
+  const updateCity = async (value: Place) => {
+    const geocoder = new google.maps.Geocoder();
+    const { lng, lat } = value;
+    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 });
+  };
   watch(
     () => placeKey.value,
     async () => {
@@ -102,7 +121,7 @@ export const useGmapPlace = (props: UseMapPlaceProps) => {
       onChangeCity?.({ cityName, cityParentName });
     }
   );
-  return { place, updatePlace, setPlace };
+  return { place, updatePlace, setPlace, updateCity };
 };
 
 export const useMapPlace = (props: UseMapPlaceProps) => {

package/src/hooks/useMapRecomendPlace.ts

@@ -46,7 +46,7 @@ export const useAmapRecomendPlace = <C>(props: UseMapRecomendPlaceProps<C>) => {
   const placeCandidatesRef = ref<Place[]>([]);
   const { idx: recomendPlaceKey, update: updateRecomandPlace } = useUpdate();
   const { readyPromise } = useMapSupplier();
-  const { place, updatePlace, setPlace } = useAmapPlace({
+  const { place, updatePlace, setPlace, updateCity } = useAmapPlace({
     pointRef,
     onChange: onChangePlace,
     onChangeCity,
@@ -80,6 +80,7 @@ export const useAmapRecomendPlace = <C>(props: UseMapRecomendPlaceProps<C>) => {
     updateRecomandPlace,
     updatePlace,
     setPlace,
+    updateCity,
   };
 };
 
@@ -90,7 +91,7 @@ export const useGmapRecomendPlace = <C>(props: UseMapRecomendPlaceProps<C>) => {
   const placeCandidatesRef = ref<Place[]>([]);
   const { idx: recomendPlaceKey, update: updateRecomandPlace } = useUpdate();
   const { readyPromise } = useMapSupplier();
-  const { place, updatePlace, setPlace } = useGmapPlace({
+  const { place, updatePlace, setPlace, updateCity } = useGmapPlace({
     pointRef,
     onChange: onChangePlace,
     onChangeCity,
@@ -124,6 +125,7 @@ export const useGmapRecomendPlace = <C>(props: UseMapRecomendPlaceProps<C>) => {
     updateRecomandPlace,
     updatePlace,
     setPlace,
+    updateCity,
   };
 };
 

package/todo.md

@@ -13,13 +13,9 @@ https://dawchihliou.github.io/articles/building-custom-google-maps-marker-react-
 
 ---
 
-1. locator 的气泡也要支持点击
-2. locator 气泡长度限制
 3. locator 拖动次数多了会不更新
-4. 郝瑞 searh Place 接口搜索次数多了会不更新
 
 ---
 
 1. 定位失败的视觉稿文字提示
-2. 用户手动输入地址，然后跳回 home 页面， centerplace 的 name 不正确
-3. 用户地址搜索，先设置台湾，搜个结果，然后切换城市到新加坡，搜索到结果依然是台湾
+2. 用户地址搜索，先设置台湾，搜个结果，然后切换城市到新加坡，搜索到结果依然是台湾