@heycar/heycars-map 0.1.7 → 0.1.9

package/src/hooks/useDrivingRoute.ts

@@ -55,7 +55,7 @@ export const useGDrivingRoute = (props: UseDrivingRouteProps) => {
         .route({
           origin: { lng: from[0], lat: from[1] },
           destination: { lng: to[0], lat: to[1] },
-          travelMode: google.maps.TravelMode.WALKING,
+          travelMode: google.maps.TravelMode.DRIVING,
         })
         .then((result) => {
           let path: Point[] = [];

package/src/hooks/useGeoLocation.ts

@@ -1,12 +1,13 @@
-import { ref, watchEffect } from "vue-demi";
+import { ref, watch } from "vue-demi";
 import type { MapShallowRef, Point } from "../types/interface";
 
 export interface UseGeoLocationProps {
   mapRef: MapShallowRef;
   onChange?: (value: { position: Point; coordinate: GeolocationCoordinates }) => any;
+  onLoad?: (value: { position: Point; coordinate: GeolocationCoordinates }) => any;
 }
 export const useGeoLocation = (props: UseGeoLocationProps) => {
-  const { mapRef, onChange } = props;
+  const { onChange, onLoad } = props;
   const loading = ref(false);
   const errorRef = ref<GeolocationPositionError>();
   const coordinateRef = ref<GeolocationCoordinates>({
@@ -19,26 +20,38 @@ export const useGeoLocation = (props: UseGeoLocationProps) => {
     speed: 0,
   });
   const positionRef = ref<Point>([coordinateRef.value.longitude, coordinateRef.value.latitude]);
-  watchEffect(() => {
-    mapRef.value;
-    loading.value = true;
-    navigator.geolocation.getCurrentPosition(
-      (position) => {
-        loading.value = false;
-        const coordinate = position.coords;
-        const point: Point = [position.coords.longitude, position.coords.latitude];
-        coordinateRef.value = coordinate;
-        positionRef.value = point;
-        onChange?.({ position: point, coordinate });
-      },
-      (error) => {
-        loading.value = false;
-        errorRef.value = error;
-        console.log("errorRef = ", errorRef);
-      }
-      // todo 要不要 timeout
-      // { timeout: 5000 * 1000 }
-    );
-  });
-  return { errorRef, positionRef, coordinateRef, loading };
+  watch(
+    () => true,
+    (_1, _2, onCleanup) => {
+      loading.value = true;
+      const watchId = navigator.geolocation.watchPosition(
+        (position) => {
+          const coordinate = position.coords;
+          const point: Point = [position.coords.longitude, position.coords.latitude];
+          coordinateRef.value = coordinate;
+          positionRef.value = point;
+          if (loading.value) {
+            loading.value = false;
+            onLoad?.({ position: point, coordinate });
+          }
+          onChange?.({ position: point, coordinate });
+        },
+        (error) => {
+          loading.value = false;
+          errorRef.value = error;
+          console.log("errorRef = ", errorRef);
+        },
+        // todo 要不要 timeout
+        { timeout: 5000, maximumAge: 0, enableHighAccuracy: true }
+      );
+      onCleanup(() => navigator.geolocation.clearWatch(watchId));
+    },
+    { immediate: true }
+  );
+  return {
+    geoError: errorRef,
+    geoPosition: positionRef,
+    geoCoordinate: coordinateRef,
+    geoLoading: loading,
+  };
 };

package/src/hooks/useMapAutoComplete.ts

@@ -0,0 +1,116 @@
+import { ref, watch } from "vue-demi";
+import { useMapSupplier } from "../components/MapProvider/useMapSupplier";
+import type { AutoCompletePlace, City, MapShallowRef } from "../types/interface";
+import { useMapReady } from "./useMapReady";
+import { useUpdate } from "./useUdate";
+
+export interface UseMapAutoCompleteProps<M = AMap.Map | google.maps.Map> {
+  mapRef: MapShallowRef<M>;
+  city: City;
+}
+
+export const useAmapAutoComplete = (props: UseMapAutoCompleteProps<AMap.Map>) => {
+  const { city, mapRef } = props;
+  const cityRef = ref(city);
+  const { readyRef } = useMapReady(mapRef);
+  const keywordRef = ref("");
+  const autoCompletePlacesRef = ref<AutoCompletePlace[]>([]);
+  const { update, idx: updateKey } = useUpdate();
+  const setCity = (value: City) => {
+    cityRef.value = value;
+    update();
+  };
+  const setKeyword = (value: string) => {
+    keywordRef.value = value;
+    update();
+  };
+  watch(
+    () => updateKey.value,
+    () => {
+      if (!readyRef.value) return;
+      const amapPlaceSearch = new AMap.PlaceSearch({ city: cityRef.value.name });
+      amapPlaceSearch.search(keywordRef.value, (status, result) => {
+        console.log("status, result = ", status, result);
+        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,
+              })
+            );
+            return;
+          }
+          case "no_data":
+            autoCompletePlacesRef.value = [];
+            return;
+          default:
+            throw result;
+        }
+      });
+    },
+    {
+      immediate: true,
+    }
+  );
+  return { setKeyword, setCity, autoCompletePlaces: autoCompletePlacesRef };
+};
+
+export const useGmapAutoComplete = (props: UseMapAutoCompleteProps<google.maps.Map>) => {
+  const { city, mapRef } = props;
+  const cityRef = ref(city);
+  const { readyRef } = useMapReady(mapRef);
+  const keywordRef = ref("");
+  const autoCompletePlacesRef = ref<AutoCompletePlace[]>([]);
+  const { update, idx: updateKey } = useUpdate();
+  const setCity = (value: City) => {
+    cityRef.value = value;
+    update();
+  };
+  const setKeyword = (value: string) => {
+    keywordRef.value = value;
+    update();
+  };
+  const div = document.createElement("div");
+  watch(
+    () => updateKey.value,
+    async () => {
+      if (!readyRef.value || !keywordRef.value) return;
+      const gmapPlacesService = new google.maps.places.PlacesService(div);
+      gmapPlacesService.textSearch(
+        {
+          query: keywordRef.value,
+          bounds: cityRef.value.bound,
+        },
+        (result, status) => {
+          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,
+                  name: name ?? "",
+                  description: formatted_address ?? "",
+                })
+              );
+              return;
+            case google.maps.places.PlacesServiceStatus.ZERO_RESULTS:
+            case google.maps.places.PlacesServiceStatus.NOT_FOUND:
+              autoCompletePlacesRef.value = [];
+              return;
+          }
+        }
+      );
+    }
+  );
+  return { setKeyword, setCity, autoCompletePlaces: autoCompletePlacesRef };
+};
+
+export const useMapAutoComplete = (props: UseMapAutoCompleteProps) => {
+  const { supplier } = useMapSupplier();
+  return supplier === "gmap"
+    ? useGmapAutoComplete(props as UseMapAutoCompleteProps<google.maps.Map>)
+    : useAmapAutoComplete(props as UseMapAutoCompleteProps<AMap.Map>);
+};

