@heycar/heycars-map 0.2.9 → 0.2.11

package/dist/types/interface.d.ts

@@ -7,7 +7,7 @@ export type Place = {
     lat: number;
     name: string;
     cityName?: string;
-    cityId?: string;
+    countryName?: string;
 };
 export interface AutoCompletePlace extends Place {
     placeId?: string;

package/dist/utils/helper.d.ts

@@ -0,0 +1,2 @@
+import type { Place } from "../types/interface";
+export declare const isPlace: (place: Partial<Place>) => place is Place;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heycar/heycars-map",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "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 { DemoBusinessRecomendPlace } from "./Demo/DemoBusinessRecomendPlace";
+import { DemoBusinessTaxiService } from "./Demo/DemoBusinessTaxiService";
 
 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

@@ -14,13 +14,19 @@ const SomeAutoComplete = defineSetup(function SomeAutoComplete(props: { cityName
   });
   (window as any).setCity = setCity;
   return () => {
-    const list = autoCompletePlaces.value.map((place) => [
-      <input onInput={handleKeywordInput} />,
+    const list = autoCompletePlaces.value.map((place) => (
       <div>
         {place.lng} | {place.lat} | {place.name} | {place.description}
-      </div>,
-    ]);
-    return <div>{list}</div>;
+      </div>
+    ));
+    return (
+      <div>
+        <div>
+          <input onInput={handleKeywordInput} />
+        </div>
+        {list}
+      </div>
+    );
   };
 });
 
@@ -31,6 +37,33 @@ 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" },
@@ -38,24 +71,21 @@ export const DemoBusinessRecomendPlace = defineSetup(function DemoBusinessRecome
   };
   const { centerPlace, placeCandidates, setCenterPlaceByRecomand, mapContext, apiMapDistance } =
     useBusinessRecomendPlaceMap();
