@heycar/heycars-map 0.3.6 → 0.3.8

package/src/components/GmapAdvancedMarkerView/GmapAdvancedMarkerView.ts

@@ -1,63 +0,0 @@
-import { onMounted, onUnmounted, shallowRef, watch, watchPostEffect } from "vue-demi";
-import { useGmap } from "../../hooks/useMap";
-import { GmapOverlay, MapRegisterOverlayProps, useMapOverlay } from "../../hooks/useOverlay";
-import { defineSetup } from "../../types/helper";
-import type { MapEventHandler } from "../../types/mapHelper";
-import {
-  watchNoneImmediatePostEffectForDeepOption,
-  watchPostEffectForGMapEvent,
-} from "../../utils/compare";
-
-export interface GmapAdvancedMarkerViewProps
-  extends google.maps.marker.AdvancedMarkerViewOptions,
-    MapRegisterOverlayProps<GmapOverlay> {
-  onClick?: MapEventHandler<google.maps.marker.AdvancedMarkerView>;
-}
-
-export const GmapAdvancedMarkerView = defineSetup(function GmapAdvancedMarkerView(
-  props: GmapAdvancedMarkerViewProps,
-  { emit }
-) {
-  const { registerOverlay } = props;
-  const markerRef = shallowRef<google.maps.marker.AdvancedMarkerView>();
-  const mapRef = useGmap();
-  const handleClick: typeof emit = (name) => emit(name as any, { target: markerRef.value! });
-  useMapOverlay({ registerOverlay, overlayRef: markerRef });
-  onMounted(() => {
-    const { registerOverlay, ...markerViewProps } = props;
-    markerRef.value = new google.maps.marker.AdvancedMarkerView({ ...markerViewProps });
-    markerRef.value.addListener;
-  });
-  onUnmounted(() => {
-    if (!markerRef.value) return;
-    markerRef.value.map = null;
-  });
-  watchPostEffect(() => {
-    const map = mapRef?.value;
-    if (!map || !markerRef.value) return;
-    markerRef.value.map = map;
-  });
-  watchNoneImmediatePostEffectForDeepOption(
-    () => {
-      const { content, registerOverlay, ...restProps } = props;
-      return restProps;
-    },
-    (props) => {
-      if (!markerRef.value) return;
-      Object.assign(markerRef.value, props);
-    }
-  );
-  // content 通过 createDom 会新建，只需要 shallowCompare
-  watch(
-    () => props.content,
-    (content) => {
-      if (!markerRef.value) return;
-      markerRef.value.content = content;
-    },
-    {
-      flush: "post",
-    }
-  );
-  watchPostEffectForGMapEvent(markerRef, props, handleClick, ["onClick"]);
-  return () => null;
-});

package/src/components/GmapAdvancedMarkerView/index.ts

@@ -1 +0,0 @@
-export * from "./GmapAdvancedMarkerView";

package/src/components/GmapInfoWindow/GmapInfoWindow.ts

@@ -1,38 +0,0 @@
-import { computed, onMounted, onUnmounted, shallowRef, watchPostEffect } from "vue-demi";
-import { useGmap } from "../../hooks/useMap";
-import { defineSetup } from "../../types/helper";
-import { watchNoneImmediatePostEffectForDeepOption } from "../../utils/compare";
-
-export interface GmapInfoWindowProps extends google.maps.InfoWindowOptions {
-  visible: boolean;
-}
-
-export const GmapInfoWindow = defineSetup(function GmapInfoWindow(props: GmapInfoWindowProps) {
-  const options = computed(() => {
-    const { visible, ...options } = props;
-    return options;
-  });
-  const defaultOptions = options.value;
-  const infoWindowRef = shallowRef<google.maps.InfoWindow>();
-  const mapRef = useGmap();
-  onMounted(() => {
-    infoWindowRef.value = new google.maps.InfoWindow({ ...defaultOptions });
-  });
-  onUnmounted(() => {
-    infoWindowRef.value?.close();
-  });
-  watchPostEffect(() => {
-    const { visible } = props;
-    const infoWindow = infoWindowRef.value;
-    const map = mapRef?.value;
-    if (!map || !infoWindow) return;
-    visible ? infoWindow.open({ map }) : infoWindow.close();
-  });
-  watchNoneImmediatePostEffectForDeepOption(
-    () => options.value,
-    (options) => {
-      infoWindowRef.value?.setOptions({ ...options });
-    }
-  );
-  return () => null;
-});

