@heycar/heycars-map 0.7.4-zone1 → 0.7.6

package/README.md

@@ -16,38 +16,8 @@ npm install @heycar/heycars-map --save
 
 ```
 
-### 加载地图样式
-
-```typescript
-import "@heycar/heycars-map/dist/style.css";
-```
-
 ### 使用
 
-常用数据结构
-
-```typescript
-export type Point = [number, number];
-
-export type Place = {
-  lng: number;
-  lat: number;
-  name: string;
-  displayName: string;
-};
-
-export interface Zone {
-  name: string;
-  path: Point[];
-}
-
-export interface RecommendZonePlaces {
-  available?: boolean;
-  zone?: Zone;
-  places?: Place[];
-}
-```
-
 #### 在 入口文件添加 `MapProvider`
 
 - 对于 jsx/tsx 文件的例子
@@ -83,261 +53,42 @@ export interface RecommendZonePlaces {
 </MapProvider>
 ```
 
-#### 在地图里可以使用的组件
-
-为了方便集成，已经将常用业务逻辑集成在四个业务组件里面，下面是推荐使用的业务组件
-
-- `BusinessRecomendPlaceMap`
-- `BusinessQuotingMap`
-- `BusinessTaxiServiceMap`
-- `BusinessTaxiEndMap`
-
-下面三个是推荐搭配使用的业务 hooks
-
-- `useBusinessRecomendPlaceMap`
-- `useBusinessQuotingMap`
-- `useBusinessTaxiServiceMap`
-
-#### 选择上车点和推荐点的地图组件 `BusinessRecomendPlaceMap`
-
-对于 jsx/tsx 文件的例子
-
-```jsx
-import { defineComponent } from "vue";
-import { BusinessRecomendPlaceMap, useBusinessRecomendPlaceMap } from "@heycar/heycars-map";
-
-export default defineComponent({
-  setup() {
-    const {
-      centerPlace,
-      mapContext,
-      setCenterPlaceByUserSpecified,
-      setCenterPlaceByUserSpecifiedInZone,
-    } = useBusinessRecomendPlaceMap();
-    // 演示 setCenterPlaceByUserSpecifiedInZone 的用法
-    const demoForUsage = () => {
-      setCenterPlaceByUserSpecifiedInZone({
-        // 期望的地图中心点
-        place: {
-          lng: 139.56,
-          lat: 35.56,
-          name: "user specified place in zone",
-          displayName: "user specified place in zone",
-        },
-        // 推荐点和绿区信息
-        recommends: {
-          // 绿区
-          zone: {
-            name: "zone 1",
-            path: [
-              [139.569, 35.555],
-              [139.558, 35.55],
-              [139.56, 35.565],
-            ],
-          },
-          // 绿区内的推荐点列表
-          places: [
-            {
-              lng: 139.56,
-              lat: 35.56,
-              name: "user specified place in zone",
-              displayName: "user specified place in zone",
-            },
-            {
-              lng: 139.562,
-              lat: 35.562,
-              name: "recommend place 2",
-              displayName: "recommend place 2",
-            },
-          ],
-        },
-      });
-    };
-    return () => (
-      <BusinessRecomendPlaceMap
-        class={"demo"}
-        geoLoadingTitle={"正在获取您当前的位置"}
-        unavailableTitle={"当前区域暂未开通服务"}
-        recomendDescription={"您将在此处上车"}
-        geoDefaultPosition={[139.777777, 35.777777]}
-        mapContext={mapContext}
-        getRecomendPlace={async ({ lng, lat }) => {
-          // 向后端获取推荐点信息
-          return {
-            // 服务是否可用
-            available: true,
-            // 绿区
-            zone: {
-              name: "绿区名称",
-              path: [
-                [lng - 0.001, lat + 0.001],
-                [lng, lat - 0.001],
-                [lng + 0.001, lat + 0.0005],
-              ],
-            },
-            // 推荐点列表
-            places: [
-              { lat: lat - 0.00001, lng: lng + 0.0001, name: "place 1", displayName: "place 1" },
-              { lat: lat - 0.0002, lng: lng + 0.0002, name: "place 2", displayName: "place 2" },
-              { lat: lat - 0.0002, lng: lng - 0.0001, name: "place 3", displayName: "place 3" },
-            ],
-          };
-        }}
-        getDefaultCenterPlace={async () => {
-          // 获取最后一次上车点
-          return {
-            lng: 139,
-            lat: 35,
-            name: "user last pickup place",
-            displayName: "user last pickup place",
-          };
-        }}
-        onChangeRecomandPlace={({ place, inputPlace, isInZone }) => {
-          console.log("用户操作地图，计算推荐点后得出的最终位置时触发，此时可以向后端查询城市信息");
-          console.log(
-            "计算推荐点之前的地址是: ",
-            inputPlace,
-            " 最终的地址是: ",
-            place,
-            " 是否在绿区内: ",
-            isInZone
-          );
-        }}
-        onClickLocator={() =>
-          console.log("用户点击了蓝色光标触发，此时可以执行用户点击起点输入框相同的逻辑")
-        }
-        onGeoError={() => {
-          console.log("获取GPS失败时触发，此时可以弹框告诉用户");
-        }}
-      />
-    );
-  },
-});
-```
-
-#### 询价业务的地图组件 `BusinessQuotingMap`
-
-对于 jsx/tsx 文件的例子
-
-```jsx
-import { defineComponent } from "vue";
-import { BusinessQuotingMap, useBusinessQuotingMap } from "@heycar/heycars-map";
-
-export default defineComponent({
-  setup() {
-    const { setMap, registerFitVeiw } = useBusinessQuotingMap();
-    return () => (
-      <BusinessQuotingMap
-        class={"demo"}
-        from={{
-          displayName: "ARTS LINK零创国际艺术教育长宁区创业园区",
-          name: "上海市长宁区华阳路街道ARTS LINK零创国际艺术教育长宁区创业园区",
-          lat: 1.311295,
-          lng: 103.841974,
-        }}
-        to={{
-          displayName: "ARTS LINK零创国际艺术教育长宁区创业园区",
-          name: "上海市长宁区华阳路街道ARTS LINK零创国际艺术教育长宁区创业园区",
-          lat: 1.2966426,
-          lng: 103.7763939,
-        }}
-        fromDescription={"您将在此上车"}
-        renderDescription={({ distance, duration }) =>
-          `全程 *${distance / 1000}公里*  约行驶 *${duration}*`
-        }
-        mapRef={setMap}
-        registerOverlay={registerFitVeiw}
-      />
-    );
-  },
-});
-```
-
-#### 打车状态流转业务的地图组件 `BusinessTaxiServiceMap`
+#### 在需要用到地图的地方添加 `HeycarMap`
 