-  setTimeout(() => {
-    const distance = apiMapDistance([0, 0], [1, 1]);
-    console.log("distance = ", distance);
-  }, 2000);
   (window as any).setCenterPlaceByRecomand = setCenterPlaceByRecomand;
   return () => {
     return (
       <div>
         placeCandidates: {placeCandidates} <br />
         centerPlace: {centerPlace.lng} | {centerPlace.lat} | {centerPlace.name} |{" "}
-        {centerPlace.cityName} <br />
-        <SomeAutoComplete cityName="上海市"></SomeAutoComplete>
+        {centerPlace.cityName} | {centerPlace.countryName} <br />
+        <SomeAutoComplete cityName="Taiwan"></SomeAutoComplete>
         <BusinessRecomendPlaceMap
+          log
           class={css.demo}
           unavailableTitle={"当前区域暂未开通服务"}
           noRecomendDescription={"附近无推荐上车地点"}
           recomendDescription={"最佳上车地点"}
-          geoDefaultPosition={[121, 31]}
+          geoDefaultPosition={[103.771994, 1.296648]}
           getRecomendPlace={getRecomendPlace}
           mapContext={mapContext}
           onGeoError={(e) => console.log("onGeoError e = ", e)}

package/src/Demo/DemoBusinessTaxiEnd.tsx

@@ -1,13 +1,38 @@
+import { defineComponent } from "vue";
 import { BusinessTaxiEndMap } from "../business-components/BusinessTaxiEndMap";
-import { defineSetup } from "../types/helper";
 import * as css from "./Demo.css";
 
-export const DemoBusinessTaxiEnd = defineSetup(function DemoBusinessTaxiEnd() {
-  return () => (
-    <BusinessTaxiEndMap
-      class={css.demo}
-      from={{ lng: 121.4, lat: 31.2, name: "from place name" }}
-      to={{ lng: 121.5, lat: 31.4, name: "to place name" }}
-    />
-  );
+export const DemoBusinessTaxiEnd = defineComponent({
+  name: "DemoBusinessTaxiEnd",
+  data() {
+    return {
+      from: {},
+      to: {},
+    };
+  },
+  created() {
+    setTimeout(() => {
+      this.from = {
+        lng: 103.7719939,
+        lat: 1.296648,
+        name: "2 College Ave West, Stephen Riady Centre, Singapore 138607",
+      };
+      this.to = {
+        lng: 103.781421,
+        lat: 1.283855,
+        name: "虎豹别墅 (Haw Par Villa)",
+      };
+    }, 2000);
+  },
+  render() {
+    const { from, to } = this;
+    return (
+      <div>
+        <div>
+          {JSON.stringify(from)} | {JSON.stringify(to)}
+        </div>
+        <BusinessTaxiEndMap class={css.demo} from={from} to={to} log />
+      </div>
+    );
+  },
 });

package/src/Demo/DemoBusinessTaxiService.tsx

@@ -1,32 +1,58 @@
+import { defineComponent } from "vue";
 import { BusinessTaxiServiceMap } from "../business-components/BusinessTaxiServiceMap/BusinessTaxiServiceMap";
 import { useBusinessTaxiServiceMap } from "../hooks-business/useBusinessTaxiServiceMap";
-import { defineSetup } from "../types/helper";
-import type { Point } from "../types/interface";
+import type { Place, Point } from "../types/interface";
+import { isPlace } from "../utils/helper";
 import * as css from "./Demo.css";
 
-export const DemoBusinessTaxiService = defineSetup(function DemoBusinessTaxiService() {
-  const { setMap, registerFitVeiw } = useBusinessTaxiServiceMap();
-  const getDriverPosition = () => Promise.resolve([121.42, 31.25] as Point);
-  return () => (
-    <BusinessTaxiServiceMap
-      class={css.demo}
-      from={{ lng: 121.4, lat: 31.2, name: "from place name" }}
-      to={{ lng: 121.5, lat: 31.4, name: "to place name" }}
-      driverStatus="completed"
-      bookDispatchingTitle="2月14日 11:00 用车"
-      bookDispatchedTitle="司机位置将在临近出发时间展示"
-      dispatchingTitle="正在为您搜索附近司机"
-      driverArrivedTitle="司机已等待 00:35"
-      renderStartSerivceTitle={({ distance, duration }) =>
-        `距你*${distance}*公里, *${duration}*分钟`
-      }
-      renderInServiceTitle={({ distance, duration }) =>
-        `距离终点${distance}公里, 预计${duration}分钟`
-      }
-      getDriverPosition={getDriverPosition}
-      interval={5000}
-      mapRef={setMap}
-      registerOverlay={registerFitVeiw}
-    />
-  );
+export const DemoBusinessTaxiService = defineComponent({
+  setup() {
+    const { setMap, registerFitVeiw } = useBusinessTaxiServiceMap();
+    return { setMap, registerFitVeiw };
+  },
+  data() {
+    return {
+      from: {} as Partial<Place>,
+      to: {} as Partial<Place>,
+    };
+  },
+  created() {
+    setTimeout(() => {
+      this.from = { lng: 121.4, lat: 31.2, name: "from place name" };
+      this.to = { lng: 121.5, lat: 31.4, name: "to place name" };
+    }, 1000);
+  },
+  methods: {
+    getDriverPosition() {
+      return Promise.resolve([121.42, 31.25] as Point);
+    },
+  },
+  render() {
+    const { setMap, getDriverPosition, registerFitVeiw, from, to } = this;
+    const isReady = isPlace(from) && isPlace(to);
+    if (!isReady) return null;
+    return (
+      <BusinessTaxiServiceMap
+        class={css.demo}
+        from={from}
+        to={to}
+        driverStatus="completed"
+        bookDispatchingTitle="2月14日 11:00 用车"
+        bookDispatchedTitle="司机位置将在临近出发时间展示"
+        dispatchingTitle="正在为您搜索附近司机"
+        driverArrivedTitle="司机已等待 00:35"
+        renderStartSerivceTitle={({ distance, duration }) =>
+          `距你*${distance}*公里, *${duration}*分钟`
+        }
+        renderInServiceTitle={({ distance, duration }) =>
+          `距离终点${distance}公里, 预计${duration}分钟`
+        }
+        getDriverPosition={getDriverPosition}
+        interval={5000}
+        mapRef={setMap}
+        registerOverlay={registerFitVeiw}
+        log
+      />
+    );
+  },
 });

package/src/api/contants.ts

@@ -0,0 +1,3 @@
+import type { Point } from "../types/interface";
+
+export const BEIJIN_POINT: Point = [116.2317, 39.5427];

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

@@ -3,6 +3,7 @@ import imgArrowRight from "../../assets/icons/svg/arrow-right.svg";
 import imgPlaceCircle from "../../assets/icons/svg/place-circle.svg";
 import { AmapMarker } from "../../components/AmapMarker";
 import { GmapAdvancedMarkerView } from "../../components/GmapAdvancedMarkerView/GmapAdvancedMarkerView";
+import { MapLogProps, useMapLog } from "../../hooks/useMapLog";
 import { useMapSupplier } from "../../hooks/useMapSupplier";
 import { createElement, defineSetup } from "../../types/helper";
 import type { Point } from "../../types/interface";
@@ -11,13 +12,14 @@ import { vec2lnglat } from "../../utils/transform";
 import { AAddressLocator, GAddressLocator } from "../AddressLocator";
 import * as css from "./AddressBox.css";
 
-export interface AddressBoxProps {
+export interface AddressBoxProps extends MapLogProps {
   type: "box" | "locator";
   position: Point;
   title: string;
   description?: string;
 }
 export const AAddressBox = defineSetup(function AAddressBox(props: AddressBoxProps) {
+  useMapLog(props, "AAddressBox");
   const contentRef = computed(
     () => `
       <div class="${css.addressBoxLayout}">
@@ -42,6 +44,7 @@ export const AAddressBox = defineSetup(function AAddressBox(props: AddressBoxPro
 });
 
 export const GAddressBox = defineSetup(function GAddressBox(props: AddressBoxProps) {
+  useMapLog(props, "GAddressBox");
   const contentRef = computed(() =>
     createDom(
       "div",

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

@@ -4,6 +4,7 @@ import type { BusinessRecomendPlaceContext } from "../../hooks-business/useBusin
 import { useGeoLocation, UseGeoLocationProps } from "../../hooks/useGeoLocation";
 import { useHeycarMap } from "../../hooks/useHeycarMap";
 import { useMapDrag, UseMapDragProps } from "../../hooks/useMapDrag";
+import { MapLogProps, useMapLog } from "../../hooks/useMapLog";
 import type { UseMapPlaceProps } from "../../hooks/useMapPlace";
 import { useMapRecomendPlace, UseMapRecomendPlaceProps } from "../../hooks/useMapRecomendPlace";
 import { useMapSupplier } from "../../hooks/useMapSupplier";
@@ -20,7 +21,8 @@ export interface CenterPlaceSource {
 }
 export interface BusinessRecomendPlaceMapProps
   extends Omit<HeycarMapProps, "center" | "zoom" | "mapRef">,
-    Pick<UseMapRecomendPlaceProps<CenterPlaceSource>, "getRecomendPlace"> {
+    Pick<UseMapRecomendPlaceProps<CenterPlaceSource>, "getRecomendPlace">,
+    MapLogProps {
   unavailableTitle: string;
   recomendDescription: string;
   noRecomendDescription: string;
@@ -36,6 +38,7 @@ export interface BusinessRecomendPlaceMapProps
 }
 export const BusinessRecomendPlaceMap = defineLagecySetup(
   (props: BusinessRecomendPlaceMapProps, { emit }) => {
+    useMapLog(props, "BusinessRecomendPlaceMap");
     const { geoDefaultPosition, getRecomendPlace, mapContext } = props;
     const { mapRef, setMap, panTo } = useHeycarMap();
     const { readyPromise } = useMapSupplier();
@@ -141,20 +144,22 @@ export const BusinessRecomendPlaceMap = defineLagecySetup(
         ? props.recomendDescription
         : props.noRecomendDescription;
       return (
-        <HeycarMap center={centerPoint.value} zoom={18} mapRef={setMap}>
+        <HeycarMap center={centerPoint.value} zoom={18} mapRef={setMap} log={props.log}>
           <PassengerCircle position={geoPosition.value} />
-          <PickupPoints places={placeCandidates.value} onClick={setCenterByPlace} />
+          <PickupPoints places={placeCandidates.value} onClick={setCenterByPlace} log={props.log} />
           <AddressBox
             position={centerPoint.value}
             title={availableRef.value ? centerPlace.name : props.unavailableTitle}
             description={description}
             type={isDragging.value ? "locator" : "box"}
+            log={props.log}
           />
         </HeycarMap>
       );
     };
   }
 ).props([
+  "log",
   "unavailableTitle",
   "recomendDescription",
   "noRecomendDescription",

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

@@ -1,16 +1,20 @@
+import { BEIJIN_POINT } from "../../api/contants";
 import { HeycarMap } from "../../components/MapProvider";
 import { useHeycarMap } from "../../hooks/useHeycarMap";
 import { useMapFitView } from "../../hooks/useMapFitView";
+import { MapLogProps, useMapLog } from "../../hooks/useMapLog";
 import { defineSetup } from "../../types/helper";
-import type { Place } from "../../types/interface";
+import type { Place, Point } from "../../types/interface";
+import { isPlace } from "../../utils/helper";
 import { place2point } from "../../utils/transform";
 import { SectionEndService } from "../BusinessTaxiServiceMap";
 
-export interface BusinessTaxiEndMapProps {
-  from: Place;
-  to: Place;
+export interface BusinessTaxiEndMapProps extends MapLogProps {
+  from: Partial<Place>;
+  to: Partial<Place>;
 }
 export const BusinessTaxiEndMap = defineSetup((props: BusinessTaxiEndMapProps) => {
+  useMapLog(props, "BusinessTaxiEndMap");
   const { mapRef, setMap } = useHeycarMap();
   const { registerFitVeiw, setFitView } = useMapFitView({
     mapRef,
@@ -19,14 +23,20 @@ export const BusinessTaxiEndMap = defineSetup((props: BusinessTaxiEndMapProps) =
   });
   return () => {
     const { from, to } = props;
+    const isReady = isPlace(from) && isPlace(to);
+    const center = isReady ? place2point(from) : ([...BEIJIN_POINT] as Point);
+    const zoom = isReady ? 13 : 3;
     return (
-      <HeycarMap center={place2point(from)} zoom={13} mapRef={setMap}>
-        <SectionEndService
-          from={from}
-          to={to}
-          registerOverlay={registerFitVeiw}
-          onMapMounted={setFitView}
-        />
+      <HeycarMap center={center} zoom={zoom} mapRef={setMap} log={props.log}>
+        {isReady && (
+          <SectionEndService
+            from={from}
+            to={to}
+            registerOverlay={registerFitVeiw}
+            onMapMounted={setFitView}
+            log={props.log}
+          />
+        )}
       </HeycarMap>
     );
   };