package/src/components/GmapInfoWindow/index.ts

@@ -1 +0,0 @@
-export * from "./GmapInfoWindow";

package/src/components/GmapLoader/GmapLoader.ts

@@ -1,21 +0,0 @@
-import { GmapLoaderProps, Status, useGmapLoader } from "../../hooks/useMapLoader";
-import { defineSetup, VueNode } from "../../types/helper";
-
-/**
- * Deprecated
- */
-export const GmapLoader = defineSetup(function GmapLoader(props: GmapLoaderProps, { slots }) {
-  const { statusRef } = useGmapLoader(props);
-  return () => {
-    switch (statusRef.value) {
-      case Status.SUCCESS:
-        return slots.default?.() as VueNode;
-      case Status.LOADING:
-        return slots.loading?.();
-      case Status.FAILURE:
-        return slots.fallback?.();
-      default:
-        throw new Error("MyError: unknown loader status");
-    }
-  };
-});

package/src/components/GmapLoader/index.ts

@@ -1 +0,0 @@
-export * from "./GmapLoader";

package/src/components/GmapMarker/GmapMarker.ts

@@ -1,34 +0,0 @@
-import { onMounted, onUnmounted, shallowRef, watchPostEffect } from "vue-demi";
-import { useGmap } from "../../hooks/useMap";
-import { GmapOverlay, MapRegisterOverlayProps, useMapOverlay } from "../../hooks/useOverlay";
-import { defineSetup } from "../../types/helper";
-import { watchNoneImmediatePostEffectForDeepOption } from "../../utils/compare";
-
-export type GmapMarkerProps = google.maps.MarkerOptions & MapRegisterOverlayProps<GmapOverlay>;
-
-export const GmapMarker = defineSetup(function GmapMarker(props: GmapMarkerProps) {
-  const { registerOverlay } = props;
-  const markerRef = shallowRef<google.maps.Marker>();
-  const mapRef = useGmap();
-  onMounted(() => {
-    markerRef.value = new google.maps.Marker({ ...props });
-  });
-  onUnmounted(() => {
-    markerRef.value?.setMap(null);
-  });
-  useMapOverlay({ registerOverlay, overlayRef: markerRef });
-  watchPostEffect(() => {
-    const map = mapRef?.value;
-    if (!map) return;
-    markerRef.value?.setMap(map);
-  });
-  watchNoneImmediatePostEffectForDeepOption(
-    () => {
-      return { ...props };
-    },
-    (props) => {
-      markerRef.value?.setOptions({ ...props });
-    }
-  );
-  return () => null;
-});

package/src/components/GmapMarker/index.ts

@@ -1 +0,0 @@
-export * from "./GmapMarker";

package/src/components/GmapPolygon/GmapPolygon.ts

@@ -1,29 +0,0 @@
-import { onMounted, onUnmounted, shallowRef, watchPostEffect } from "vue-demi";
-import { useGmap } from "../../hooks/useMap";
-import { defineSetup } from "../../types/helper";
-import { watchNoneImmediatePostEffectForDeepOption } from "../../utils/compare";
-
-export type GmapPolygonProps = google.maps.PolygonOptions;
-
-export const GmapPolygon = defineSetup(function GmapPolygon(props: GmapPolygonProps) {
-  const polygonRef = shallowRef<google.maps.Polygon>();
-  const mapRef = useGmap();
-  onMounted(() => {
-    polygonRef.value = new google.maps.Polygon({ ...props });
-  });
-  onUnmounted(() => {
-    polygonRef.value?.setMap(null);
-  });
-  watchPostEffect(() => {
-    const map = mapRef?.value;
-    if (!map) return;
-    polygonRef.value?.setMap(map);
-  });
-  watchNoneImmediatePostEffectForDeepOption(
-    () => ({ ...props }),
-    (props) => {
-      polygonRef.value?.setOptions({ ...props });
-    }
-  );
-  return () => null;
-});