-对于 jsx/tsx 文件的例子
+- 对于 jsx/tsx 文件的例子
 
 ```jsx
-import { defineComponent } from "vue";
-import { BusinessTaxiServiceMap, useBusinessTaxiServiceMap } from "@heycar/heycars-map";
-
-export default defineComponent({
-  setup() {
-    const { setMap, registerFitVeiw } = useBusinessTaxiServiceMap();
-    return () => (
-      <BusinessTaxiServiceMap
-        class={css.adjustedDemo}
-        from={{
-          displayName: "ARTS LINK零创国际艺术教育长宁区创业园区",
-          name: "上海市长宁区华阳路街道ARTS LINK零创国际艺术教育长宁区创业园区",
-          lat: 1.311295,
-          lng: 103.841974,
-        }}
-        to={{
-          displayName: "ARTS LINK零创国际艺术教育长宁区创业园区",
-          name: "上海市长宁区华阳路街道ARTS LINK零创国际艺术教育长宁区创业园区",
-          lat: 1.2966426,
-          lng: 103.7763939,
-        }}
-        driverStatus={"driverArrived"}
-        bookDispatchingTitle="2月14日 11:00 用车"
-        dispatchingTitle="正在为您搜索附近司机"
-        driverArrivedTitle="司机已等待 00:35"
-        renderStartSerivceTitle={({ distance, duration }) =>
-          `距你*${distance}*公里, *${duration}*分钟`
-        }
-        renderInServiceTitle={({ distance, duration }) =>
-          `距离终点*${distance}*公里, 预计*${duration}*分钟`
-        }
-        getDriverPosition={async () => {
-          //  向后端请求司机位置和车头方向
-          return { position: [121.4036983, 31.216324], angle: 30 };
-        }}
-        interval={5000}
-        mapRef={setMap}
-        registerOverlay={registerFitVeiw}
-      />
-    );
-  },
-});
+<HeycarMap
+  class="any class name"
+  // 地图加载失败要显示的内容
+  fallback={() => <div>error</div>}
+  // 地图还没有加载完成时要显示的内容
+  loading={() => <div>loading</div>}
+  // 地图中心点
+  center={[0, 0]}
+  // 地图放缩
+  zoom={3}
+>
+  ...
+</HeycarMap>
 ```
 
