@heycar/heycars-map 0.2.11 → 0.2.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heycar/heycars-map",
-  "version": "0.2.11",
+  "version": "0.2.12",
   "type": "module",
   "scripts": {
     "dev": "vite -c vite.config.dev.ts",
@@ -91,4 +91,4 @@
   "engines": {
     "node": ">=16.0.0"
   }
-}
+}

package/src/App.tsx

@@ -1,6 +1,6 @@
 import { defineComponent } from "vue-demi";
 import { MapProvider } from "./components/MapProvider";
-import { DemoBusinessTaxiService } from "./Demo/DemoBusinessTaxiService";
+import { DemoBusinessRecomendPlace } from "./Demo/DemoBusinessRecomendPlace";
 
 const gmapApiKey = import.meta.env.VITE_GMAP_API_KEY;
 const gmapId = import.meta.env.VITE_GMAP_MAP_ID;
@@ -17,9 +17,9 @@ export const App = defineComponent({
         gmapKey={gmapApiKey}
         supplier={"amap"}
       >
-        {/* <DemoBusinessRecomendPlace /> */}
+        <DemoBusinessRecomendPlace />
         {/* <DemoBusinessQuoting /> */}
-        <DemoBusinessTaxiService />
+        {/* <DemoBusinessTaxiService /> */}
         {/* <DemoBusinessTaxiEnd /> */}
       </MapProvider>
     );

package/src/Demo/DemoBusinessRecomendPlace.tsx

@@ -37,41 +37,21 @@ export const DemoBusinessRecomendPlace = defineSetup(function DemoBusinessRecome
   ) => {
     const { lat, lng } = place;
     console.log("getRecomendPlace context?.source = ", context?.source);
-    return [
-      {
-        address: "2 College Ave West, Stephen Riady Centre, Singapore 138607",
-        distance: 68,
-        lat: 1.2961134,
-        lng: 103.7722912,
-        name: "2 College Ave West, Stephen Riady Centre, Singapore 138607",
-        reqFrom: "Recent",
-      },
-      {
-        address: "10 Architecture Drive, Singapore",
-        distance: 71,
-        lat: 1.2969847,
-        lng: 103.7714507,
-        name: "Centre for English Language Communication (CELC)",
-        reqFrom: "public",
-      },
-      {
-        address: "10 Kent Ridge Crescent, #01-02 Block AS8",
-        distance: 75,
-        lat: 1.295979,
-        lng: 103.7720608,
-        name: "The Coffee Roaster Cafe @ NUS",
-        reqFrom: "public",
-      },
-    ];
-
     return [
       { lat: lat + 0.0001, lng: lng + 0.0001, name: "place name 1" },
       { lat: lat + 0.002, lng: lng + 0.002, name: "place name 2" },
     ];
   };
-  const { centerPlace, placeCandidates, setCenterPlaceByRecomand, mapContext, apiMapDistance } =
-    useBusinessRecomendPlaceMap();
+  const {
+    centerPlace,
+    placeCandidates,
+    setCenterPlaceByRecomand,
+    mapContext,
+    apiMapDistance,
+    panToGeoPositionByRecomend,
+  } = useBusinessRecomendPlaceMap();
   (window as any).setCenterPlaceByRecomand = setCenterPlaceByRecomand;
+  (window as any).panToGeoPositionByRecomend = panToGeoPositionByRecomend;
   return () => {
     return (
       <div>
@@ -80,7 +60,6 @@ export const DemoBusinessRecomendPlace = defineSetup(function DemoBusinessRecome
         {centerPlace.cityName} | {centerPlace.countryName} <br />
         <SomeAutoComplete cityName="Taiwan"></SomeAutoComplete>
         <BusinessRecomendPlaceMap
-          log
           class={css.demo}
           unavailableTitle={"当前区域暂未开通服务"}
           noRecomendDescription={"附近无推荐上车地点"}

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

@@ -56,8 +56,6 @@ export const BusinessRecomendPlaceMap = defineLagecySetup(
       centerPlace.lat = point[1];
       updatePlace();
     };
-    mapContext.setCenterPlaceByRecomand = setCenterPlaceByRecomand;
-    mapContext.panTo = panTo;
     const setCenterByPlace = (place: Place) => {
       centerSource.source = "api";
       centerPlace.lng = place.lng;
@@ -65,7 +63,7 @@ export const BusinessRecomendPlaceMap = defineLagecySetup(
       centerPlace.name = place.name;
     };
 
-    const { geoPosition } = useGeoLocation({
+    const { geoPosition, geoError } = useGeoLocation({
       geoDefaultPosition,
       onLoad: async (value) => {
         // geo 主入口
@@ -88,6 +86,12 @@ export const BusinessRecomendPlaceMap = defineLagecySetup(
       onChange: (v) => emit("changeGeoLocation", v),
       onError: (e) => emit("geoError", e),
     });
+    mapContext.setCenterPlaceByRecomand = setCenterPlaceByRecomand;
+    mapContext.panToGeoPositionByRecomend = () => {
+      if (geoError.value) return false;
+      setCenterPlaceByRecomand(geoPosition.value);
+      return true;
+    };
     const { isDragging } = useMapDrag({
       mapRef,
       onChange: (point) => {

package/src/hooks-business/useBusinessRecomendPlaceMap.ts

@@ -3,7 +3,7 @@ import { useMapGeometry } from "../hooks/useMapGeometry";
 import type { Place, Point } from "../types/interface";
 
 export interface BusinessRecomendPlaceContext {
-  panTo: (value: Point) => void;
+  panToGeoPositionByRecomend: (value: Point) => void;
   setCenterPlaceByRecomand: (value: Point) => void;
   onChangeCenterPlace: (value: Place) => void;
   onChangeRecomendPlaces: (value: Place[]) => void;
@@ -18,11 +18,11 @@ export const useBusinessRecomendPlaceMap = () => {
   });
   const placeCandidates = ref<Place[]>([]);
   const { apiMapDistance } = useMapGeometry();
-  const panTo = (value: Point) => mapContext.panTo(value);
+  const panToGeoPositionByRecomend = (value: Point) => mapContext.panToGeoPositionByRecomend(value);
   const setCenterPlaceByRecomand = (value: Point) => mapContext.setCenterPlaceByRecomand(value);
   const mapContext: BusinessRecomendPlaceContext = {
-    panTo: () => {
-      throw new Error("MyError: panTo used before assigned");
+    panToGeoPositionByRecomend: () => {
+      throw new Error("MyError: panToGeoPositionByRecomend used before assigned");
     },
     setCenterPlaceByRecomand: () => {
       throw new Error("MyError: setCenterPlaceByRecomand used before assigned");
@@ -38,7 +38,7 @@ export const useBusinessRecomendPlaceMap = () => {
     mapContext,
     centerPlace,
     placeCandidates,
-    panTo,
+    panToGeoPositionByRecomend,
     setCenterPlaceByRecomand,
     apiMapDistance,
   };

package/todo.md

@@ -26,6 +26,4 @@ https://dawchihliou.github.io/articles/building-custom-google-maps-marker-react-
 
 ---
 
-1. apiDistance 在 created 生命周期里调用的时候，即便设置了 5 秒延迟，运行到 api 内部的时候 status === 'loading'
-2. getRecomend 接口需要增加一个返回参数，表示当前地区是否可以提供服务
-3. 孙明 刚才传入 complted 状态，地图未显示
+1. 定位失败的视觉稿文字提示