@heycar/heycars-map 0.2.9 → 0.2.10

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.10",
   "type": "module",
   "scripts": {
     "dev": "vite -c vite.config.dev.ts",

package/src/App.tsx

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

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

@@ -2,6 +2,7 @@ import { ref, watch } from "vue-demi";
 import { HeycarMap, HeycarMapProps } from "../../components/MapProvider";
 import { useGeoLocation } from "../../hooks/useGeoLocation";
 import { MapMountedProps, onMapMounted } from "../../hooks/useMap";
+import { MapLogProps, useMapLog } from "../../hooks/useMapLog";
 import type { MROP } from "../../hooks/useOverlay";
 import { defineLagecySetup, defineSetup } from "../../types/helper";
 import type { DriverStatus, Place, Point } from "../../types/interface";
@@ -199,11 +200,13 @@ const SectionCanceled = defineSetup((props: SectionCanceledProps, { emit }) => {
 });
 
 export type SectionEndServiceProps = MROP &
+  MapLogProps &
   MapMountedProps & {
     from: Place;
     to: Place;
   };
 export const SectionEndService = defineSetup((props: SectionEndServiceProps, { emit }) => {
+  useMapLog(props, "SectionEndService");
   onMapMounted(() => emit("mapMounted"));
   return () => {
     const { from: fromPlace, to: toPlace, registerOverlay } = props;

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

@@ -3,6 +3,7 @@ import imgPassengerCircle from "../../assets/icons/svg/passenger-circle.svg";
 import imgPlaceCircle from "../../assets/icons/svg/place-circle.svg";
 import { AmapMarker } from "../../components/AmapMarker";
 import { GmapAdvancedMarkerView } from "../../components/GmapAdvancedMarkerView";
+import { MapLogProps, useMapLog } from "../../hooks/useMapLog";
 import { useMapSupplier } from "../../hooks/useMapSupplier";
 import type { AmapOverlay, GmapOverlay, MapRegisterOverlayProps } from "../../hooks/useOverlay";
 import { createElement, defineSetup } from "../../types/helper";
@@ -11,13 +12,14 @@ import { vec2lnglat } from "../../utils/transform";
 
 import * as css from "./PassengerCircle.css";
 
-interface PassengerCircleProps<T> extends MapRegisterOverlayProps<T> {
+interface PassengerCircleProps<T> extends MapRegisterOverlayProps<T>, MapLogProps {
   position: [number, number];
   size?: "small" | "large";
 }
 export const APassengerCircle = defineSetup(function APassengerCircle(
   props: PassengerCircleProps<AmapOverlay>
 ) {
+  useMapLog(props, "APassengerCircle");
   const contentRef = computed(() => {
     const { size = "large" } = props;
     const src = size === "large" ? imgPassengerCircle : imgPlaceCircle;
@@ -40,6 +42,7 @@ export const APassengerCircle = defineSetup(function APassengerCircle(
 export const GPassengerCircle = defineSetup(function GPassengerCircle(
   props: PassengerCircleProps<GmapOverlay>
 ) {
+  useMapLog(props, "GPassengerCircle");
   const contentRef = computed(() => {
     const { size = "large" } = props;
     const src = size === "large" ? imgPassengerCircle : imgPlaceCircle;

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

@@ -1,13 +1,15 @@
+import { MapLogProps, useMapLog } from "../../hooks/useMapLog";
 import { defineSetup } from "../../types/helper";
 import type { Place } from "../../types/interface";
 import { place2point } from "../../utils/transform";
 import { PlaceCircle } from "../PlaceCircle";
 
-export interface PickupPointsProps {
+export interface PickupPointsProps extends MapLogProps {
   places: Place[];
   onClick?: (value: Place) => any;
 }
 export const PickupPoints = defineSetup(function PickupPoints(props: PickupPointsProps, { emit }) {
+  useMapLog(props, "PickupPoints");
   return () => (
     <div>
       {props.places.map((place) => (

package/src/components/MapProvider/MapProvider.tsx

@@ -1,5 +1,6 @@
 import type { SetMap } from "../../hooks/useHeycarMap";
 import { GmapLoaderProps, Status, useMapLoader, UseMapLoaderProps } from "../../hooks/useMapLoader";
+import { MapLogProps, useMapLog } from "../../hooks/useMapLog";
 import { MapSupplierPayolad, provideMapSupplier, useMapSupplier } from "../../hooks/useMapSupplier";
 import { defineLagecySetup } from "../../types/helper";
 import { language2vectorMapForeign, vec2lnglat } from "../../utils/transform";
@@ -25,7 +26,8 @@ export const MapProvider = defineLagecySetup(function MapProvider(
 
 export interface HeycarMapProps
   extends Pick<GmapLoaderProps, "fallback" | "loading">,
-    Pick<AmapProps, "center" | "zoom"> {
+    Pick<AmapProps, "center" | "zoom">,
+    MapLogProps {
   mapRef?: SetMap<AMap.Map> | SetMap<google.maps.Map>;
   onDragEnd?: (value: [number, number]) => any;
 }
@@ -33,6 +35,7 @@ export const HeycarMap = defineLagecySetup(function HeycarMap(
   props: HeycarMapProps,
   { slots, emit }
 ) {
+  useMapLog(props, "HeycarMap");
   const payload = useMapSupplier();
   const gmapDebouncedEmit: GmapProps["onDragEnd"] = ({ target }) => {
     const { lng, lat } = target.getCenter() as google.maps.LatLng;

package/src/hooks/useMapLog.ts

@@ -0,0 +1,12 @@
+import { watchEffect } from "vue-demi";
+
+export interface MapLogProps {
+  log?: boolean;
+}
+
+export const useMapLog = <P extends MapLogProps>(props: P, name: string) => {
+  watchEffect(() => {
+    if (!props.log) return;
+    console.log(`log ${name} props = `, { ...props });
+  });
+};

package/src/hooks/useMapPlace.ts

@@ -33,11 +33,13 @@ export const useAmapPlace = (props: UseMapPlaceProps) => {
             const cityName = addressComponent.city
               ? addressComponent.city
               : addressComponent.province;
+            const countryName = addressComponent.country;
             place.name = name;
             place.lng = lng;
             place.lat = lat;
             place.cityName = cityName;
-            onChange?.({ lng, lat, name, cityName });
+            place.countryName = countryName;
+            onChange?.({ lng, lat, name, cityName, countryName });
             return;
           }
 
@@ -68,10 +70,13 @@ export const useGmapPlace = (props: UseMapPlaceProps) => {
       const { results } = await geocoder.geocode({ language: LANGUAGE, location: { lng, lat } });
       const name = results[0].formatted_address;
       const cityName = geocoderResult2cityName(results[0]);
-      place.name = name;
+      const countryName = results.slice(-1)[0].address_components[0].long_name;
       place.lng = lng;
       place.lat = lat;
-      onChange?.({ lng, lat, name, cityName });
+      place.name = name;
+      place.cityName = cityName;
+      place.countryName = countryName;
+      onChange?.({ lng, lat, name, cityName, countryName });
     }
   );
   return { place, updatePlace };

package/src/types/amap/geocoder.d.ts

@@ -165,6 +165,8 @@ declare global {
     }
 
     export interface AddressComponent {
+      // 国家名称，例如： 日本
+      country: string;
       // 坐标点所在省名称	例如：北京市
       province: string;
       // 坐标点所在城市名称	请注意：当城市是省直辖县时返回为空，以及城市为北京、上海、天津、重庆四个直辖市时，该字段返回为空；省直辖县列表

package/src/types/interface.ts

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

package/src/utils/helper.ts

@@ -0,0 +1,5 @@
+import type { Place } from "../types/interface";
+
+export const isPlace = (place: Partial<Place>): place is Place => {
+  return place.lng !== undefined && place.lat !== undefined;
+};