-#### 服务结束的地图组件
-
-对于 jsx/tsx 文件的例子
-
-```jsx
-import { defineComponent } from "vue";
-import { BusinessTaxiEndMap } from "@heycar/heycars-map";
+- 对于 vue 文件的例子
 
-export default defineComponent({
-  setup() {
-    return () => (
-      <BusinessTaxiEndMap
-        class={"demo"}
-        from={{
-          displayName: "ARTS LINK零创国际艺术教育长宁区创业园区",
-          name: "上海市长宁区华阳路街道ARTS LINK零创国际艺术教育长宁区创业园区",
-          lat: 1.311295,
-          lng: 103.841974,
-        }}
-        to={{
-          displayName: "ARTS LINK零创国际艺术教育长宁区创业园区",
-          name: "上海市长宁区华阳路街道ARTS LINK零创国际艺术教育长宁区创业园区",
-          lat: 1.2966426,
-          lng: 103.7763939,
-        }}
-      />
-    );
-  },
-});
+```vue
+<HeycarMap :center="[0, 0]" class="any class name" :zoom="3">
+   <template #fallback>error</template>
+   <template #loading>loading</template>
+   ...
+</HeycarMap>
 ```
 
-#### 下面是基础业务组件的使用方法，但是目前阶段不推荐使用
+#### 在地图里可以使用的组件
 
-下列是一些更加基础的业务组件， 虽然导出了，但是目前阶段不推荐使用
+目前有下列组件可以使用
 
-- `AbsoluteAddressBox`
+- `AddressBox`
+- `AddressLocator`
 - `DrivingLine`
 - `PassengerCircle`
 - `PlaceCircle`
@@ -347,7 +98,40 @@ export default defineComponent({
 - `WaveCircle`
 - `DrivingRoute`
 - `WalkingRoute`
-- `PickupPoints`
+
+目前有下列组件可以使用下列 hooks
+
+- `useBusinessMapRecomendPlace`
+- `useBusinessMapAutoComplete`
+
+目前有下列常用数据结构
+
+```typescript
+export type Point = [number, number];
+
+export type Place = {
+  lng: number;
+  lat: number;
+  name: string;
+  cityName?: string;
+  cityId?: string;
+};
+
+export interface AutoCompletePlace extends Place {
+  placeId?: string;
+  description: string;
+}
+
+export type Region = {
+  bound?: {
+    east: number;
+    north: number;
+    south: number;
+    west: number;
+  };
+  name: string;
+};
+```
 
 #### 在地图里使用 `AddressBox` ，需要放在 `HeycarMap` 内部
 
@@ -371,33 +155,3 @@ export default defineComponent({
    ...
 </HeycarMap>
 ```
-
-#### `HeycarMap` 的基本用法
-
-- 对于 jsx/tsx 文件的例子
-
-```jsx
-<HeycarMap
-  class="any class name"
-  // 地图加载失败要显示的内容
-  fallback={() => <div>error</div>}
-  // 地图还没有加载完成时要显示的内容
-  loading={() => <div>loading</div>}
-  // 地图中心点
-  center={[0, 0]}
-  // 地图放缩
-  zoom={3}
->
-  ...
-</HeycarMap>
-```
-
-- 对于 vue 文件的例子
-
-```vue
-<HeycarMap :center="[0, 0]" class="any class name" :zoom="3">
-   <template #fallback>error</template>
-   <template #loading>loading</template>
-   ...
-</HeycarMap>
-```

package/dist/api/contants.d.ts

@@ -5,5 +5,3 @@ export declare const ZINDEX_START_END_LOGO_LAYER = 40;
 export declare const ZINDEX_PLACE_LAYER = 30;
 export declare const ZINDEX_CAR_LAYER = 21;
 export declare const ZINDEX_PASSENGER_LAYER = 20;
-export declare const ZINDEX_LINE_LAYER = 12;
-export declare const ZINDEX_GREEN_ZONE = 10;

package/dist/hooks/useMapRecomendPlace.d.ts

@@ -1,22 +1,16 @@
 import { Ref } from "vue-demi";
-import type { Place, Point, RecommendZonePlaces, Zone } from "../types/interface";
+import type { Place, Point } from "../types/interface";
 import { UseMapPlaceProps } from "./useMapPlace";