package/src/components/GmapPolygon/index.ts

@@ -1 +0,0 @@
-export * from "./GmapPolygon";

package/src/components/GmapPolyline/GmapPolyline.ts

@@ -1,29 +0,0 @@
-import { onMounted, onUnmounted, shallowRef, watchPostEffect } from "vue-demi";
-import { useGmap } from "../../hooks/useMap";
-import { defineSetup } from "../../types/helper";
-import { watchNoneImmediatePostEffectForDeepOption } from "../../utils/compare";
-
-export type GmapPolylineProps = google.maps.PolylineOptions;
-
-export const GmapPolyline = defineSetup(function GmapPolyline(props: GmapPolylineProps) {
-  const polylineRef = shallowRef<google.maps.Polyline>();
-  const mapRef = useGmap();
-  onMounted(() => {
-    polylineRef.value = new google.maps.Polyline({ ...props });
-  });
-  onUnmounted(() => {
-    polylineRef.value?.setMap(null);
-  });
-  watchPostEffect(() => {
-    const map = mapRef?.value;
-    if (!map) return;
-    polylineRef.value?.setMap(map);
-  });
-  watchNoneImmediatePostEffectForDeepOption(
-    () => ({ ...props }),
-    (props) => {
-      polylineRef.value?.setOptions({ ...props });
-    }
-  );
-  return () => null;
-});

package/src/components/GmapPolyline/index.ts

@@ -1 +0,0 @@
-export * from "./GmapPolyline";

package/src/components/MapProvider/MapProvider.tsx

@@ -1,81 +0,0 @@
-import type { SetMap } from "../../hooks/useHeycarMap";
-import { GmapLoaderProps, Status, useMapLoader, UseMapLoaderProps } from "../../hooks/useMapLoader";
-import { MapLogProps, useMapLog } from "../../hooks/useMapLog";
-import { MapSupplierPayolad, provideMapSupplier, useMapSupplier } from "../../hooks/useMapSupplier";
-import { defineLagecySetup } from "../../types/helper";
-import { language2vectorMapForeign, vec2lnglat } from "../../utils/transform";
-import { Amap, AmapProps } from "../Amap";
-import { Gmap, GmapProps } from "../Gmap";
-
-export type MapProviderProps = UseMapLoaderProps & Pick<MapSupplierPayolad, "gmapId">;
-export const MapProvider = defineLagecySetup(function MapProvider(
-  props: MapProviderProps,
-  { slots }
-) {
-  const { statusRef, readyPromise } = useMapLoader(props);
-  const context = new Proxy<MapSupplierPayolad>(props as MapSupplierPayolad, {
-    get(target, name, receiver) {
-      if (name === "status") return statusRef.value;
-      if (name === "readyPromise") return readyPromise;
-      return Reflect.get(target, name, receiver);
-    },
-  });
-  provideMapSupplier(context);
-  return () => <div>{slots.default?.()}</div>;
-}).props(["amapKey", "amapSecret", "amapServiceHost", "gmapId", "gmapKey", "supplier", "language"]);
-
-export interface HeycarMapProps
-  extends Pick<GmapLoaderProps, "fallback" | "loading">,
-    Pick<AmapProps, "center" | "zoom">,
-    MapLogProps {
-  mapRef?: SetMap<AMap.Map> | SetMap<google.maps.Map>;
-  onDragEnd?: (value: [number, number]) => any;
-}
-export const HeycarMap = defineLagecySetup(function HeycarMap(
-  props: HeycarMapProps,
-  { slots, emit }
-) {
-  useMapLog(props, "HeycarMap");
-  const payload = useMapSupplier();
-  const gmapDebouncedEmit: GmapProps["onDragEnd"] = ({ target }) => {
-    const { lng, lat } = target.getCenter() as google.maps.LatLng;
-    emit("dragEnd", [lng(), lat()]);
-  };
-  const amapDebounceEmit: AmapProps["onDragEnd"] = ({ target }) => {
-    const { lng, lat } = target.getCenter();
-    emit("dragEnd", [lng, lat]);
-  };
-  return () => {
-    const { supplier, gmapId, language = "zh", status } = payload;
-    const { mapRef: setMap, center, zoom } = props;
-    if (status === Status.LOADING) return slots.loading?.();
-    if (status === Status.FAILURE) return slots.fallback?.();
-    const children = slots.default?.();
-    switch (supplier) {
-      case "gmap":
-        return (
-          <Gmap
-            mapRef={setMap as SetMap<google.maps.Map>}
-            mapId={gmapId}
-            center={center ? vec2lnglat(center) : undefined}
-            zoom={zoom}
-            onDragEnd={gmapDebouncedEmit}
-          >
-            {children}
-          </Gmap>
-        );
-      default:
-        return (
-          <Amap
-            mapRef={setMap as SetMap<AMap.Map>}
-            vectorMapForeign={language2vectorMapForeign(language)}
-            center={center}
-            zoom={zoom}
-            onDragEnd={amapDebounceEmit}
-          >
-            {children}
-          </Amap>
-        );
-    }
-  };
-}).props(["center", "fallback", "loading", "mapRef", "zoom"]);