package/src/hooks/useMapCityBound.ts

@@ -0,0 +1,52 @@
+import { reactive, watchEffect } from "vue-demi";
+import { useMapSupplier } from "../components/MapProvider/useMapSupplier";
+import { LANGUAGE } from "../types/helper";
+import type { City, MapShallowRef } from "../types/interface";
+import { useMapReady } from "./useMapReady";
+
+export interface UseMapCityBoundProps<M = AMap.Map | google.maps.Map> {
+  mapRef: MapShallowRef<M>;
+  cityName: string;
+  onChange?: (value: City) => any;
+}
+export const useGmapBoundCity = (props: UseMapCityBoundProps): City => {
+  const { mapRef, cityName, onChange } = props;
+  const { readyRef } = useMapReady(mapRef);
+  const bound = reactive<google.maps.LatLngBoundsLiteral>({
+    east: 0,
+    north: 0,
+    south: 0,
+    west: 0,
+  });
+  watchEffect(async () => {
+    if (!readyRef.value) return;
+    const geocoder = new google.maps.Geocoder();
+    // todo 这里不是唯一的
+    const { results } = await geocoder.geocode({
+      address: cityName,
+      componentRestrictions: {
+        administrativeArea: "administrative_area_level_1",
+      },
+      language: LANGUAGE,
+    });
+    if (results.length !== 1) {
+      throw new Error("MyError: multiple city found");
+    }
+    const { geometry } = results[0];
+    const cityBound = geometry.bounds?.toJSON() ?? geometry.viewport.toJSON();
+    Object.assign(bound, { ...cityBound });
+    onChange?.({ name: cityName, bound: cityBound });
+  });
+  return { bound, name: cityName };
+};
+
+export const useAmapBoundCity = (props: UseMapCityBoundProps): City => {
+  return { name: props.cityName };
+};
+
+export const useMapBoundCity = (props: UseMapCityBoundProps) => {
+  const { supplier } = useMapSupplier();
+  return supplier === "gmap"
+    ? useGmapBoundCity(props as UseMapCityBoundProps<google.maps.Map>)
+    : useAmapBoundCity(props as UseMapCityBoundProps<AMap.Map>);
+};