-interface ValueOfOnChangeRecommendPlace {
-    place: Place;
-    inputPlace: Place;
-    isInZone: boolean;
-}
 export interface UseMapRecomendPlaceProps<C = Record<string, any>> {
     pointRef: Ref<Point>;
     context?: C;
     emptyPlaceName: string;
     getLimit: (context?: C) => number;
-    getRecomendPlace: (place: Place, context?: C) => Promise<RecommendZonePlaces | undefined>;
+    getRecomendPlace: (place: Place, context?: C) => Promise<Place[] | undefined>;
     onChangePlace?: UseMapPlaceProps["onChange"];
-    onChange?: (place: ValueOfOnChangeRecommendPlace) => any;
+    onChange?: (place: Place) => any;
 }
 export declare const useAmapRecomendPlace: <C>(props: UseMapRecomendPlaceProps<C>) => {
-    zoneRef: Ref<Zone | undefined>;
     recomendPlace: {
         lng: number;
         lat: number;
@@ -31,13 +25,12 @@ export declare const useAmapRecomendPlace: <C>(props: UseMapRecomendPlaceProps<C
     }[]>;
     availableRef: Ref<boolean>;
     isElectedRef: import("vue-demi").ComputedRef<boolean>;
-    updateRecommendPlace: (place: Place) => void;
+    updateRecomandPlace: () => void;
     updatePlaceCandidates: (place: Place) => Promise<void>;
     updatePlace: (value: Point) => void;
-    setPlaceCandidatesAndZone: ({ zone, places }: RecommendZonePlaces) => void;
+    setPlace: (value: Place) => void;
 };
 export declare const useGmapRecomendPlace: <C>(props: UseMapRecomendPlaceProps<C>) => {
-    zoneRef: Ref<Zone | undefined>;
     recomendPlace: {
         lng: number;
         lat: number;
@@ -52,13 +45,12 @@ export declare const useGmapRecomendPlace: <C>(props: UseMapRecomendPlaceProps<C
     }[]>;
     availableRef: Ref<boolean>;
     isElectedRef: import("vue-demi").ComputedRef<boolean>;
-    updateRecommendPlace: (place: Place) => void;
+    updateRecomandPlace: () => void;
     updatePlaceCandidates: (place: Place) => Promise<void>;
     updatePlace: (value: Point) => void;
-    setPlaceCandidatesAndZone: ({ zone, places }: RecommendZonePlaces) => void;
+    setPlace: (value: Place) => void;
 };
 export declare const useMapRecomendPlace: <C>(props: UseMapRecomendPlaceProps<C>) => {
-    zoneRef: Ref<Zone | undefined>;
     recomendPlace: {
         lng: number;
         lat: number;
@@ -73,9 +65,8 @@ export declare const useMapRecomendPlace: <C>(props: UseMapRecomendPlaceProps<C>
     }[]>;
     availableRef: Ref<boolean>;
     isElectedRef: import("vue-demi").ComputedRef<boolean>;
-    updateRecommendPlace: (place: Place) => void;
+    updateRecomandPlace: () => void;
     updatePlaceCandidates: (place: Place) => Promise<void>;
     updatePlace: (value: Point) => void;
-    setPlaceCandidatesAndZone: ({ zone, places }: RecommendZonePlaces) => void;
+    setPlace: (value: Place) => void;
 };
-export {};

package/dist/hooks-business/useBusinessAlarm.d.ts

@@ -0,0 +1,12 @@
+export interface useBusinessAlarmProps {
+    emptyPlaceName: string;
+}
+export declare const useBusinessAlarm: (props?: useBusinessAlarmProps) => {
+    place: {
+        lng: number;
+        lat: number;
+        name: string;
+        displayName: string;
+    };
+    geoError: import("vue").Ref<GeolocationPositionError | undefined>;
+};

package/dist/hooks-business/useBusinessRecomendPlaceMap.d.ts

@@ -1,12 +1,7 @@
-import type { Place, Point, RecommendZonePlaces } from "../types/interface";
-export interface SetCenterPlaceByUserSpecifiedInZoneProps {
-    place: Place;
-    recommends: RecommendZonePlaces;
-}
+import type { Place, Point } from "../types/interface";
 export interface BusinessRecomendPlaceContext {
     panToGeoPositionByRecomend: (value: Point) => void;
     setCenterPlaceByUserSpecified: (value: Place) => void;
-    setCenterPlaceByUserSpecifiedInZone: (value: SetCenterPlaceByUserSpecifiedInZoneProps) => void;
     onChangeCenterPlace: (value: Place) => void;
     onChangeRecomendPlaces: (value: Place[]) => void;
 }
@@ -26,7 +21,6 @@ export declare const useBusinessRecomendPlaceMap: () => {
     }[]>;
     panToGeoPositionByRecomend: (value: Point) => void;
     setCenterPlaceByUserSpecified: (value: Place) => void;
-    setCenterPlaceByUserSpecifiedInZone: (value: SetCenterPlaceByUserSpecifiedInZoneProps) => void;
     apiMapDistance: (from: Point, to: Point) => number | undefined;
     apiMapInChina: (point: Point) => boolean;
 };