package/src/components/MapProvider/index.ts

@@ -1 +0,0 @@
-export * from "./MapProvider";

package/src/hooks/useDrivingRoute.ts

@@ -1,106 +0,0 @@
-import { reactive } from "vue-demi";
-import type { Point, Route } from "../types/interface";
-import { watchPostEffectForDeepOption } from "../utils/compare";
-import { useMapSupplier } from "./useMapSupplier";
-
-export interface UseDrivingRouteProps {
-  from: Point;
-  to: Point;
-}
-
-export const useADrivingRoute = (props: UseDrivingRouteProps) => {
-  const outputRoute = reactive<Route>({ path: [], distance: 0, duration: 0 });
-  const amapDriving = new AMap.Driving({});
-  watchPostEffectForDeepOption(
-    () => ({ ...props }),
-    ({ from, to }) => {
-      amapDriving.search(
-        AMap.LngLat.from(from),
-        AMap.LngLat.from(to),
-        { waypoints: [] },
-        (status, result) => {
-          switch (status) {
-            case "complete": {
-              let path: Point[] = [];
-              const drivingResult = result as AMap.DrivingResult;
-              // todo 多条导航路线的情况
-              const firstRoute = drivingResult.routes[0];
-              for (const step of firstRoute.steps) {
-                const basicStep = step as AMap.DriveStepBasic;
-                const stepPath = basicStep.path.map<Point>(({ lng, lat }) => [lng, lat]);
-                path = path.concat(stepPath);
-              }
-              outputRoute.path = path;
-              outputRoute.distance = firstRoute.distance;
-              outputRoute.duration = firstRoute.time;
-              return;
-            }
-            case "no_data":
-              outputRoute.path = [];
-              outputRoute.distance = 0;
-              outputRoute.duration = 0;
-              return;
-            default:
-              throw result;
-          }
-        }
-      );
-    }
-  );
-  return outputRoute;
-};
-
-export const useGDrivingRoute = (props: UseDrivingRouteProps) => {
-  const outputRoute = reactive<Route>({ path: [], distance: 0, duration: 0 });
-  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.DRIVING,
-        },
-        (result, status) => {
-          switch (status) {
-            case google.maps.DirectionsStatus.OK: {
-              let path: Point[] = [];
-              let distance = 0;
-              let duration = 0;
-              const firstRoute = result!.routes[0];
-              const stepPath = firstRoute.overview_path.map<Point>((item) => [
-                item.lng(),
-                item.lat(),
-              ]);
-              path = path.concat(stepPath);
-              for (const leg of firstRoute.legs) {
-                distance += leg.distance?.value ?? 0;
-                // todo 考虑用 duration_in_traffic 但这个字段上有条件的
-                duration += leg.duration?.value ?? 0;
-              }
-              outputRoute.path = path;
-              outputRoute.distance = distance;
-              outputRoute.duration = duration;
-              return;
-            }
-            case google.maps.DirectionsStatus.ZERO_RESULTS:
-            case google.maps.DirectionsStatus.NOT_FOUND:
-              outputRoute.path = [];
-              outputRoute.distance = 0;
-              outputRoute.duration = 0;
-              return;
-            default:
-              throw new Error(status);
-          }
-        }
-      );
-    }
-  );
-  return outputRoute;
-};
-
-export const useDrivingRoute = (props: UseDrivingRouteProps): Route => {
-  const { supplier } = useMapSupplier();
-  return supplier === "gmap" ? useGDrivingRoute(props) : useADrivingRoute(props);
-};