package/src/hooks/useMapPlace.ts

@@ -2,7 +2,7 @@ import { reactive, Ref, watch } from "vue-demi";
 import { useMapSupplier } from "../components/MapProvider/useMapSupplier";
 import { LANGUAGE } from "../types/helper";
 import type { MapShallowRef, Place, Point } from "../types/interface";
-import { pipeAsync } from "../utils/transform";
+import { geocoderResult2cityName, pipeAsync } from "../utils/transform";
 import { useMapReady } from "./useMapReady";
 import { useUpdate } from "./useUdate";
 
@@ -15,7 +15,12 @@ export const useAmapPlace = (props: UseMapPlaceProps<AMap.Map>) => {
   const { mapRef, pointRef, onChange } = props;
   const { readyRef } = useMapReady(mapRef);
   const { idx: placeKey, update: updatePlace } = useUpdate();
-  const place = reactive<Place>({ lng: pointRef.value[0], lat: pointRef.value[1], name: "" });
+  const place = reactive<Place>({
+    lng: pointRef.value[0],
+    lat: pointRef.value[1],
+    name: "",
+    cityName: undefined,
+  });
   watch(
     () => placeKey.value,
     () => {
@@ -25,11 +30,14 @@ export const useAmapPlace = (props: UseMapPlaceProps<AMap.Map>) => {
       geocoder.getAddress(new AMap.LngLat(lng, lat), (status, result) => {
         switch (status) {
           case "complete": {
-            const name = (result as AMap.ReGeocoderResult).regeocode.formattedAddress;
+            const { formattedAddress: name, addressComponent } = (result as AMap.ReGeocoderResult)
+              .regeocode;
+            const cityName = addressComponent.city ?? addressComponent.province;
             place.name = name;
             place.lng = lng;
             place.lat = lat;
-            pipeAsync(onChange)?.({ lng, lat, name });
+            place.cityName = cityName;
+            pipeAsync(onChange)?.({ lng, lat, name, cityName });
             return;
           }
 
@@ -59,10 +67,11 @@ export const useGmapPlace = (props: UseMapPlaceProps<google.maps.Map>) => {
       const [lng, lat] = pointRef.value;
       const { results } = await geocoder.geocode({ language: LANGUAGE, location: { lng, lat } });
       const name = results[0].formatted_address;
+      const cityName = geocoderResult2cityName(results[0]);
       place.name = name;
       place.lng = lng;
       place.lat = lat;
-      pipeAsync(onChange)?.({ lng, lat, name });
+      pipeAsync(onChange)?.({ lng, lat, name, cityName });
     }
   );
   return { place, updatePlace };

package/src/hooks/useWalkingRoute.ts

@@ -0,0 +1,70 @@
+import { ShallowRef, shallowRef } from "vue-demi";
+import { useMapSupplier } from "../components/MapProvider/useMapSupplier";
+import type { Point } from "../types/interface";
+import { watchPostEffectForDeepOption } from "../utils/compare";
+
+export interface UseWalkingRouteProps {
+  from: Point;
+  to: Point;
+}
+
+export const useAWalkingRoute = (props: UseWalkingRouteProps) => {
+  const pathRef = shallowRef<Point[]>([]);
+  const amapWalking = new AMap.Walking({});
+  watchPostEffectForDeepOption(
+    () => ({ ...props }),
+    ({ from, to }) => {
+      amapWalking.search(AMap.LngLat.from(from), AMap.LngLat.from(to), (status, result) => {
+        switch (status) {
+          case "complete": {
+            let path: Point[] = [];
+            const walkingResult = result as AMap.WalkingResult;
+            for (const route of walkingResult.routes) {
+              for (const step of route.steps) {
+                const stepPath = step.path.map<Point>(({ lng, lat }) => [lng, lat]);
+                path = path.concat(stepPath);
+              }
+            }
+            pathRef.value = path;
+            return;
+          }
+          case "no_data":
+            return;
+          default:
+            throw result;
+        }
+      });
+    }
+  );
+  return pathRef;
+};
+
+export const useGWalkingRoute = (props: UseWalkingRouteProps) => {
+  const pathRef = shallowRef<Point[]>([]);
+  const gmapDirectionsService = new google.maps.DirectionsService();
+  watchPostEffectForDeepOption(
+    () => ({ ...props }),
+    ({ from, to }) => {
+      gmapDirectionsService
+        .route({
+          origin: { lng: from[0], lat: from[1] },
+          destination: { lng: to[0], lat: to[1] },
+          travelMode: google.maps.TravelMode.WALKING,
+        })
+        .then((result) => {
+          let path: Point[] = [];
+          result.routes.map((route) => {
+            const stepPath = route.overview_path.map<Point>((item) => [item.lng(), item.lat()]);
+            path = path.concat(stepPath);
+          });
+          pathRef.value = path;
+        });
+    }
+  );
+  return pathRef;
+};
+
+export const useWalkingRoute = (props: UseWalkingRouteProps): ShallowRef<Point[]> => {
+  const { supplier } = useMapSupplier();
+  return supplier === "gmap" ? useGWalkingRoute(props) : useAWalkingRoute(props);
+};

package/src/hooks-business/useBusinessMapAutoComplete.ts

@@ -0,0 +1,15 @@
+import { useMapAutoComplete } from "../hooks/useMapAutoComplete";
+import { useMapBoundCity } from "../hooks/useMapCityBound";
+import type { MapShallowRef } from "../types/interface";
+
+export interface UseBusinessMapAutoCompleteProps {
+  mapRef: MapShallowRef;
+  defaultCityName: string;
+}
+
+export const useBusinessMapAutoComplete = (props: UseBusinessMapAutoCompleteProps) => {
+  const { mapRef, defaultCityName } = props;
+  const city = useMapBoundCity({ mapRef, cityName: defaultCityName, onChange: (v) => setCity(v) });
+  const { autoCompletePlaces, setKeyword, setCity } = useMapAutoComplete({ mapRef, city });
+  return { autoCompletePlaces, setKeyword, setCity };
+};

package/src/hooks-business/useBusinessMapRecomendPlace.ts

@@ -6,43 +6,70 @@ import { useMapRecomendPlace, UseMapRecomendPlaceProps } from "../hooks/useMapRe
 import type { Place, Point } from "../types/interface";
 
 interface CenterPlaceSource {
-  source: "geo" | "drag" | "recomend";
+  source: "default" | "geo" | "drag" | "recomend" | "api";
 }
 export interface UseBusinessMapRecomendPlaceProps
   extends Pick<
     UseMapRecomendPlaceProps<AMap.Map | google.maps.Map, CenterPlaceSource>,
     "getRecomendPlace" | "mapRef"
   > {
+  defaultCenterPoint?: Point;
   recomendPlaceGeoLimit: number;
   recomendPlaceDragLimit: number;
+  onLoadGeoLocation?: UseGeoLocationProps["onLoad"];
   onChangeByDrag?: UseMapDragProps["onChange"];
   onChangeGeoLocation?: UseGeoLocationProps["onChange"];
   onChangePlace?: UseMapPlaceProps["onChange"];
   onChangeRecomandPlace?: UseMapRecomendPlaceProps["onChange"];
 }
 export const useBusinessMapRecomendPlace = (props: UseBusinessMapRecomendPlaceProps) => {
-  const centerPlace = reactive<Place>({ lng: 0, lat: 0, name: "" });
-  const centerPoint = computed<Point>(() => [centerPlace.lng, centerPlace.lat]);
-  const centerSource: CenterPlaceSource = { source: "geo" };
   const {
     mapRef,
     getRecomendPlace,
+    defaultCenterPoint,
     recomendPlaceDragLimit,
     recomendPlaceGeoLimit,
+    onLoadGeoLocation,
     onChangeByDrag,
     onChangeGeoLocation,
     onChangePlace,
     onChangeRecomandPlace,
   } = props;
-  const { loading, errorRef } = useGeoLocation({
-    mapRef,
-    onChange: (value) => {
-      centerSource.source = "geo";
-      centerPlace.lng = value.position[0];
-      centerPlace.lat = value.position[1];
+  const centerPlace = reactive<Place>({
+    lng: defaultCenterPoint?.[0] ?? 0,
+    lat: defaultCenterPoint?.[1] ?? 0,
+    name: "",
+    cityName: undefined,
+  });
+  const centerPoint = computed<Point>(() => [centerPlace.lng, centerPlace.lat]);
+  const centerSource: CenterPlaceSource = { source: "geo" };
+  const setCenterPlaceByRecomand = (point: Point) => {
+    centerSource.source = "api";
+    centerPlace.lng = point[0];
+    centerPlace.lat = point[1];
+    updatePlace();
+  };
+  if (defaultCenterPoint) {
+    // default 主入口
+    Promise.resolve().then(() => {
+      centerSource.source = "default";
       updatePlace();
-      onChangeGeoLocation?.(value);
+    });
+  }
+  const { geoLoading, geoError, geoPosition, geoCoordinate } = useGeoLocation({
+    mapRef,
+    onLoad: (value) => {
+      // geo 主入口
+      // 如果设置了默认位置，就不在拿 gps 作为默认位置
+      if (!defaultCenterPoint) {
+        centerSource.source = "geo";
+        centerPlace.lng = value.position[0];
+        centerPlace.lat = value.position[1];
+        updatePlace();
+      }
+      onLoadGeoLocation?.(value);
     },
+    onChange: onChangeGeoLocation,
   });
   const { isDragging } = useMapDrag({
     mapRef,
@@ -62,8 +89,10 @@ export const useBusinessMapRecomendPlace = (props: UseBusinessMapRecomendPlacePr
       const source = context?.source;
       switch (source) {
         case "drag":
+        case "api":
           return recomendPlaceDragLimit;
         case "geo":
+        case "default":
           return recomendPlaceGeoLimit;
         default:
           throw new Error(`MyError: should not call getLimit on source: ${source}`);
@@ -86,10 +115,13 @@ export const useBusinessMapRecomendPlace = (props: UseBusinessMapRecomendPlacePr
   });
   return {
     isDragging,
-    isGeoLoading: loading,
-    geoError: errorRef,
+    geoLoading,
+    geoError,
+    geoPosition,
+    geoCoordinate,
     centerPlace,
     centerPoint,
     placeCandidates,
+    setCenterPlaceByRecomand,
   };
 };

package/src/index.ts

@@ -8,9 +8,11 @@ export { PlaceCircle } from "./business-components/PlaceCircle";
 export { StartEndPoint } from "./business-components/StartEndPoint";
 export { TaxiCar } from "./business-components/TaxiCar";
 export { WalkingLine } from "./business-components/WalkingLine";
+export { WalkingRoute } from "./business-components/WalkingRoute";
 export { WaveCircle } from "./business-components/WaveCircle";
 export * from "./components/MapProvider";
-export { useBusinessMapRecomendPlace } from "./hooks-business/useBusinessMapRecomendPlace";
+export * from "./hooks-business/useBusinessMapAutoComplete";
+export * from "./hooks-business/useBusinessMapRecomendPlace";
 export { useDrivingRoute } from "./hooks/useDrivingRoute";
 export { useGeoLocation } from "./hooks/useGeoLocation";
 export { useHeycarMap } from "./hooks/useHeycarMap";

package/src/types/amap/place.d.ts

@@ -21,7 +21,7 @@ declare global {
       // 兴趣点类型
       type: string;
       // 兴趣点经纬度
-      location: string;
+      location: AMap.LngLat;
       // 地址
       address: string;
       // 离中心点距离，仅周边查询返回

package/src/types/amap/walking.d.ts

@@ -18,7 +18,7 @@ declare global {
       autoFitView?: boolean;
     }
 
-    export interface WalkingRoute {
+    export interface WalkRoute {
       // 起点到终点总步行距离，单位：米
       distance: number;
       // 步行时间预计，单位：秒
@@ -57,6 +57,8 @@ declare global {
       end: POI;
       // 步行导航路段数目
       count: number;
+      // 步行规划路线列表
+      routes: WalkRoute[];
     }
 
     export type WalkingCallback = (

package/src/types/interface.ts

@@ -6,4 +6,20 @@ export type Place = {
   lng: number;
   lat: number;
   name: string;
+  cityName?: string;
+};
+
+export interface AutoCompletePlace extends Place {
+  placeId?: string;
+  description: string;
+}
+
+export type City = {
+  bound?: {
+    east: number;
+    north: number;
+    south: number;
+    west: number;
+  };
+  name: string;
 };

package/src/utils/transform.ts

@@ -45,3 +45,16 @@ export const pipeAsync =
   (...args: P) => {
     setTimeout(() => fn?.(...args));
   };
+
+export const geocoderResult2cityName = (value: google.maps.GeocoderResult): string | undefined => {
+  const { address_components } = value;
+  const address = address_components.find(
+    (item) =>
+      item.types[0] === "administrative_area_level_1" ||
+      item.types[0] === "administrative_area_level_2"
+  );
+  if (address) return address.long_name;
+  const countryIdx = address_components.findIndex((item) => item.types[0] === "country");
+  if (countryIdx > 0) return address_components[countryIdx - 1].long_name;
+  return undefined;
+};

package/todo.md

@@ -8,3 +8,6 @@ https://dawchihliou.github.io/articles/building-custom-google-maps-marker-react-
 5. 高德地图加载期间出现大量的请求
 6. google/高德 坐标系转化
 7. 车辆行驶 fitview
+
+8. 缺用户定位
+9. 当用户外部进入，url 传入的地址，需要地图支持