@heycar/heycars-map 0.7.11 → 0.8.1

package/README.md

@@ -88,6 +88,7 @@ export interface RecommendZonePlaces {
 为了方便集成，已经将常用业务逻辑集成在四个业务组件里面，下面是推荐使用的业务组件
 
 - `BusinessRecomendPlaceMap`
+- `BusinessReselectPlaceMap`
 - `BusinessQuotingMap`
 - `BusinessTaxiServiceMap`
 - `BusinessTaxiEndMap`
@@ -95,6 +96,7 @@ export interface RecommendZonePlaces {
 下面三个是推荐搭配使用的业务 hooks
 
 - `useBusinessRecomendPlaceMap`
+- `useBusinessReselectPlaceMap`
 - `useBusinessQuotingMap`
 - `useBusinessTaxiServiceMap`
 
@@ -215,6 +217,114 @@ export default defineComponent({
 });
 ```
 
+#### 选择上车点和推荐点的地图组件 `BusinessReselectPlaceMap`
+
+对于 jsx/tsx 文件的例子
+
+```jsx
+import { defineComponent } from "vue";
+import { BusinessReselectPlaceMap, useBusinessReselectPlaceMap } from "@heycar/heycars-map";
+
+export default defineComponent({
+  setup() {
+    const {
+      centerPlace,
+      mapContext,
+      setCenterPlaceByUserSpecified,
+      setCenterPlaceByUserSpecifiedInZone,
+    } = useBusinessReselectPlaceMap();
+    // 演示 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 () => (
+      <BusinessReselectPlaceMap
+        class={"demo"}
+        unavailableTitle={"当前区域暂未开通服务"}
+        recomendDescription={"您将在此处上车"}
+        defaultPlace={{
+          lng: 139.777777,
+          lat: 35.777777,
+          name: "default place name",
+          displayName: "default place display name",
+        }}
+        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" },
+            ],
+          };
+        }}
+        onChangeRecomandPlace={({ place, inputPlace, isInZone }) => {
+          console.log("用户操作地图，计算推荐点后得出的最终位置时触发，此时可以向后端查询城市信息");
+          console.log(
+            "计算推荐点之前的地址是: ",
+            inputPlace,
+            " 最终的地址是: ",
+            place,
+            " 是否在绿区内: ",
+            isInZone
+          );
+        }}
+        onGeoError={() => {
+          console.log("获取GPS失败时触发，此时可以弹框告诉用户");
+        }}
+      />
+    );
+  },
+});
+```
+
 #### 询价业务的地图组件 `BusinessQuotingMap`
 
 对于 jsx/tsx 文件的例子
@@ -247,6 +357,8 @@ export default defineComponent({
         }
         mapRef={setMap}
         registerOverlay={registerFitVeiw}
+        onClickStartPoint={(place) => console.log("点击起点时触发 palce = ", place)}
+        onClickEndPoint={(place) => console.log("点击终点时触发 palce = ", place)}
       />
     );
   },