package/src/hooks/useGeoLocation.ts

@@ -1,70 +0,0 @@
-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;
-  onLoad?: (value: { position: Point; coordinate: GeolocationCoordinates }) => any;
-  onLoadDefault?: (value: { position: Point }) => any;
-  onError?: (error: GeolocationPositionError) => any;
-}
-export const useGeoLocation = (props?: UseGeoLocationProps) => {
-  const { onChange, onLoad, onLoadDefault, onError, geoDefaultPosition } = props ?? {};
-  let isOnLoadDefaultTriggered = false;
-  const loading = ref(false);
-  const readyRef = ref(false);
-  const errorRef = ref<GeolocationPositionError>();
-  const coordinateRef = ref<GeolocationCoordinates>({
-    accuracy: 0,
-    altitude: 0,
-    altitudeAccuracy: 0,
-    heading: 0,
-    latitude: geoDefaultPosition?.[1] ?? 0,
-    longitude: geoDefaultPosition?.[0] ?? 0,
-    speed: 0,
-  });
-  const positionRef = ref<Point>([coordinateRef.value.longitude, coordinateRef.value.latitude]);
-  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;
-            readyRef.value = true;
-            onLoad?.({ position: point, coordinate });
-          }
-          onChange?.({ position: point, coordinate });
-        },
-        (error) => {
-          loading.value = false;
-          errorRef.value = error;
-          const position = props?.geoDefaultPosition;
-          if (position && !isOnLoadDefaultTriggered) {
-            isOnLoadDefaultTriggered = true;
-            onLoadDefault?.({ position });
-          }
-          onError?.(error);
-          console.log("errorRef = ", errorRef);
-        },
-        { timeout: GEO_TIMEOUT, maximumAge: 0, enableHighAccuracy: false }
-      );
-      onCleanup(() => navigator.geolocation.clearWatch(watchId));
-    },
-    { immediate: true }
-  );
-  return {
-    geoError: errorRef,
-    geoPosition: positionRef,
-    geoCoordinate: coordinateRef,
-    geoLoading: loading,
-    geoReady: readyRef,
-  };
-};

package/src/hooks/useHeycarMap.ts

@@ -1,28 +0,0 @@
-import { shallowRef } from "vue-demi";
-import { vec2lnglat } from "../utils/transform";
-import { useMapSupplier } from "./useMapSupplier";
-
-export type SetMap<M> = (map: M) => void;
-
-export const useHeycarAmap = () => {
-  const amapRef = shallowRef<AMap.Map>();
-  const setMap: SetMap<AMap.Map> = (map) => {
-    amapRef.value = map;
-  };
-  const panTo = (value: [number, number]) => amapRef?.value?.panTo(value);
-  return { mapRef: amapRef, panTo, setMap };
-};
-
-export const useHeycarGamp = () => {
-  const gmapRef = shallowRef<google.maps.Map>();
-  const setMap: SetMap<google.maps.Map> = (map) => {
-    gmapRef.value = map;
-  };
-  const panTo = (value: [number, number]) => gmapRef?.value?.panTo(vec2lnglat(value));
-  return { mapRef: gmapRef, panTo, setMap };
-};
-
-export const useHeycarMap = () => {
-  const { supplier } = useMapSupplier();
-  return supplier === "gmap" ? useHeycarGamp() : useHeycarAmap();
-};

