@heycar/heycars-map 0.3.2 → 0.3.4

package/dist/types/interface.d.ts

@@ -13,6 +13,7 @@ export type Place = {
 export interface AutoCompletePlace extends Place {
     placeId?: string;
     description: string;
+    distance?: number;
 }
 export type Region = {
     bound?: {

package/package.json

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

package/src/Demo/DemoBusinessRecomendPlace.tsx

@@ -18,7 +18,7 @@ const SomeAutoComplete = defineSetup(function SomeAutoComplete(props: { cityName
   return () => {
     const list = autoCompletePlaces.value.map((place) => (
       <div>
-        {place.lng} | {place.lat} | {place.name} | {place.description}
+        {place.lng} | {place.lat} | {place.name} | {place.description} | {place.distance}
       </div>
     ));
     return (

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/useMapAutoComplete.ts

@@ -1,5 +1,7 @@
 import { ref, watch } from "vue-demi";
 import type { AutoCompletePlace, Region } from "../types/interface";
+import { useGeoLocation } from "./useGeoLocation";
+import { useMapGeometry } from "./useMapGeometry";
 import { MapLogProps, useMapLogVariable } from "./useMapLog";
 import { useMapSupplier } from "./useMapSupplier";
 import { useUpdate } from "./useUdate";
@@ -13,6 +15,8 @@ export const useAmapAutoComplete = (props: UseMapAutoCompleteProps) => {
   const cityRef = ref(city);
   useMapLogVariable(props, "useAmapAutoComplete", cityRef, "cityRef");
   const { readyPromise } = useMapSupplier();
+  const { apiMapDistance } = useMapGeometry();
+  const { geoPosition } = useGeoLocation();
   const keywordRef = ref("");
   const autoCompletePlacesRef = ref<AutoCompletePlace[]>([]);
   const { update, idx: updateKey } = useUpdate();
@@ -31,15 +35,20 @@ export const useAmapAutoComplete = (props: UseMapAutoCompleteProps) => {
       await readyPromise;
       const amapPlaceSearch = new AMap.PlaceSearch({ city: cityRef.value.name });
       amapPlaceSearch.search(keywordRef.value, (status, result) => {
+        const from = geoPosition.value;
         switch (status) {
           case "complete": {
             autoCompletePlacesRef.value = (result as AMap.PlaceSearchResult).poiList.pois.map(
-              (poi) => ({
-                lat: poi.location.lat,
-                lng: poi.location.lng,
-                name: poi.name,
-                description: poi.address,
-              })
+              (poi) => {
+                const { lat, lng } = poi.location;
+                return {
+                  lat,
+                  lng,
+                  name: poi.name,
+                  description: poi.address,
+                  distance: from ? apiMapDistance(from, [lng, lat]) : undefined,
+                };
+              }
             );
             return;
           }
@@ -62,6 +71,8 @@ export const useGmapAutoComplete = (props: UseMapAutoCompleteProps) => {
   const { city } = props;
   const cityRef = ref({ ...city });
   const { readyPromise } = useMapSupplier();
+  const { apiMapDistance } = useMapGeometry();
+  const { geoPosition } = useGeoLocation();
   const keywordRef = ref("");
   const autoCompletePlacesRef = ref<AutoCompletePlace[]>([]);
   const { update, idx: updateKey } = useUpdate();
@@ -86,16 +97,20 @@ export const useGmapAutoComplete = (props: UseMapAutoCompleteProps) => {
           bounds: cityRef.value.bound,
         },
         (result, status) => {
+          const from = geoPosition.value;
           switch (status) {
             case google.maps.places.PlacesServiceStatus.OK:
-              autoCompletePlacesRef.value = result!.map(
-                ({ geometry, name, formatted_address }) => ({
-                  lng: geometry?.location?.lng() ?? 0,
-                  lat: geometry?.location?.lat() ?? 0,
+              autoCompletePlacesRef.value = result!.map(({ geometry, name, formatted_address }) => {
+                const lng = geometry?.location?.lng() ?? 0;
+                const lat = geometry?.location?.lat() ?? 0;
+                return {
+                  lng,
+                  lat,
                   name: name ?? "",
                   description: formatted_address ?? "",
-                })
-              );
+                  distance: from ? apiMapDistance(from, [lng, lat]) : undefined,
+                };
+              });
               return;
             case google.maps.places.PlacesServiceStatus.ZERO_RESULTS:
             case google.maps.places.PlacesServiceStatus.NOT_FOUND:

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/src/types/interface.ts

@@ -14,6 +14,7 @@ export type Place = {
 export interface AutoCompletePlace extends Place {
   placeId?: string;
   description: string;
+  distance?: number;
 }
 
 export type Region = {

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. 用户地址搜索，先设置台湾，搜个结果，然后切换城市到新加坡，搜索到结果依然是台湾