@heycar/heycars-map 0.1.8 → 0.2.0

package/dist/types/interface.d.ts

@@ -21,3 +21,7 @@ export type City = {
     };
     name: string;
 };
+export interface RegisterOverlay<T> {
+    add: (overlay: T) => void;
+    remove: (overlay: T) => void;
+}

package/package.json

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

package/src/App.tsx

@@ -4,7 +4,7 @@ import { HeycarDemo } from "./components/Demo/HeycarDemo";
 export const App = defineComponent({
   setup() {
     // return () => <Hello class={"helloclass2"} qyc={2} style={{ color: "red" }} />;
-    // return () => <GBusinessDemo />;
+    // return () => <ABusinessDemo />;
     // return () => <SearchDemo />;
     return () => <HeycarDemo />;
   },

package/src/api/place.ts

@@ -32,7 +32,6 @@ export const apiAutoCompleteSearch = async (
     return new Promise((resolve, reject) => {
       // todo 高德海外怎么传 country ?
       amapAutoComplete.search(keyword, (status, result) => {
-        console.log("status, result = ", status, result);
         switch (status) {
           case "complete":
             return resolve(result as AMap.AutocompleteResult);
@@ -74,7 +73,6 @@ export const apiPlaceSearchInBounds = async (
     const amapPlaceSearch = getAmapPlaceSearch({ pageSize });
     return new Promise((resolve, reject) => {
       amapPlaceSearch.searchInBounds(keyword, new AMap.Bounds(bounds), (status, result) => {
-        console.log("status, result = ", status, result);
         switch (status) {
           case "complete":
             return resolve(result as AMap.PlaceSearchResult);

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

@@ -3,7 +3,7 @@ import imgArrowRight from "../../assets/icons/svg/arrow-right.svg";
 import imgPlaceCircle from "../../assets/icons/svg/place-circle.svg";
 import { AmapMarker } from "../../components/AmapMarker";
 import { GmapAdvancedMarkerView } from "../../components/GmapAdvancedMarkerView/GmapAdvancedMarkerView";
-import { useMapSupplier } from "../../components/MapProvider/useMapSupplier";
+import { useMapSupplier } from "../../hooks/useMapSupplier";
 import { createElement, defineSetup } from "../../types/helper";
 import type { Point } from "../../types/interface";
 import { createDom } from "../../utils/dom";

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

@@ -2,7 +2,7 @@ import { computed } from "vue-demi";
 import imgAddressLocator from "../../assets/icons/svg/address-locator.svg";
 import { AmapMarker } from "../../components/AmapMarker";
 import { GmapAdvancedMarkerView } from "../../components/GmapAdvancedMarkerView";
-import { useMapSupplier } from "../../components/MapProvider/useMapSupplier";
+import { useMapSupplier } from "../../hooks/useMapSupplier";
 import { createElement, defineSetup } from "../../types/helper";
 import { createDom } from "../../utils/dom";
 import { vec2lnglat } from "../../utils/transform";

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

@@ -1,7 +1,7 @@
 import { computed } from "vue-demi";
 import { AmapPolyline } from "../../components/AmapPolyline";
 import { GmapPolyline } from "../../components/GmapPolyline";
-import { useMapSupplier } from "../../components/MapProvider/useMapSupplier";
+import { useMapSupplier } from "../../hooks/useMapSupplier";
 import { createElement, defineSetup } from "../../types/helper";
 import { vec2lnglat } from "../../utils/transform";
 

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

@@ -1,13 +1,12 @@
 import { reactive, VNodeData } from "vue-demi";
-import { useAmap } from "../../components/Amap/useAmap";
-import { useGmap } from "../../components/Gmap/useGmap";
-import { useMapSupplier } from "../../components/MapProvider/useMapSupplier";
 import {
   useADrivingRoute,
   UseDrivingRouteProps,
   useGDrivingRoute,
 } from "../../hooks/useDrivingRoute";
+import { useAmap, useGmap } from "../../hooks/useMap";
 import { useAmapAngle, useGmapAngle } from "../../hooks/useMapAngle";
+import { useMapSupplier } from "../../hooks/useMapSupplier";
 import { createElement, defineSetup, VNodeChild } from "../../types/helper";
 import type { Point } from "../../types/interface";
 

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

@@ -2,7 +2,7 @@ import { computed } from "vue";
 import imgPassengerCircle from "../../assets/icons/svg/passenger-circle.svg";
 import { AmapMarker } from "../../components/AmapMarker";
 import { GmapAdvancedMarkerView } from "../../components/GmapAdvancedMarkerView";
-import { useMapSupplier } from "../../components/MapProvider/useMapSupplier";
+import { useMapSupplier } from "../../hooks/useMapSupplier";
 import { createElement, defineSetup } from "../../types/helper";
 import { createDom } from "../../utils/dom";
 import { vec2lnglat } from "../../utils/transform";

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

@@ -2,7 +2,7 @@ import { computed } from "vue-demi";
 import imgPlaceCircle from "../../assets/icons/svg/place-circle.svg";
 import { AmapMarker } from "../../components/AmapMarker";
 import { GmapAdvancedMarkerView } from "../../components/GmapAdvancedMarkerView";
-import { useMapSupplier } from "../../components/MapProvider/useMapSupplier";
+import { useMapSupplier } from "../../hooks/useMapSupplier";
 import { AnchorType } from "../../types/amap/marker";
 import { createElement, defineSetup } from "../../types/helper";
 import { createDom } from "../../utils/dom";

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

@@ -3,19 +3,22 @@ import imgEndPoint from "../../assets/icons/svg/end-point.svg";
 import imgStartPoint from "../../assets/icons/svg/start-point.svg";
 import { AmapMarker } from "../../components/AmapMarker";
 import { GmapAdvancedMarkerView } from "../../components/GmapAdvancedMarkerView/GmapAdvancedMarkerView";
-import { useMapSupplier } from "../../components/MapProvider/useMapSupplier";
+import { useMapSupplier } from "../../hooks/useMapSupplier";
+import type { AmapOverlay, GmapOverlay, MapRegisterOverlayProps } from "../../hooks/useOverlay";
 import { createElement, defineSetup } from "../../types/helper";
 import { createDom } from "../../utils/dom";
 import { decodeAsterisk, vec2lnglat } from "../../utils/transform";
 import * as css from "./StartEndPoint.css";
 
-export interface StartEndPointProps {
+export interface StartEndPointProps<T> extends MapRegisterOverlayProps<T> {
   type: "start" | "end";
   position: [number, number];
   title?: string;
   description?: string;
 }
-export const AStartEndPoint = defineSetup(function AStartEndPoint(props: StartEndPointProps) {
+export const AStartEndPoint = defineSetup(function AStartEndPoint(
+  props: StartEndPointProps<AmapOverlay>
+) {
   const contentRef = computed(() => {
     const icon = props.type === "start" ? imgStartPoint : imgEndPoint;
     const descriptionRow = !props.description
@@ -47,11 +50,18 @@ export const AStartEndPoint = defineSetup(function AStartEndPoint(props: StartEn
       `;
   });
   return () => (
-    <AmapMarker position={props.position} content={contentRef.value} anchor={"bottom-center"} />
+    <AmapMarker
+      registerOverlay={props.registerOverlay}
+      position={props.position}
+      content={contentRef.value}
+      anchor={"bottom-center"}
+    />
   );
 });
 
-export const GStartEndPoint = defineSetup(function GStartEndPoint(props: StartEndPointProps) {
+export const GStartEndPoint = defineSetup(function GStartEndPoint(
+  props: StartEndPointProps<GmapOverlay>
+) {
   const contentRef = computed(() => {
     const icon = props.type === "start" ? imgStartPoint : imgEndPoint;
     const descriptionRow = !props.description
@@ -88,12 +98,18 @@ export const GStartEndPoint = defineSetup(function GStartEndPoint(props: StartEn
   });
   return () => {
     return (
-      <GmapAdvancedMarkerView position={vec2lnglat(props.position)} content={contentRef.value} />
+      <GmapAdvancedMarkerView
+        registerOverlay={props.registerOverlay}
+        position={vec2lnglat(props.position)}
+        content={contentRef.value}
+      />
     );
   };
 });
 
-export const StartEndPoint = defineSetup(function StartEndPoint(props: StartEndPointProps) {
+export const StartEndPoint = defineSetup(function StartEndPoint(
+  props: StartEndPointProps<AmapOverlay> | StartEndPointProps<GmapOverlay>
+) {
   const payload = useMapSupplier();
   return () => {
     return createElement(payload.supplier === "gmap" ? GStartEndPoint : AStartEndPoint, {

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

@@ -2,7 +2,7 @@ import { computed } from "vue-demi";
 import imgTaxicar from "../../assets/icons/svg/taxi-car.svg";
 import { AmapMarker } from "../../components/AmapMarker";
 import { GmapAdvancedMarkerView } from "../../components/GmapAdvancedMarkerView/GmapAdvancedMarkerView";
-import { useMapSupplier } from "../../components/MapProvider/useMapSupplier";
+import { useMapSupplier } from "../../hooks/useMapSupplier";
 import { createElement, defineSetup } from "../../types/helper";
 import { createDom } from "../../utils/dom";
 import { decodeAsterisk, vec2lnglat } from "../../utils/transform";

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

@@ -1,7 +1,7 @@
 import { computed } from "vue-demi";
 import { AmapPolyline } from "../../components/AmapPolyline";
 import { GmapPolyline } from "../../components/GmapPolyline";
-import { useMapSupplier } from "../../components/MapProvider/useMapSupplier";
+import { useMapSupplier } from "../../hooks/useMapSupplier";
 import { createElement, defineSetup } from "../../types/helper";
 import { vec2lnglat } from "../../utils/transform";
 

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

@@ -1,8 +1,7 @@
 import { reactive, VNodeData } from "vue-demi";
-import { useAmap } from "../../components/Amap/useAmap";
-import { useGmap } from "../../components/Gmap/useGmap";
-import { useMapSupplier } from "../../components/MapProvider/useMapSupplier";
+import { useAmap, useGmap } from "../../hooks/useMap";
 import { useAmapAngle, useGmapAngle } from "../../hooks/useMapAngle";
+import { useMapSupplier } from "../../hooks/useMapSupplier";
 import {
   useAWalkingRoute,
   useGWalkingRoute,

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

@@ -2,7 +2,7 @@ import { computed } from "vue-demi";
 import imgWaveCircle from "../../assets/icons/svg/wave-circle.svg";
 import { AmapMarker } from "../../components/AmapMarker";
 import { GmapAdvancedMarkerView } from "../../components/GmapAdvancedMarkerView";
-import { useMapSupplier } from "../../components/MapProvider/useMapSupplier";
+import { useMapSupplier } from "../../hooks/useMapSupplier";
 import { createElement, defineSetup } from "../../types/helper";
 import { createDom } from "../../utils/dom";
 import { vec2lnglat } from "../../utils/transform";

package/src/components/Amap/Amap.ts

@@ -1,5 +1,6 @@
 import { computed, h, shallowRef, watchPostEffect } from "vue-demi";
 import type { SetMap } from "../../hooks/useHeycarMap";
+import { provideAmap } from "../../hooks/useMap";
 import { defineSetup } from "../../types/helper";
 import type { MapEventHandler } from "../../types/mapHelper";
 import {
@@ -9,7 +10,6 @@ import {
 } from "../../utils/compare";
 import type { VectorMapForeign } from "../../utils/transform";
 import * as css from "./Amap.css";
-import { provideAmap } from "./useAmap";
 
 export interface AmapProps extends Omit<AMap.MapOptions, "vectorMapForeign"> {
   vectorMapForeign?: VectorMapForeign;

package/src/components/AmapInfoWindow/AmapInfoWindow.ts

@@ -1,7 +1,7 @@
 import { computed, onMounted, onUnmounted, shallowRef, watchPostEffect } from "vue-demi";
+import { useAmap } from "../../hooks/useMap";
 import { defineSetup } from "../../types/helper";
 import { watchNoneImmediatePostEffectForMapProperty } from "../../utils/compare";
-import { useAmap } from "../Amap/useAmap";
 
 export interface AmapInfoWindowProps extends AMap.InfoOptions {
   visible: boolean;

package/src/components/AmapLoader/AmapLoader.ts

@@ -1,58 +1,10 @@
-import { load as loadAmap } from "@amap/amap-jsapi-loader";
-import { computed, shallowRef } from "vue-demi";
+import { AmapLoaderProps, Status, useAmapLoader } from "../../hooks/useMapLoader";
 import { defineSetup, VueNode } from "../../types/helper";
-import { watchPostEffectForDeepOption } from "../../utils/compare";
-import { GmapLoaderProps, Status } from "../GmapLoader";
-
-type AMapLoaderOptions = Parameters<typeof loadAmap>[0];
-declare global {
-  interface Window {
-    _AMapSecurityConfig: {
-      securityJsCode?: string;
-      serviceHost?: string;
-    };
-  }
-}
-
-export interface AmapLoaderProps
-  extends Pick<GmapLoaderProps, "fallback" | "loading" | "onChange">,
-    Omit<AMapLoaderOptions, "key" | "version" | "plugins"> {
-  apiKey: string;
-  apiSecret?: string;
-  apiServiceHost?: string;
-  version?: string;
-  plugins?: `AMap.${AMap.PluginName}`[];
-}
-
-export const AmapLoader = defineSetup(function AmapLoader(props: AmapLoaderProps, { slots, emit }) {
-  const statusRef = shallowRef(Status.LOADING);
-  const optionsRef = computed(() => {
-    const { onChange, loading, fallback, apiKey, apiSecret, apiServiceHost, version, ...options } =
-      props;
-    return { ...options, key: apiKey, version: version ?? "2.0.5.16" };
-  });
-  watchPostEffectForDeepOption(
-    () => optionsRef.value,
-    (options) => {
-      const setStatusAndExecuteCallback = (status: Status) => {
-        emit("change", status);
-        statusRef.value = status;
-      };
-
-      setStatusAndExecuteCallback(Status.LOADING);
-
-      window._AMapSecurityConfig = props.apiServiceHost
-        ? {
-            serviceHost: props.apiServiceHost,
-          }
-        : { securityJsCode: props.apiSecret };
-
-      loadAmap(options).then(
-        () => setStatusAndExecuteCallback(Status.SUCCESS),
-        () => setStatusAndExecuteCallback(Status.FAILURE)
-      );
-    }
-  );
+/**
+ * Deprcated
+ */
+export const AmapLoader = defineSetup(function AmapLoader(props: AmapLoaderProps, { slots }) {
+  const { statusRef } = useAmapLoader(props);
   return () => {
     switch (statusRef.value) {
       case Status.SUCCESS:

package/src/components/AmapMarker/AmapMarker.ts

@@ -1,11 +1,13 @@
 import { onMounted, onUnmounted, shallowRef, watchPostEffect } from "vue-demi";
+import { useAmap } from "../../hooks/useMap";
+import { AmapOverlay, MapRegisterOverlayProps, useMapOverlay } from "../../hooks/useOverlay";
 import { defineSetup } from "../../types/helper";
 import { watchNoneImmediatePostEffectForMapProperty } from "../../utils/compare";
-import { useAmap } from "../Amap/useAmap";
 
-export type AmapMarkerProps = AMap.MarkerOptions;
+export type AmapMarkerProps = AMap.MarkerOptions & MapRegisterOverlayProps<AmapOverlay>;
 
 export const AmapMarker = defineSetup(function AmapMarker(props: AmapMarkerProps) {
+  const { registerOverlay } = props;
   const markerRef = shallowRef<AMap.Marker>();
   const mapRef = useAmap();
   onMounted(() => {
@@ -14,6 +16,7 @@ export const AmapMarker = defineSetup(function AmapMarker(props: AmapMarkerProps
   onUnmounted(() => {
     markerRef.value?.setMap(null);
   });
+  useMapOverlay({ registerOverlay, overlayRef: markerRef });
   watchPostEffect(() => {
     const map = mapRef?.value;
     if (!map) return;

package/src/components/AmapPolygon/AmapPolygon.ts

@@ -1,10 +1,10 @@
 import { onMounted, onUnmounted, shallowRef, watchPostEffect } from "vue-demi";
+import { useAmap } from "../../hooks/useMap";
 import { defineSetup } from "../../types/helper";
 import {
   watchNoneImmediatePostEffectForDeepOption,
   watchNoneImmediatePostEffectForMapProperty,
 } from "../../utils/compare";
-import { useAmap } from "../Amap/useAmap";
 
 export type AmapPolygonProps = AMap.PolygonOptions;
 

package/src/components/AmapPolyline/AmapPolyline.ts

@@ -1,10 +1,10 @@
 import { onMounted, onUnmounted, shallowRef, watchPostEffect } from "vue-demi";
+import { useAmap } from "../../hooks/useMap";
 import { defineSetup } from "../../types/helper";
 import {
   watchNoneImmediatePostEffectForDeepOption,
   watchNoneImmediatePostEffectForMapProperty,
 } from "../../utils/compare";
-import { useAmap } from "../Amap/useAmap";
 
 export type AmapPolylineProps = AMap.PolylineOptions;
 

package/src/components/AmapText/AmapText.ts

@@ -1,7 +1,7 @@
 import { onMounted, onUnmounted, shallowRef, watchPostEffect } from "vue-demi";
+import { useAmap } from "../../hooks/useMap";
 import { defineSetup } from "../../types/helper";
 import { watchNoneImmediatePostEffectForMapProperty } from "../../utils/compare";
-import { useAmap } from "../Amap/useAmap";
 
 export type AmapTextProps = AMap.TextOptions;
 

package/src/components/Demo/Demo.css.ts

@@ -2,5 +2,5 @@ import { style } from "@vanilla-extract/css";
 
 export const demo = style({
   width: "100vw",
-  height: "100vh",
+  height: "70vh",
 });

package/src/components/Demo/HeycarDemo.tsx

@@ -1,13 +1,12 @@
-import { AddressBox } from "../../business-components/AddressBox";
-import { PickupPoints } from "../../business-components/PickupPoints";
-import { WalkingLine } from "../../business-components/WalkingLine";
-import { WalkingRoute } from "../../business-components/WalkingRoute";
+import { computed } from "vue-demi";
+import { StartEndPoint } from "../../business-components/StartEndPoint";
 import { useBusinessMapAutoComplete } from "../../hooks-business/useBusinessMapAutoComplete";
 import {
   useBusinessMapRecomendPlace,
   UseBusinessMapRecomendPlaceProps,
 } from "../../hooks-business/useBusinessMapRecomendPlace";
 import { useHeycarMap } from "../../hooks/useHeycarMap";
+import { useMapFitView } from "../../hooks/useMapFitView";
 import { defineSetup } from "../../types/helper";
 import { HeycarMap, MapProvider } from "../MapProvider/MapProvider";
 import * as css from "./Demo.css";
@@ -24,46 +23,47 @@ export const HeycarDemo = defineSetup(function HeycarDemo() {
       amapSecret={amapApiSecret}
       gmapId={gmapId}
       gmapKey={gmapApiKey}
-      supplier={"gmap"}
+      supplier={"amap"}
     >
       <SomeHomePage />
     </MapProvider>
   );
 });
 
-export const SomePage = defineSetup(function Hello() {
-  const { mapRef, setMap } = useHeycarMap();
-  const cityName = "上海市";
-  const { autoCompletePlaces, setKeyword, setCity } = useBusinessMapAutoComplete({
-    mapRef,
-    defaultCityName: cityName,
-  });
-  (window as any).setKeyword = setKeyword;
-  (window as any).setCity = setCity;
+export const SomeOuterPage = defineSetup(function SomeOuterPage() {
   return () => {
-    const list = autoCompletePlaces.value.map((place) => (
-      <div>
-        {place.lng} | {place.lat} | {place.name} | {place.description}
-      </div>
-    ));
     return (
       <div>
-        <div>{list}</div>
+        <SomeAutoComplete cityName="上海市"></SomeAutoComplete>
         <HeycarMap
           class={css.demo}
           fallback={() => <div>error</div>}
           loading={() => <div>loading</div>}
-          center={[131, 21]}
-          zoom={3}
-          mapRef={setMap}
+          center={[121.5, 31]}
+          zoom={13}
         ></HeycarMap>
       </div>
     );
   };
 });
+const SomeAutoComplete = defineSetup(function SomeAutoComplete(props: { cityName: string }) {
+  const { autoCompletePlaces, setKeyword, setCity } = useBusinessMapAutoComplete({
+    cityNameRef: computed(() => props.cityName),
+  });
+  (window as any).setKeyword = setKeyword;
+  (window as any).setCity = setCity;
+  return () => {
+    const list = autoCompletePlaces.value.map((place) => (
+      <div>
+        {place.lng} | {place.lat} | {place.name} | {place.description}
+      </div>
+    ));
+    return <div>{list}</div>;
+  };
+});
 
-export const SomeHomePage = defineSetup(function Hello() {
-  const { mapRef, setMap, panTo } = useHeycarMap();
+export const SomeHomePage = defineSetup(function SomeHomePage() {
+  const { mapRef, setMap } = useHeycarMap();
   const getRecomendPlace: UseBusinessMapRecomendPlaceProps["getRecomendPlace"] = async (
     place,
     context
@@ -82,7 +82,6 @@ export const SomeHomePage = defineSetup(function Hello() {
     setCenterPlaceByRecomand,
   } = useBusinessMapRecomendPlace({
     mapRef,
-    defaultCenterPoint: [131, 31],
     recomendPlaceGeoLimit: 300,
     recomendPlaceDragLimit: 30,
     getRecomendPlace,
@@ -90,7 +89,13 @@ export const SomeHomePage = defineSetup(function Hello() {
     onChangePlace: (v) => console.log("onChangePlace: ", v),
     onChangeRecomandPlace: (v) => console.log("onChangeRecomandPlace: ", v),
   });
+  const { registerFitVeiw, setFitView } = useMapFitView({
+    mapRef,
+    padding: [15, 15, 5, 15],
+    autoFitTimeout: 5000,
+  });
   (window as any).setCenterPlaceByRecomand = setCenterPlaceByRecomand;
+  (window as any).setFitView = setFitView;
   return () => {
     return (
       <div>
@@ -103,17 +108,29 @@ export const SomeHomePage = defineSetup(function Hello() {
           class={css.demo}
           fallback={() => <div>error</div>}
           loading={() => <div>loading</div>}
-          center={[centerPlace.lng, centerPlace.lat]}
-          zoom={15}
+          center={centerPoint.value}
+          zoom={centerPoint.value[0] === 0 ? 3 : 13}
           mapRef={setMap}
         >
-          <PickupPoints places={placeCandidates.value} />
-          <AddressBox
+          <StartEndPoint
+            registerOverlay={registerFitVeiw}
+            position={[121.4897065, 31.0842552]}
+            title={"start point"}
+            type="start"
+          />
+          <StartEndPoint
+            registerOverlay={registerFitVeiw}
+            position={[centerPoint.value[0] + 0.01, centerPoint.value[1] + 0.01]}
+            title={"end point"}
+            type="end"
+          />
+          {/* <PickupPoints places={placeCandidates.value} /> */}
+          {/* <AddressBox
             type="box"
             position={centerPoint.value}
             title={"Martyrs Lawn"}
             description={"您将在此处上车"}
-          />
+          /> */}
           {/* <TaxiCar position={[121, 31]} angle={0} /> */}
           {/* <PickupPoints
             positions={[
@@ -130,11 +147,11 @@ export const SomeHomePage = defineSetup(function Hello() {
               <TaxiCar position={[121, 31]} angle={angle} />,
             ]}
           /> */}
-          <WalkingRoute
+          {/* <WalkingRoute
             from={centerPoint.value}
             to={[centerPoint.value[0] + 0.1, centerPoint.value[1] + 0.1]}
             render={({ path }) => <WalkingLine path={path} />}
-          />
+          /> */}
         </HeycarMap>
       </div>
     );