package/src/hooks/useMap.ts

@@ -1,43 +0,0 @@
-import { inject, provide, ShallowRef, watch } from "vue-demi";
-import type { MapShallowRef } from "../types/interface";
-import { useMapSupplier } from "./useMapSupplier";
-
-export const amapContext = Symbol("amap");
-
-export const useAmap = () => {
-  return inject<ShallowRef<AMap.Map | undefined>>(amapContext);
-};
-export const provideAmap = (mapRef: ShallowRef<AMap.Map | undefined>) =>
-  provide(amapContext, mapRef);
-
-export const gmapContext = Symbol("gmap");
-
-export const useGmap = () => inject<ShallowRef<google.maps.Map | undefined>>(gmapContext);
-export const provideGmap = (mapRef: ShallowRef<google.maps.Map | undefined>) =>
-  provide(gmapContext, mapRef);
-
-export const useMap = () => {
-  const { supplier } = useMapSupplier();
-  const result = supplier === "gmap" ? useGmap() : useAmap();
-  return result as MapShallowRef;
-};
-export const provideMap = (mapRef: MapShallowRef) => {
-  const { supplier } = useMapSupplier();
-  return supplier === "gmap"
-    ? provideGmap(mapRef as MapShallowRef<google.maps.Map>)
-    : provideAmap(mapRef as MapShallowRef<AMap.Map>);
-};
-
-export interface MapMountedProps {
-  onMapMounted?: () => any;
-}
-export const onMapMounted = (callback: (...args: any) => any) => {
-  const mapRef = useMap();
-  watch(
-    () => mapRef.value,
-    (map) => {
-      if (!map) return;
-      Promise.resolve().then(callback);
-    }
-  );
-};

package/src/hooks/useMapAngle.ts

@@ -1,42 +0,0 @@
-import { computed } from "vue-demi";
-import type { Point } from "../types/interface";
-import { vec2lnglat } from "../utils/transform";
-import { useMapSupplier } from "./useMapSupplier";
-
-const amapComputeHeading = (from: Point, to: Point, map?: AMap.Map) => {
-  if (!map) return 0;
-  const { x: xFrom, y: yFrom } = map.lngLatToContainer(from);
-  const { x: xTo, y: yTo } = map.lngLatToContainer(to);
-  const theta = Math.atan2(yFrom - yTo, xTo - xFrom);
-  return ((Math.PI / 2 - theta) / Math.PI) * 180;
-};
-
-export type UseMapAngleProps<M = AMap.Map | google.maps.Map> = {
-  path: Point[];
-  map?: M;
-};
-
-export const useAmapAngle = (props: UseMapAngleProps<AMap.Map>) => {
-  return computed(() => {
-    const { map, path } = props;
-    const [from, to] = path;
-    if (!from || !to || !map) return undefined;
-    return amapComputeHeading(from, to, map);
-  });
-};
-
-export const useGmapAngle = (props: UseMapAngleProps<google.maps.Map>) => {
-  return computed(() => {
-    const { path } = props;
-    const [from, to] = path;
-    if (!from || !to) return undefined;
-    return google.maps.geometry.spherical.computeHeading(vec2lnglat(from), vec2lnglat(to));
-  });
-};
-
-export const useMapAngle = (props: UseMapAngleProps) => {
-  const { supplier } = useMapSupplier();
-  return supplier === "gmap"
-    ? useGmapAngle(props as UseMapAngleProps<google.maps.Map>)
-    : useAmapAngle(props as UseMapAngleProps<AMap.Map>);
-};