@heycar/heycars-map 0.7.8 → 0.7.11

package/README.md

@@ -16,8 +16,38 @@ 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 文件的例子
@@ -53,42 +83,261 @@ npm install @heycar/heycars-map --save
 </MapProvider>
 ```
 
-#### 在需要用到地图的地方添加 `HeycarMap`
+#### 在地图里可以使用的组件
+
+为了方便集成，已经将常用业务逻辑集成在四个业务组件里面，下面是推荐使用的业务组件
 
-- 对于 jsx/tsx 文件的例子
+- `BusinessRecomendPlaceMap`
+- `BusinessQuotingMap`
+- `BusinessTaxiServiceMap`
+- `BusinessTaxiEndMap`
+
+下面三个是推荐搭配使用的业务 hooks
+
+- `useBusinessRecomendPlaceMap`
+- `useBusinessQuotingMap`
+- `useBusinessTaxiServiceMap`
+
+#### 选择上车点和推荐点的地图组件 `BusinessRecomendPlaceMap`
+
+对于 jsx/tsx 文件的例子
 
 ```jsx
-<HeycarMap
-  class="any class name"
-  // 地图加载失败要显示的内容
-  fallback={() => <div>error</div>}
-  // 地图还没有加载完成时要显示的内容
-  loading={() => <div>loading</div>}
-  // 地图中心点
-  center={[0, 0]}
-  // 地图放缩
-  zoom={3}
->
-  ...
-</HeycarMap>
+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失败时触发，此时可以弹框告诉用户");
+        }}
+      />
+    );
+  },
+});
 ```
 
-- 对于 vue 文件的例子
+#### 询价业务的地图组件 `BusinessQuotingMap`
 
-```vue
-<HeycarMap :center="[0, 0]" class="any class name" :zoom="3">
-   <template #fallback>error</template>
-   <template #loading>loading</template>
-   ...
-</HeycarMap>
+对于 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`
+
+对于 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}
+      />
+    );
+  },
+});
+```
 
-- `AddressBox`
-- `AddressLocator`
+#### 服务结束的地图组件
+
+对于 jsx/tsx 文件的例子
+
+```jsx
+import { defineComponent } from "vue";
+import { BusinessTaxiEndMap } from "@heycar/heycars-map";
+
+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,
+        }}
+      />
+    );
+  },
+});
+```
+
+#### 下面是基础业务组件的使用方法，但是目前阶段不推荐使用
+
+下列是一些更加基础的业务组件， 虽然导出了，但是目前阶段不推荐使用
+
+- `AbsoluteAddressBox`
 - `DrivingLine`
 - `PassengerCircle`
 - `PlaceCircle`
@@ -98,40 +347,7 @@ npm install @heycar/heycars-map --save
 - `WaveCircle`
 - `DrivingRoute`
 - `WalkingRoute`
-
-目前有下列组件可以使用下列 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;
-};
-```
+- `PickupPoints`
 
 #### 在地图里使用 `AddressBox` ，需要放在 `HeycarMap` 内部
 
@@ -155,3 +371,33 @@ export type Region = {
    ...
 </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>
+```