@heycar/heycars-map 0.1.6 → 0.1.8

package/dist/types/interface.d.ts

@@ -6,4 +6,18 @@ export type Place = {
     lng: number;
     lat: number;
     name: string;
+    cityName?: string;
+};
+export interface AutoCompletePlace extends Place {
+    placeId?: string;
+    description: string;
+}
+export type City = {
+    bound?: {
+        east: number;
+        north: number;
+        south: number;
+        west: number;
+    };
+    name: string;
 };

package/dist/utils/transform.d.ts

@@ -12,3 +12,4 @@ export type VectorMapForeign = "style_en" | "style_local" | "style_zh_cn";
 export declare const language2vectorMapForeign: (lang: "en" | "zh") => VectorMapForeign;
 export declare const place2point: (place: Place) => Point;
 export declare const pipeAsync: <P extends any[]>(fn?: ((...args: P) => any) | undefined) => (...args: P) => void;
+export declare const geocoderResult2cityName: (value: google.maps.GeocoderResult) => string | undefined;

package/package.json

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

package/src/App.tsx

@@ -5,6 +5,7 @@ export const App = defineComponent({
   setup() {
     // return () => <Hello class={"helloclass2"} qyc={2} style={{ color: "red" }} />;
     // return () => <GBusinessDemo />;
+    // return () => <SearchDemo />;
     return () => <HeycarDemo />;
   },
 });

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

@@ -1,15 +1,16 @@
 import { defineSetup } from "../../types/helper";
