@heycar/heycars-map 0.8.0 → 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)}
       />
     );
   },

package/dist/index.cjs

@@ -9,7 +9,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const Vue = require("vue");
 const style = "";
 const name = "@heycar/heycars-map";
-const version = "0.8.0";
+const version = "0.8.1";
 const type = "module";
 const scripts = {
   dev: "vite -c vite.config.dev.ts",
@@ -727,7 +727,7 @@ var createRuntimeFn = (config) => (options) => {
 };
 var absoluteAddressBox = "n8tgem1";
 var absoluteAddressBoxLayout = "n8tgem0";
-var arrowRight = "n8tgem8";
+var arrowRight$1 = "n8tgem8";
 var boxDescription = "n8tgem6";
 var boxTextLayout = createRuntimeFn({ defaultClassName: "n8tgem2", variantClassNames: { withArrow: { true: "n8tgem3", false: "n8tgem4" } }, defaultVariants: {}, compoundVariants: [] });
 var boxTitle = "n8tgem5";
@@ -796,7 +796,7 @@ const AbsoluteAddressBox = defineSetup(function AbsoluteAddressBox2(props, {
     }), !!description && Vue.h("div", {
       "class": boxDescription
     }, [description])]), withArrow && Vue.h("img", {
-      "class": arrowRight,
+      "class": arrowRight$1,
       "attrs": {
         "src": imgArrowRight
       }
@@ -3209,6 +3209,7 @@ const KeyedFitView = defineSetup(function KeyedFitView2(props, {
 const imgEndPoint = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IHgxPSI3Mi4zMzklIiB5MT0iNTAlIiB4Mj0iMCUiIHkyPSI1MCUiIGlkPSJwcmVmaXhfX2EiPjxzdG9wIHN0b3AtY29sb3I9IiNGRjg0NDciIG9mZnNldD0iMCUiLz48c3RvcCBzdG9wLWNvbG9yPSIjRkY4QjRBIiBvZmZzZXQ9IjUwLjU5NiUiLz48c3RvcCBzdG9wLWNvbG9yPSIjRkZBOTVBIiBvZmZzZXQ9IjEwMCUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xMiAzMC4yMTVjMi4xMzQgMCAzLjg2My0uODkzIDMuODYzLTEuOTk1IDAtMS4xLTEuNzMtMS45OTQtMy44NjMtMS45OTQtMi4xMzQgMC0zLjg2My44OTMtMy44NjMgMS45OTQgMCAxLjEwMiAxLjczIDEuOTk1IDMuODYzIDEuOTk1eiIgZmlsbC1vcGFjaXR5PSIuNSIgZmlsbD0iIzQzNDg1QSIvPjxwYXRoIGQ9Ik0xMSAyNy4wMDZjMi4xMjggMC0uOS0zLjc0MyA1LjYyMS02LjY0M0MxOS44NDIgMTguNDUzIDIyIDE0Ljk1MyAyMiAxMC45NSAyMiA0LjkwMiAxNy4wNzUgMCAxMSAwUzAgNC45MDIgMCAxMC45NWMwIDMuOTE4IDIuMDY4IDcuMzU2IDUuMTc3IDkuMjlDMTEuNzUgMjMuMjg0IDkuMDYgMjcuMDA3IDExIDI3LjAwN3oiIHN0cm9rZT0iI0ZGRiIgZmlsbD0idXJsKCNwcmVmaXhfX2EpIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxIDEuMjE1KSIvPjx0ZXh0IGZvbnQtZmFtaWx5PSJQaW5nRmFuZ1NDLVNlbWlib2xkLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZm9udC13ZWlnaHQ9IjUwMCIgZmlsbD0iI0ZGRiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxLjIxNSkiPjx0c3BhbiB4PSI1IiB5PSIxNS40NDkiPue7iDwvdHNwYW4+PC90ZXh0PjwvZz48L3N2Zz4=";
 const imgStartPoint = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IHgxPSIwJSIgeTE9IjUwJSIgeDI9IjEyOS41OTklIiB5Mj0iNTAlIiBpZD0icHJlZml4X19hIj48c3RvcCBzdG9wLWNvbG9yPSIjMzZBOEZGIiBvZmZzZXQ9IjAlIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzQ4NzFGMSIgb2Zmc2V0PSIxMDAlIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTIgMzAuMjE1YzEuOTUgMCAzLjUzMi0uODE2IDMuNTMyLTEuODIzIDAtMS4wMDctMS41ODEtMS44MjMtMy41MzItMS44MjMtMS45NSAwLTMuNTMyLjgxNi0zLjUzMiAxLjgyMyAwIDEuMDA3IDEuNTgxIDEuODIzIDMuNTMyIDEuODIzeiIgZmlsbC1vcGFjaXR5PSIuNSIgZmlsbD0iIzQzNDg1QSIvPjxwYXRoIGQ9Ik0xMSAyN2MyLjEyOCAwLS45LTMuNzQyIDUuNjIxLTYuNjQxIDMuMjIxLTEuOTEgNS4zNzktNS40MSA1LjM3OS05LjQxMkMyMiA0LjkwMSAxNy4wNzUgMCAxMSAwUzAgNC45MDEgMCAxMC45NDdjMCAzLjkxOCAyLjA2OCA3LjM1NSA1LjE3NyA5LjI5QzExLjc1IDIzLjI3NyA5LjA2IDI3IDExIDI3eiIgc3Ryb2tlPSIjRkZGIiBmaWxsPSJ1cmwoI3ByZWZpeF9fYSkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMS4yMTUpIi8+PHRleHQgZm9udC1mYW1pbHk9IlBpbmdGYW5nU0MtU2VtaWJvbGQsIFBpbmdGYW5nIFNDIiBmb250LXNpemU9IjEyIiBmb250LXdlaWdodD0iNTAwIiBmaWxsPSIjRkZGIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxIDEuMjE1KSI+PHRzcGFuIHg9IjUiIHk9IjE1LjYyNCI+6LW3PC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg==";
 const StartEndPoint_css_ts_vanilla = "";
+var arrowRight = createRuntimeFn({ defaultClassName: "_4a4ovka", variantClassNames: { withArrow: { true: "_4a4ovkb", false: "_4a4ovkc" } }, defaultVariants: {}, compoundVariants: [] });
 var pointIcon = createRuntimeFn({ defaultClassName: "", variantClassNames: { type: { start: "_4a4ovk6", end: "_4a4ovk7" } }, defaultVariants: {}, compoundVariants: [] });
 var pointInfoBox = "_4a4ovk1";
 var pointInfoBoxDescription = "_4a4ovk4";
@@ -3216,38 +3217,61 @@ var pointInfoBoxEmphasize$1 = "_4a4ovk5";
 var pointInfoBoxTitle = "_4a4ovk3";
 var pointLayout$1 = "_4a4ovk0";
 var pointSingleInfoBox$1 = "_4a4ovk2";
-const AStartEndPoint = defineSetup(function AStartEndPoint2(props) {
+var textLayout = createRuntimeFn({ defaultClassName: "", variantClassNames: { withArrow: { true: "_4a4ovk8", false: "_4a4ovk9" } }, defaultVariants: {}, compoundVariants: [] });
+const AStartEndPoint = defineSetup(function AStartEndPoint2(props, {
+  emit
+}) {
   const contentRef = Vue.computed(() => {
-    var _a;
-    const icon = props.type === "start" ? imgStartPoint : imgEndPoint;
-    const descriptionRow = !props.description ? "" : decodeAsterisk(props.description).map((item) => item.type === "normal" ? item.value : `<span class="${pointInfoBoxEmphasize$1}">${item.value}</span>`).join("");
-    if (!props.description && !props.title)
+    const {
+      withArrow = false,
+      title,
+      description,
+      type: type2
+    } = props;
+    const icon = type2 === "start" ? imgStartPoint : imgEndPoint;
+    const descriptionRow = !description ? "" : decodeAsterisk(description).map((item) => item.type === "normal" ? item.value : `<span class="${pointInfoBoxEmphasize$1}">${item.value}</span>`).join("");
+    if (!description && !title)
       return `<img class="AStartEndPoint ${pointIcon({
-        type: props.type
+        type: type2
       })}" src="${icon}">`;
-    if (!props.description)
+    if (!description)
       return `
         <div class="AStartEndPoint ${pointLayout$1}">
           <div class="${pointSingleInfoBox$1}">
-            <div class="${pointInfoBoxTitle}">${props.title}</div>
+            <div class="${pointInfoBoxTitle} ${textLayout({
+        withArrow
+      })}">${title}</div>
+            <img class="${arrowRight({
+        withArrow
+      })}" src="${imgArrowRight}" />
           </div>
           <img src="${icon}" class="${pointIcon({
-        type: props.type
+        type: type2
       })}">
         </div>
       `;
     return `
         <div class="AStartEndPoint ${pointLayout$1}">
           <div class="${pointInfoBox}">
-            <div class="${pointInfoBoxTitle}">${(_a = props.title) != null ? _a : ""}</div>
-            <div class="${pointInfoBoxDescription}">${descriptionRow}</div>
+            <div class="${textLayout({
+      withArrow
+    })}">
+              <div class="${pointInfoBoxTitle}">${title != null ? title : ""}</div>
+              <div class="${pointInfoBoxDescription}">${descriptionRow}</div>
+            </div>
+            <img class="${arrowRight({
+      withArrow
+    })}" src="${imgArrowRight}" />
           </div>
           <img src="${icon}" class="${pointIcon({
-      type: props.type
+      type: type2
     })}">
         </div>
       `;
   });
+  const handleClick = () => {
+    emit("click", props.position);
+  };
   return () => Vue.h(AmapMarker, {
     "attrs": {
       "registerOverlay": props.registerOverlay,
@@ -3255,44 +3279,69 @@ const AStartEndPoint = defineSetup(function AStartEndPoint2(props) {
       "content": contentRef.value,
       "anchor": "bottom-center",
       "zIndex": ZINDEX_START_END_LOGO_LAYER
+    },
+    "on": {
+      "click": handleClick
     }
   });
 });
-const GStartEndPoint = defineSetup(function GStartEndPoint2(props) {
+const GStartEndPoint = defineSetup(function GStartEndPoint2(props, {
+  emit
+}) {
   const contentRef = Vue.computed(() => {
-    var _a;
-    const icon = props.type === "start" ? imgStartPoint : imgEndPoint;
-    const descriptionRow = !props.description ? "" : decodeAsterisk(props.description).map((item) => item.type === "normal" ? item.value : `<span class="${pointInfoBoxEmphasize$1}">${item.value}</span>`).join("");
-    if (!props.description && !props.title)
+    const {
+      withArrow = false,
+      title,
+      description,
+      type: type2
+    } = props;
+    const icon = type2 === "start" ? imgStartPoint : imgEndPoint;
+    const descriptionRow = !description ? "" : decodeAsterisk(description).map((item) => item.type === "normal" ? item.value : `<span class="${pointInfoBoxEmphasize$1}">${item.value}</span>`).join("");
+    if (!description && !title)
       return createDom("img", {
         class: `GStartEndPoint ${pointIcon({
-          type: props.type
+          type: type2
         })}`,
         src: icon
       });
-    if (!props.description)
+    if (!description)
       return createDom("div", {
         class: `GStartEndPoint ${pointLayout$1}`
       }, `
           <div class="${pointSingleInfoBox$1}">
-            <div class="${pointInfoBoxTitle}">${props.title}</div>
+            <div class="${pointInfoBoxTitle} ${textLayout({
+        withArrow
+      })}">${title}</div>
+            <img class="${arrowRight({
+        withArrow
+      })}" src="${imgArrowRight}" />
           </div>
           <img src="${icon}" class="${pointIcon({
-        type: props.type
+        type: type2
       })}">
         `);
     return createDom("div", {
       class: `GStartEndPoint ${pointLayout$1}`
     }, `
         <div class="${pointInfoBox}">
-          <div class="${pointInfoBoxTitle}">${(_a = props.title) != null ? _a : ""}</div>
-          <div class="${pointInfoBoxDescription}">${descriptionRow}</div>
+          <div class="${textLayout({
+      withArrow
+    })}">
+            <div class="${pointInfoBoxTitle}">${title != null ? title : ""}</div>
+            <div class="${pointInfoBoxDescription}">${descriptionRow}</div>
+          </div>
+          <img class="${arrowRight({
+      withArrow
+    })}" src="${imgArrowRight}" />
         </div>
         <img src="${icon}" class="${pointIcon({
-      type: props.type
+      type: type2
     })}">
       `);
   });
+  const handleClick = () => {
+    emit("click", props.position);
+  };
   return () => {
     return Vue.h(GmapAdvancedMarkerView, {
       "attrs": {
@@ -3300,19 +3349,29 @@ const GStartEndPoint = defineSetup(function GStartEndPoint2(props) {
         "position": vec2lnglat(props.position),
         "content": contentRef.value,
         "zIndex": ZINDEX_START_END_LOGO_LAYER
+      },
+      "on": {
+        "click": handleClick
       }
     });
   };
 });
-const StartEndPoint = defineSetup(function StartEndPoint2(props) {
+const StartEndPoint = defineSetup(function StartEndPoint2(props, {
+  emit
+}) {
   const payload = useMapSupplier();
   return () => {
     return createElement(payload.supplier === "gmap" ? GStartEndPoint : AStartEndPoint, {
-      attrs: props
+      attrs: props,
+      on: {
+        click: (value) => emit("click", value)
+      }
     });
   };
 });
-const BusinessQuotingMap = defineLagecySetup(function BusinessQuotingMap2(props) {
+const BusinessQuotingMap = defineLagecySetup(function BusinessQuotingMap2(props, {
+  emit
+}) {
   const {
     registerOverlay,
     mapRef,
@@ -3345,7 +3404,11 @@ const BusinessQuotingMap = defineLagecySetup(function BusinessQuotingMap2(props)
         "registerOverlay": registerOverlay,
         "position": from,
         "title": fromPlace.displayName,
-        "description": fromDescription
+        "description": fromDescription,
+        "withArrow": true
+      },
+      "on": {
+        "click": () => emit("clickStartPoint", fromPlace)
       }
     }), Vue.h(DrivingRoute, {
       "attrs": {
@@ -3368,7 +3431,11 @@ const BusinessQuotingMap = defineLagecySetup(function BusinessQuotingMap2(props)
             "description": renderDescription({
               distance,
               duration
-            })
+            }),
+            "withArrow": true
+          },
+          "on": {
+            "click": () => emit("clickEndPoint", toPlace)
           }
         })]
       }
@@ -3441,6 +3508,10 @@ function compatibaleAddEventListenerDeviceOrientation(handler) {
       addEventListener("touchend", handleTouchEnd);
       return;
     }
+    if (typeof DeviceOrientationEvent === "undefined") {
+      console.warn("My Warning: ios not support DeviceOrientationEvent");
+      return;
+    }
     DeviceOrientationEvent == null ? void 0 : DeviceOrientationEvent.requestPermission().then((permissionState) => {
       if (permissionState === "granted") {
         isIOSDeviceOrientationPermissionGranted = true;
@@ -6089,8 +6160,7 @@ const APlaceCircle = defineSetup(function APlaceCircle2(props, {
       textAlign: textAlignRef.value
     })}" src="${imgPlaceCircle}">`;
   });
-  const handleClick = (e) => {
-    console.log("AmapMarker click e = ", e);
+  const handleClick = () => {
     emit("click", props.position);
   };
   return () => {

package/dist/index.js

@@ -7,7 +7,7 @@ var __publicField = (obj, key, value) => {
 import Vue, { defineComponent, h, computed, inject, provide, watch, onMounted, onUnmounted, watchPostEffect, shallowRef, ref, watchEffect, reactive, toRefs, toRef } from "vue";
 const style = "";
 const name = "@heycar/heycars-map";
-const version = "0.8.0";
+const version = "0.8.1";
 const type = "module";
 const scripts = {
   dev: "vite -c vite.config.dev.ts",
@@ -725,7 +725,7 @@ var createRuntimeFn = (config) => (options) => {
 };
 var absoluteAddressBox = "n8tgem1";
 var absoluteAddressBoxLayout = "n8tgem0";
-var arrowRight = "n8tgem8";
+var arrowRight$1 = "n8tgem8";
 var boxDescription = "n8tgem6";
 var boxTextLayout = createRuntimeFn({ defaultClassName: "n8tgem2", variantClassNames: { withArrow: { true: "n8tgem3", false: "n8tgem4" } }, defaultVariants: {}, compoundVariants: [] });
 var boxTitle = "n8tgem5";
@@ -794,7 +794,7 @@ const AbsoluteAddressBox = defineSetup(function AbsoluteAddressBox2(props, {
     }), !!description && h("div", {
       "class": boxDescription
     }, [description])]), withArrow && h("img", {
-      "class": arrowRight,
+      "class": arrowRight$1,
       "attrs": {
         "src": imgArrowRight
       }
@@ -3207,6 +3207,7 @@ const KeyedFitView = defineSetup(function KeyedFitView2(props, {
 const imgEndPoint = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IHgxPSI3Mi4zMzklIiB5MT0iNTAlIiB4Mj0iMCUiIHkyPSI1MCUiIGlkPSJwcmVmaXhfX2EiPjxzdG9wIHN0b3AtY29sb3I9IiNGRjg0NDciIG9mZnNldD0iMCUiLz48c3RvcCBzdG9wLWNvbG9yPSIjRkY4QjRBIiBvZmZzZXQ9IjUwLjU5NiUiLz48c3RvcCBzdG9wLWNvbG9yPSIjRkZBOTVBIiBvZmZzZXQ9IjEwMCUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xMiAzMC4yMTVjMi4xMzQgMCAzLjg2My0uODkzIDMuODYzLTEuOTk1IDAtMS4xLTEuNzMtMS45OTQtMy44NjMtMS45OTQtMi4xMzQgMC0zLjg2My44OTMtMy44NjMgMS45OTQgMCAxLjEwMiAxLjczIDEuOTk1IDMuODYzIDEuOTk1eiIgZmlsbC1vcGFjaXR5PSIuNSIgZmlsbD0iIzQzNDg1QSIvPjxwYXRoIGQ9Ik0xMSAyNy4wMDZjMi4xMjggMC0uOS0zLjc0MyA1LjYyMS02LjY0M0MxOS44NDIgMTguNDUzIDIyIDE0Ljk1MyAyMiAxMC45NSAyMiA0LjkwMiAxNy4wNzUgMCAxMSAwUzAgNC45MDIgMCAxMC45NWMwIDMuOTE4IDIuMDY4IDcuMzU2IDUuMTc3IDkuMjlDMTEuNzUgMjMuMjg0IDkuMDYgMjcuMDA3IDExIDI3LjAwN3oiIHN0cm9rZT0iI0ZGRiIgZmlsbD0idXJsKCNwcmVmaXhfX2EpIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxIDEuMjE1KSIvPjx0ZXh0IGZvbnQtZmFtaWx5PSJQaW5nRmFuZ1NDLVNlbWlib2xkLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZm9udC13ZWlnaHQ9IjUwMCIgZmlsbD0iI0ZGRiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxLjIxNSkiPjx0c3BhbiB4PSI1IiB5PSIxNS40NDkiPue7iDwvdHNwYW4+PC90ZXh0PjwvZz48L3N2Zz4=";
 const imgStartPoint = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IHgxPSIwJSIgeTE9IjUwJSIgeDI9IjEyOS41OTklIiB5Mj0iNTAlIiBpZD0icHJlZml4X19hIj48c3RvcCBzdG9wLWNvbG9yPSIjMzZBOEZGIiBvZmZzZXQ9IjAlIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzQ4NzFGMSIgb2Zmc2V0PSIxMDAlIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTIgMzAuMjE1YzEuOTUgMCAzLjUzMi0uODE2IDMuNTMyLTEuODIzIDAtMS4wMDctMS41ODEtMS44MjMtMy41MzItMS44MjMtMS45NSAwLTMuNTMyLjgxNi0zLjUzMiAxLjgyMyAwIDEuMDA3IDEuNTgxIDEuODIzIDMuNTMyIDEuODIzeiIgZmlsbC1vcGFjaXR5PSIuNSIgZmlsbD0iIzQzNDg1QSIvPjxwYXRoIGQ9Ik0xMSAyN2MyLjEyOCAwLS45LTMuNzQyIDUuNjIxLTYuNjQxIDMuMjIxLTEuOTEgNS4zNzktNS40MSA1LjM3OS05LjQxMkMyMiA0LjkwMSAxNy4wNzUgMCAxMSAwUzAgNC45MDEgMCAxMC45NDdjMCAzLjkxOCAyLjA2OCA3LjM1NSA1LjE3NyA5LjI5QzExLjc1IDIzLjI3NyA5LjA2IDI3IDExIDI3eiIgc3Ryb2tlPSIjRkZGIiBmaWxsPSJ1cmwoI3ByZWZpeF9fYSkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMS4yMTUpIi8+PHRleHQgZm9udC1mYW1pbHk9IlBpbmdGYW5nU0MtU2VtaWJvbGQsIFBpbmdGYW5nIFNDIiBmb250LXNpemU9IjEyIiBmb250LXdlaWdodD0iNTAwIiBmaWxsPSIjRkZGIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxIDEuMjE1KSI+PHRzcGFuIHg9IjUiIHk9IjE1LjYyNCI+6LW3PC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg==";
 const StartEndPoint_css_ts_vanilla = "";
+var arrowRight = createRuntimeFn({ defaultClassName: "_4a4ovka", variantClassNames: { withArrow: { true: "_4a4ovkb", false: "_4a4ovkc" } }, defaultVariants: {}, compoundVariants: [] });
 var pointIcon = createRuntimeFn({ defaultClassName: "", variantClassNames: { type: { start: "_4a4ovk6", end: "_4a4ovk7" } }, defaultVariants: {}, compoundVariants: [] });
 var pointInfoBox = "_4a4ovk1";
 var pointInfoBoxDescription = "_4a4ovk4";
@@ -3214,38 +3215,61 @@ var pointInfoBoxEmphasize$1 = "_4a4ovk5";
 var pointInfoBoxTitle = "_4a4ovk3";
 var pointLayout$1 = "_4a4ovk0";
 var pointSingleInfoBox$1 = "_4a4ovk2";
-const AStartEndPoint = defineSetup(function AStartEndPoint2(props) {
+var textLayout = createRuntimeFn({ defaultClassName: "", variantClassNames: { withArrow: { true: "_4a4ovk8", false: "_4a4ovk9" } }, defaultVariants: {}, compoundVariants: [] });
+const AStartEndPoint = defineSetup(function AStartEndPoint2(props, {
+  emit
+}) {
   const contentRef = computed(() => {
-    var _a;
-    const icon = props.type === "start" ? imgStartPoint : imgEndPoint;
-    const descriptionRow = !props.description ? "" : decodeAsterisk(props.description).map((item) => item.type === "normal" ? item.value : `<span class="${pointInfoBoxEmphasize$1}">${item.value}</span>`).join("");
-    if (!props.description && !props.title)
+    const {
+      withArrow = false,
+      title,
+      description,
+      type: type2
+    } = props;
+    const icon = type2 === "start" ? imgStartPoint : imgEndPoint;
+    const descriptionRow = !description ? "" : decodeAsterisk(description).map((item) => item.type === "normal" ? item.value : `<span class="${pointInfoBoxEmphasize$1}">${item.value}</span>`).join("");
+    if (!description && !title)
       return `<img class="AStartEndPoint ${pointIcon({
-        type: props.type
+        type: type2
       })}" src="${icon}">`;
-    if (!props.description)
+    if (!description)
       return `
         <div class="AStartEndPoint ${pointLayout$1}">
           <div class="${pointSingleInfoBox$1}">
-            <div class="${pointInfoBoxTitle}">${props.title}</div>
+            <div class="${pointInfoBoxTitle} ${textLayout({
+        withArrow
+      })}">${title}</div>
+            <img class="${arrowRight({
+        withArrow
+      })}" src="${imgArrowRight}" />
           </div>
           <img src="${icon}" class="${pointIcon({
-        type: props.type
+        type: type2
       })}">
         </div>
       `;
     return `
         <div class="AStartEndPoint ${pointLayout$1}">
           <div class="${pointInfoBox}">
-            <div class="${pointInfoBoxTitle}">${(_a = props.title) != null ? _a : ""}</div>
-            <div class="${pointInfoBoxDescription}">${descriptionRow}</div>
+            <div class="${textLayout({
+      withArrow
+    })}">
+              <div class="${pointInfoBoxTitle}">${title != null ? title : ""}</div>
+              <div class="${pointInfoBoxDescription}">${descriptionRow}</div>
+            </div>
+            <img class="${arrowRight({
+      withArrow
+    })}" src="${imgArrowRight}" />
           </div>
           <img src="${icon}" class="${pointIcon({
-      type: props.type
+      type: type2
     })}">
         </div>
       `;
   });
+  const handleClick = () => {
+    emit("click", props.position);
+  };
   return () => h(AmapMarker, {
     "attrs": {
       "registerOverlay": props.registerOverlay,
@@ -3253,44 +3277,69 @@ const AStartEndPoint = defineSetup(function AStartEndPoint2(props) {
       "content": contentRef.value,
       "anchor": "bottom-center",
       "zIndex": ZINDEX_START_END_LOGO_LAYER
+    },
+    "on": {
+      "click": handleClick
     }
   });
 });
-const GStartEndPoint = defineSetup(function GStartEndPoint2(props) {
+const GStartEndPoint = defineSetup(function GStartEndPoint2(props, {
+  emit
+}) {
   const contentRef = computed(() => {
-    var _a;
-    const icon = props.type === "start" ? imgStartPoint : imgEndPoint;
-    const descriptionRow = !props.description ? "" : decodeAsterisk(props.description).map((item) => item.type === "normal" ? item.value : `<span class="${pointInfoBoxEmphasize$1}">${item.value}</span>`).join("");
-    if (!props.description && !props.title)
+    const {
+      withArrow = false,
+      title,
+      description,
+      type: type2
+    } = props;
+    const icon = type2 === "start" ? imgStartPoint : imgEndPoint;
+    const descriptionRow = !description ? "" : decodeAsterisk(description).map((item) => item.type === "normal" ? item.value : `<span class="${pointInfoBoxEmphasize$1}">${item.value}</span>`).join("");
+    if (!description && !title)
       return createDom("img", {
         class: `GStartEndPoint ${pointIcon({
-          type: props.type
+          type: type2
         })}`,
         src: icon
       });
-    if (!props.description)
+    if (!description)
       return createDom("div", {
         class: `GStartEndPoint ${pointLayout$1}`
       }, `
           <div class="${pointSingleInfoBox$1}">
-            <div class="${pointInfoBoxTitle}">${props.title}</div>
+            <div class="${pointInfoBoxTitle} ${textLayout({
+        withArrow
+      })}">${title}</div>
+            <img class="${arrowRight({
+        withArrow
+      })}" src="${imgArrowRight}" />
           </div>
           <img src="${icon}" class="${pointIcon({
-        type: props.type
+        type: type2
       })}">
         `);
     return createDom("div", {
       class: `GStartEndPoint ${pointLayout$1}`
     }, `
         <div class="${pointInfoBox}">
-          <div class="${pointInfoBoxTitle}">${(_a = props.title) != null ? _a : ""}</div>
-          <div class="${pointInfoBoxDescription}">${descriptionRow}</div>
+          <div class="${textLayout({
+      withArrow
+    })}">
+            <div class="${pointInfoBoxTitle}">${title != null ? title : ""}</div>
+            <div class="${pointInfoBoxDescription}">${descriptionRow}</div>
+          </div>
+          <img class="${arrowRight({
+      withArrow
+    })}" src="${imgArrowRight}" />
         </div>
         <img src="${icon}" class="${pointIcon({
-      type: props.type
+      type: type2
     })}">
       `);
   });
+  const handleClick = () => {
+    emit("click", props.position);
+  };
   return () => {
     return h(GmapAdvancedMarkerView, {
       "attrs": {
@@ -3298,19 +3347,29 @@ const GStartEndPoint = defineSetup(function GStartEndPoint2(props) {
         "position": vec2lnglat(props.position),
         "content": contentRef.value,
         "zIndex": ZINDEX_START_END_LOGO_LAYER
+      },
+      "on": {
+        "click": handleClick
       }
     });
   };
 });
-const StartEndPoint = defineSetup(function StartEndPoint2(props) {
+const StartEndPoint = defineSetup(function StartEndPoint2(props, {
+  emit
+}) {
   const payload = useMapSupplier();
   return () => {
     return createElement(payload.supplier === "gmap" ? GStartEndPoint : AStartEndPoint, {
-      attrs: props
+      attrs: props,
+      on: {
+        click: (value) => emit("click", value)
+      }
     });
   };
 });
-const BusinessQuotingMap = defineLagecySetup(function BusinessQuotingMap2(props) {
+const BusinessQuotingMap = defineLagecySetup(function BusinessQuotingMap2(props, {
+  emit
+}) {
   const {
     registerOverlay,
     mapRef,
@@ -3343,7 +3402,11 @@ const BusinessQuotingMap = defineLagecySetup(function BusinessQuotingMap2(props)
         "registerOverlay": registerOverlay,
         "position": from,
         "title": fromPlace.displayName,
-        "description": fromDescription
+        "description": fromDescription,
+        "withArrow": true
+      },
+      "on": {
+        "click": () => emit("clickStartPoint", fromPlace)
       }
     }), h(DrivingRoute, {
       "attrs": {
@@ -3366,7 +3429,11 @@ const BusinessQuotingMap = defineLagecySetup(function BusinessQuotingMap2(props)
             "description": renderDescription({
               distance,
               duration
-            })
+            }),
+            "withArrow": true
+          },
+          "on": {
+            "click": () => emit("clickEndPoint", toPlace)
           }
         })]
       }
@@ -3439,6 +3506,10 @@ function compatibaleAddEventListenerDeviceOrientation(handler) {
       addEventListener("touchend", handleTouchEnd);
       return;
     }
+    if (typeof DeviceOrientationEvent === "undefined") {
+      console.warn("My Warning: ios not support DeviceOrientationEvent");
+      return;
+    }
     DeviceOrientationEvent == null ? void 0 : DeviceOrientationEvent.requestPermission().then((permissionState) => {
       if (permissionState === "granted") {
         isIOSDeviceOrientationPermissionGranted = true;
@@ -6087,8 +6158,7 @@ const APlaceCircle = defineSetup(function APlaceCircle2(props, {
       textAlign: textAlignRef.value
     })}" src="${imgPlaceCircle}">`;
   });
-  const handleClick = (e) => {
-    console.log("AmapMarker click e = ", e);
+  const handleClick = () => {
     emit("click", props.position);
   };
   return () => {

package/dist/src/business-components/BusinessQuotingMap/BusinessQuotingMap.d.ts

@@ -5,10 +5,12 @@ export type BusinessQuotingMapProps = Omit<HeycarMapProps, "center" | "zoom"> &
     from: Place;
     to: Place;
     fromDescription: string;
+    log?: boolean;
     renderDescription: (titleProps: {
         distance: number;
         duration: number;
     }) => string;
-    log?: boolean;
+    onClickStartPoint?: (value: Place) => void;
+    onClickEndPoint?: (value: Place) => void;
 };
-export declare const BusinessQuotingMap: import("vue").DefineComponent<import("vue/types/v3-component-props").ComponentObjectPropsOptions<BusinessQuotingMapProps>, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").EmitByProps<BusinessQuotingMapProps, Required<BusinessQuotingMapProps>>, "resize" | "dragEnd" | "zoomEnd", BusinessQuotingMapProps, {} | {}>;
+export declare const BusinessQuotingMap: import("vue").DefineComponent<import("vue/types/v3-component-props").ComponentObjectPropsOptions<BusinessQuotingMapProps>, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").EmitByProps<BusinessQuotingMapProps, Required<BusinessQuotingMapProps>>, "resize" | "dragEnd" | "zoomEnd" | "clickStartPoint" | "clickEndPoint", BusinessQuotingMapProps, {} | {}>;

package/dist/src/business-components/StartEndPoint/StartEndPoint.css.d.ts

@@ -18,3 +18,19 @@ export declare const pointIcon: import("@vanilla-extract/recipes").RuntimeFn<{
         };
     };
 }>;
+export declare const textLayout: import("@vanilla-extract/recipes").RuntimeFn<{
+    withArrow: {
+        true: {
+            paddingRight: "2.67vw";
+        };
+        false: {};
+    };
+}>;
+export declare const arrowRight: import("@vanilla-extract/recipes").RuntimeFn<{
+    withArrow: {
+        true: {};
+        false: {
+            display: "none";
+        };
+    };
+}>;

package/dist/src/business-components/StartEndPoint/StartEndPoint.d.ts

@@ -1,9 +1,12 @@
 import type { GmapOverlay, MapRegisterOverlayProps } from "../../hooks/useOverlay";
+import type { Point } from "../../types/interface";
 export interface StartEndPointProps<T> extends MapRegisterOverlayProps<T> {
     type: "start" | "end";
     position: [number, number];
     title?: string;
     description?: string;
+    withArrow?: boolean;
+    onClick?: (value: Point) => void;
 }
 export declare const AStartEndPoint: import("vue-demi").DefineComponent<import("vue/types/v3-component-props").ComponentObjectPropsOptions<StartEndPointProps<{
     _needUpdate: boolean;
@@ -6869,7 +6872,7 @@ export declare const AStartEndPoint: import("vue-demi").DefineComponent<import("
     clearEvents(type: AMap.EventType): any;
     emit(type: AMap.EventType, data?: any): any;
     getEvents(): Record<string, any[]>;
-}>>>, never, StartEndPointProps<{
+}>>>, "click", StartEndPointProps<{
     _needUpdate: boolean;
     readonly CLASS_NAME: "Overlay" | "Overlay.Polygon" | "Overlay.CorePolygon" | "Overlay.CorePolyline" | "Overlay.Rectangle" | "Overlay.Ellipse" | "Overlay.Circle" | "Overlay.CircleMarker" | "Overlay.Polyline" | "Overlay.BezierCurve" | "Overlay.OverlayGroup" | "Overlay.GeoJSON";
     className: "Overlay" | "Overlay.Polygon" | "Overlay.CorePolygon" | "Overlay.CorePolyline" | "Overlay.Rectangle" | "Overlay.Ellipse" | "Overlay.Circle" | "Overlay.CircleMarker" | "Overlay.Polyline" | "Overlay.BezierCurve" | "Overlay.OverlayGroup" | "Overlay.GeoJSON";
@@ -9158,7 +9161,7 @@ export declare const AStartEndPoint: import("vue-demi").DefineComponent<import("
     emit(type: AMap.EventType, data?: any): any;
     getEvents(): Record<string, any[]>;
 }>, {}>;
-export declare const GStartEndPoint: import("vue-demi").DefineComponent<import("vue/types/v3-component-props").ComponentObjectPropsOptions<StartEndPointProps<GmapOverlay>>, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").EmitByProps<StartEndPointProps<GmapOverlay>, Required<StartEndPointProps<GmapOverlay>>>, never, StartEndPointProps<GmapOverlay>, {}>;
+export declare const GStartEndPoint: import("vue-demi").DefineComponent<import("vue/types/v3-component-props").ComponentObjectPropsOptions<StartEndPointProps<GmapOverlay>>, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").EmitByProps<StartEndPointProps<GmapOverlay>, Required<StartEndPointProps<GmapOverlay>>>, "click", StartEndPointProps<GmapOverlay>, {}>;
 export declare const StartEndPoint: import("vue-demi").DefineComponent<import("vue/types/v3-component-props").ComponentObjectPropsOptions<StartEndPointProps<{
     _needUpdate: boolean;
     readonly CLASS_NAME: "Overlay" | "Overlay.Polygon" | "Overlay.CorePolygon" | "Overlay.CorePolyline" | "Overlay.Rectangle" | "Overlay.Ellipse" | "Overlay.Circle" | "Overlay.CircleMarker" | "Overlay.Polyline" | "Overlay.BezierCurve" | "Overlay.OverlayGroup" | "Overlay.GeoJSON";
@@ -16023,7 +16026,7 @@ export declare const StartEndPoint: import("vue-demi").DefineComponent<import("v
     clearEvents(type: AMap.EventType): any;
     emit(type: AMap.EventType, data?: any): any;
     getEvents(): Record<string, any[]>;
-}> | StartEndPointProps<GmapOverlay>>>, never, StartEndPointProps<{
+}> | StartEndPointProps<GmapOverlay>>>, "click", StartEndPointProps<{
     _needUpdate: boolean;
     readonly CLASS_NAME: "Overlay" | "Overlay.Polygon" | "Overlay.CorePolygon" | "Overlay.CorePolyline" | "Overlay.Rectangle" | "Overlay.Ellipse" | "Overlay.Circle" | "Overlay.CircleMarker" | "Overlay.Polyline" | "Overlay.BezierCurve" | "Overlay.OverlayGroup" | "Overlay.GeoJSON";
     className: "Overlay" | "Overlay.Polygon" | "Overlay.CorePolygon" | "Overlay.CorePolyline" | "Overlay.Rectangle" | "Overlay.Ellipse" | "Overlay.Circle" | "Overlay.CircleMarker" | "Overlay.Polyline" | "Overlay.BezierCurve" | "Overlay.OverlayGroup" | "Overlay.GeoJSON";

package/dist/style.css

@@ -152,12 +152,16 @@ a[title*="Google"]>div>img[alt="Google"], .gmnoprint {
   align-items: center;
 }
 ._4a4ovk1 {
+  display: flex;
+  align-items: center;
   padding: 1.07vw 2.4vw 1.6vw 2.67vw;
   background: #FFFFFF;
   box-shadow: 0vw 0.53vw 2.4vw 0vw rgba(63,63,63,0.2);
   border-radius: 2.13vw;
 }
 ._4a4ovk2 {
+  display: flex;
+  align-items: center;
   padding: 2.67vw 2.67vw 2.4vw 3.2vw;
   background: #FFFFFF;
   box-shadow: 0vw 0vw 2.67vw 0vw rgba(78,85,108,0.15);
@@ -199,6 +203,17 @@ a[title*="Google"]>div>img[alt="Google"], .gmnoprint {
   margin-top: 2.4vw;
   width: 6.192vw;
   height: 7.998vw;
+}
+._4a4ovk8 {
+  padding-right: 2.67vw;
+}
+._4a4ovka {
+  width: 1.758vw;
+  height: 2.93vw;
+  filter: invert(1);
+}
+._4a4ovkc {
+  display: none;
 }._1l6offo0 {
   display: flex;
 }

package/package.json

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