+import type { Place } from "../../types/interface";
+import { place2point } from "../../utils/transform";
 import { PlaceCircle } from "../PlaceCircle";
 
 export interface PickupPointsProps {
-  positions: [number, number][];
-  labels: string[];
+  places: Place[];
 }
 export const PickupPoints = defineSetup(function PickupPoints(props: PickupPointsProps) {
   return () => (
     <div>
-      {props.positions.map((position, idx) => (
-        <PlaceCircle position={position} label={props.labels[idx]} textAlign="left" />
+      {props.places.map((place) => (
+        <PlaceCircle position={place2point(place)} label={place.name} textAlign="left" />
       ))}
     </div>
   );

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

@@ -0,0 +1,48 @@
+import { reactive, VNodeData } from "vue-demi";
+import { useAmap } from "../../components/Amap/useAmap";
+import { useGmap } from "../../components/Gmap/useGmap";
+import { useMapSupplier } from "../../components/MapProvider/useMapSupplier";
+import { useAmapAngle, useGmapAngle } from "../../hooks/useMapAngle";
+import {
+  useAWalkingRoute,
+  useGWalkingRoute,
+  UseWalkingRouteProps,
+} from "../../hooks/useWalkingRoute";
+import { createElement, defineSetup, VNodeChild } from "../../types/helper";
+import type { Point } from "../../types/interface";
+
+export type WalkingRouteRenderProps = {
+  path: Point[];
+  angle?: number;
+};
+export interface WalkingRouteProps extends UseWalkingRouteProps {
+  render?: (props: WalkingRouteRenderProps) => VNodeChild;
+}
+export const AWalkingRoute = defineSetup(function WalkingRoute(
+  props: WalkingRouteProps,
+  { slots }
+) {
+  const map = useAmap();
+  const path = useAWalkingRoute(props);
+  const angle = useAmapAngle(reactive({ path, map }));
+  return () => <div>{slots.render?.(reactive({ path, angle }))}</div>;
+});
+
+export const GWalkingRoute = defineSetup(function WalkingRoute(
+  props: WalkingRouteProps,
+  { slots }
+) {
+  const map = useGmap();
+  const path = useGWalkingRoute(props);
+  const angle = useGmapAngle(reactive({ path, map }));
+  return () => <div>{slots.render?.(reactive({ path, angle }))}</div>;
+});
+
+export const WalkingRoute = defineSetup(function WalkingRoute(props: WalkingRouteProps, { slots }) {
+  const { supplier } = useMapSupplier();
+  return () =>
+    createElement(supplier === "gmap" ? GWalkingRoute : AWalkingRoute, {
+      attrs: props,
+      scopedSlots: slots as VNodeData["scopedSlots"],
+    });
+});

package/src/business-components/WalkingRoute/index.ts

@@ -0,0 +1 @@
+export * from "./WalkingRoute";

package/src/components/Demo/HeycarDemo.tsx

@@ -1,7 +1,8 @@
 import { AddressBox } from "../../business-components/AddressBox";
-import { DrivingLine } from "../../business-components/DrivingLine";
-import { DrivingRoute } from "../../business-components/DrivingRoute";
-import { TaxiCar } from "../../business-components/TaxiCar";
+import { PickupPoints } from "../../business-components/PickupPoints";
+import { WalkingLine } from "../../business-components/WalkingLine";
+import { WalkingRoute } from "../../business-components/WalkingRoute";
+import { useBusinessMapAutoComplete } from "../../hooks-business/useBusinessMapAutoComplete";
 import {
   useBusinessMapRecomendPlace,
   UseBusinessMapRecomendPlaceProps,
@@ -23,14 +24,45 @@ export const HeycarDemo = defineSetup(function HeycarDemo() {
       amapSecret={amapApiSecret}
       gmapId={gmapId}
       gmapKey={gmapApiKey}
-      supplier={"amap"}
+      supplier={"gmap"}
     >
-      <SomePage />
+      <SomeHomePage />
     </MapProvider>
   );
 });
 
 export const SomePage = defineSetup(function Hello() {
+  const { mapRef, setMap } = useHeycarMap();
+  const cityName = "上海市";
+  const { autoCompletePlaces, setKeyword, setCity } = useBusinessMapAutoComplete({
+    mapRef,
+    defaultCityName: cityName,
+  });
+  (window as any).setKeyword = setKeyword;
+  (window as any).setCity = setCity;
+  return () => {
+    const list = autoCompletePlaces.value.map((place) => (
+      <div>
+        {place.lng} | {place.lat} | {place.name} | {place.description}
+      </div>
+    ));
+    return (
+      <div>
+        <div>{list}</div>
+        <HeycarMap
+          class={css.demo}
+          fallback={() => <div>error</div>}
+          loading={() => <div>loading</div>}
+          center={[131, 21]}
+          zoom={3}
+          mapRef={setMap}
+        ></HeycarMap>
+      </div>
+    );
+  };
+});
+
+export const SomeHomePage = defineSetup(function Hello() {
   const { mapRef, setMap, panTo } = useHeycarMap();
   const getRecomendPlace: UseBusinessMapRecomendPlaceProps["getRecomendPlace"] = async (
     place,
@@ -40,8 +72,17 @@ export const SomePage = defineSetup(function Hello() {
     console.log("getRecomendPlace context?.source = ", context?.source);
     return [{ lat: lat + 0.0001, lng: lng + 0.0001, name: "place name 1" }];
   };
-  const { centerPlace, centerPoint, isDragging, isGeoLoading } = useBusinessMapRecomendPlace({
+  const {
+    centerPlace,
+    centerPoint,
+    placeCandidates,
+    isDragging,
+    geoLoading,
+    geoPosition,
+    setCenterPlaceByRecomand,
+  } = useBusinessMapRecomendPlace({
     mapRef,
+    defaultCenterPoint: [131, 31],
     recomendPlaceGeoLimit: 300,
     recomendPlaceDragLimit: 30,
     getRecomendPlace,
@@ -49,13 +90,15 @@ export const SomePage = defineSetup(function Hello() {
     onChangePlace: (v) => console.log("onChangePlace: ", v),
     onChangeRecomandPlace: (v) => console.log("onChangeRecomandPlace: ", v),
   });
-  (window as any).panTo = panTo;
+  (window as any).setCenterPlaceByRecomand = setCenterPlaceByRecomand;
   return () => {
     return (
       <div>
-        isGeoLoading: {`${isGeoLoading.value}`} <br />
+        geoLoading: {`${geoLoading.value}`} <br />
         isDragging: {`${isDragging.value}`} <br />
-        {centerPlace.lng} | {centerPlace.lat} | {centerPlace.name} <br />
+        geoPosition: {geoPosition.value[0]} | {geoPosition.value[1]} <br />
+        centerPlace: {centerPlace.lng} | {centerPlace.lat} | {centerPlace.name} |{" "}
+        {centerPlace.cityName} <br />
         <HeycarMap
           class={css.demo}
           fallback={() => <div>error</div>}
@@ -64,6 +107,7 @@ export const SomePage = defineSetup(function Hello() {
           zoom={15}
           mapRef={setMap}
         >
+          <PickupPoints places={placeCandidates.value} />
           <AddressBox
             type="box"
             position={centerPoint.value}
@@ -78,13 +122,18 @@ export const SomePage = defineSetup(function Hello() {
             ]}
             labels={["place name 1", "place name 2"]}
           /> */}
-          <DrivingRoute
+          {/* <DrivingRoute
             from={[121, 31]}
             to={[121.6, 31.3]}
             render={({ path, angle }) => [
               <DrivingLine path={path} />,
               <TaxiCar position={[121, 31]} angle={angle} />,
             ]}
+          /> */}
+          <WalkingRoute
+            from={centerPoint.value}
+            to={[centerPoint.value[0] + 0.1, centerPoint.value[1] + 0.1]}
+            render={({ path }) => <WalkingLine path={path} />}
           />
         </HeycarMap>
       </div>

package/src/components/Demo/SearchDemo.tsx

@@ -0,0 +1,167 @@
+import { watchPostEffect } from "vue-demi";
+import { useHeycarMap } from "../../hooks/useHeycarMap";
+import { defineSetup } from "../../types/helper";
+import { HeycarMap, MapProvider } from "../MapProvider/MapProvider";
+import { citiesWithCountry } from "./country";
+import * as css from "./Demo.css";
+import { searchResult } from "./searchResult";
+
+const gmapApiKey = import.meta.env.VITE_GMAP_API_KEY;
+const gmapId = import.meta.env.VITE_GMAP_MAP_ID;
+const amapApiKey = import.meta.env.VITE_AMAP_API_KEY;
+const amapApiSecret = import.meta.env.VITE_AMAP_API_SECRET;
+
+export const SearchDemo = defineSetup(function HeycarDemo() {
+  return () => (
+    <MapProvider
+      amapKey={amapApiKey}
+      amapSecret={amapApiSecret}
+      gmapId={gmapId}
+      gmapKey={gmapApiKey}
+      supplier={"gmap"}
+    >
+      <SomePage />
+    </MapProvider>
+  );
+});
+
+const SomePage = defineSetup(function Hello() {
+  const { mapRef, setMap, panTo } = useHeycarMap();
+  (window as any).panTo = panTo;
+  watchPostEffect(() => {
+    const map = mapRef.value as google.maps.Map;
+    if (!map) return;
+    const searchName = async (idx: number, address: string, country: string) => {
+      const geocoder = new google.maps.Geocoder();
+      // const placeService = new google.maps.places.PlacesService(document.createElement("div"));
+      const { results } = await geocoder.geocode({
+        address,
+        componentRestrictions: {
+          country,
+          administrativeArea: "administrative_area_level_1",
+        },
+        language: "en",
+      });
+      if (results?.length === 2) {
+        const [result1, result2] = results;
+        const isResult1Admin = result1.types[0].startsWith("administrative_area_level_");
+        const isResult2Admin = result2.types[0].startsWith("administrative_area_level_");
+        if (isResult1Admin && !isResult2Admin) {
+          return result1.geometry.bounds?.toJSON();
+        }
+        if (isResult2Admin && !isResult1Admin) {
+          return result2.geometry.bounds?.toJSON();
+        }
+      }
+      if (results?.length !== 1) {
+        console.warn("length !== 1 by idx, keyword, results = ", idx, address, results);
+        return undefined;
+      }
+      const { geometry } = results[0];
+      return geometry.bounds?.toJSON() ?? geometry.viewport.toJSON();
+
+      // const autocompleteService = new google.maps.places.AutocompleteService();
+      // const placeService = new google.maps.places.PlacesService(map);
+      // const { predictions } = await autocompleteService.getPlacePredictions({
+      //   input: "麦当劳",
+      //   language: "zh",
+      //   componentRestrictions: {
+      //     country: "CN",
+      //   },
+      //   bounds: {
+      //     // north: 122.3172401,
+      //     // east: 31.8675299,
+      //     // south: 120.8559198,
+      //     // west: 30.6703899,
+      //     north: 31.8675299,
+      //     east: 122.3172401,
+      //     south: 30.6703899,
+      //     west: 120.8559198,
+      //   },
+      // });
+      // console.log("predictions = ", predictions);
+      // if (results.length !== 1) {
+      //   console.log("results = ", results);
+      //   throw new Error("MyError, results.length !== 1");
+      // }
+      // const placeId = results[0].place_id;
+      // const { results: accurateResults } = await geocoder.geocode({ placeId });
+      // if (accurateResults.length !== 1) {
+      //   console.log("results = ", accurateResults);
+      //   throw new Error("MyError, accurateResults.length !== 1");
+      // }
+      // const detail = accurateResults[0];
+      // console.log("detail = ", detail);
+
+      // placeService.getDetails({ placeId }, (result, status) => {
+      //   if (status !== google.maps.places.PlacesServiceStatus.OK) {
+      //     console.log("result, status = ", result, status);
+      //     throw new Error("My Error getDetails status !== ok");
+      //   }
+      //   console.log("detail = ", result);
+      // });
+    };
+    const wait = (seconds: number) => new Promise((r) => setTimeout(r, seconds * 1000));
+    const search = async (from: number, to: number) => {
+      const citiesSample = citiesWithCountry.slice(from, to);
+      const result: { name: string; country: string; bound: any }[] = [];
+      let idx = from;
+      try {
+        for (const city of citiesSample) {
+          if (idx % 10 === 0) {
+            console.log("start processing idx = ", idx);
+          }
+          const bound = await searchName(idx, city.name, city.country);
+          await wait(2);
+          result.push({ name: city.name, country: city.country, bound: bound ?? null });
+          idx += 1;
+        }
+        console.log("success search result = ");
+        console.log(JSON.stringify(result));
+      } catch (e) {
+        console.log("failed search break idx = ", idx);
+        console.log(JSON.stringify(result));
+        throw e;
+      }
+    };
+
+    const searchRest = async () => {
+      const notfound = searchResult.filter((item) => item.bound == null);
+      const result: { name: string; country: string; bound: any }[] = [];
+      try {
+        for (const city of notfound) {
+          try {
+            const bound = await searchName(0, city.name, city.country);
+            await wait(2);
+            result.push({ name: city.name, country: city.country, bound: bound ?? null });
+          } catch (e) {
+            console.warn("fail search name, country = ", city.name, city.country);
+            console.error(e);
+            continue;
+          }
+        }
+        console.log("success search result = ");
+        console.log(JSON.stringify(result));
+      } catch (e) {
+        console.log(JSON.stringify(result));
+        throw e;
+      }
+    };
+    (window as any).search = search;
+    (window as any).searchRest = searchRest;
+  });
+  return () => {
+    return (
+      <div>
+        <HeycarMap
+          class={css.demo}
+          fallback={() => <div>error</div>}
+          loading={() => <div>loading</div>}
+          center={[121, 31]}
+          zoom={15}
+          mapRef={setMap}
+        ></HeycarMap>
+      </div>
+    );
+  };
+});