@heycar/heycars-map 0.2.12 → 0.3.1

package/src/business-components/AbsoluteAddressBox/AbsoluteAddressBox.css.ts

@@ -0,0 +1,66 @@
+import { style } from "@vanilla-extract/css";
+
+export const absoluteAddressBoxLayout = style({
+  position: "absolute",
+  bottom: "50%",
+  left: 0,
+  right: 0,
+  marginLeft: "auto",
+  marginRight: "auto",
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  zIndex: 1,
+});
+
+export const absoluteAddressBox = style({
+  padding: "2.67vw 4.27vw",
+  background: "linear-gradient(90deg, #79AFFF 0%, #5C8DFF 32%, #507FFF 75%, #4471FF 100%)",
+  borderRadius: "3.2vw",
+  display: "flex",
+  alignItems: "center",
+});
+
+export const boxTextLayout = style({
+  paddingRight: "2.67vw",
+  maxWidth: "41.33vw",
+});
+
+export const boxTitle = style({
+  display: "-webkit-box",
+  fontSize: "3.47vw",
+  fontFamily: "PingFangSC-Semibold, PingFang SC",
+  fontWeight: 600,
+  color: "#FFFFFF",
+  lineHeight: "4.8vw",
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: "vertical",
+  overflow: "hidden",
+});
+
+export const boxDescription = style({
+  marginTop: "0.53vw",
+  fontSize: "2.93vw",
+  fontFamily: "PingFangSC-Regular, PingFang SC",
+  fontWeight: 400,
+  color: "#FFFFFF",
+  lineHeight: "4.27vw",
+  opacity: 0.8,
+});
+
+export const arrowRight = style({
+  width: "1.758vw",
+  height: "2.93vw",
+});
+
+export const straightLine = style({
+  width: "0.8vw",
+  height: "4vw",
+  background: "#4C80FF",
+  borderRadius: "0vw 0vw 26.67vw 26.67vw",
+});
+
+export const locatorIcon = style({
+  width: "6.9355vw",
+  height: "10.67vw",
+});

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

@@ -1,8 +1,39 @@
+import imgAddressLocator from "../../assets/icons/svg/address-locator.svg";
+import imgArrowRight from "../../assets/icons/svg/arrow-right.svg";
+import type { MapLogProps } from "../../hooks/useMapLog";
 import { defineSetup } from "../../types/helper";
-import type { AddressBoxProps } from "../AddressBox";
+import * as css from "./AbsoluteAddressBox.css";
 
-export const AbsoluteAddressBox = defineSetup((props: AddressBoxProps) => {
+export interface AbsoluteAddressBoxProps extends MapLogProps {
+  type: "box" | "locator";
+  title: string;
+  description?: string;
+  onClick?: () => any;
+}
+export const AbsoluteAddressBox = defineSetup(function AbsoluteAddressBox(
+  props: AbsoluteAddressBoxProps,
+  { emit }
+) {
+  const handleClick = () => emit("click");
   return () => {
-    return <div></div>;
+    const { type, title, description } = props;
+    if (type === "locator")
+      return (
+        <div class={css.absoluteAddressBoxLayout}>
+          <img class={css.locatorIcon} src={imgAddressLocator} />
+        </div>
+      );
+    return (
+      <div class={css.absoluteAddressBoxLayout}>
+        <div class={css.absoluteAddressBox} onClick={handleClick}>
+          <div class={css.boxTextLayout}>
+            <div class={css.boxTitle}>{title}</div>
+            {description && <div class={css.boxDescription}>{description}</div>}
+          </div>
+          <img class={css.arrowRight} src={imgArrowRight} />
+        </div>
+        <i class={css.straightLine} />
+      </div>
+    );
   };
 });

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

@@ -9,14 +9,12 @@ import { createElement, defineSetup } from "../../types/helper";
 import type { Point } from "../../types/interface";
 import { createDom } from "../../utils/dom";
 import { vec2lnglat } from "../../utils/transform";
+import type { AbsoluteAddressBoxProps } from "../AbsoluteAddressBox";
 import { AAddressLocator, GAddressLocator } from "../AddressLocator";
 import * as css from "./AddressBox.css";
 
-export interface AddressBoxProps extends MapLogProps {
-  type: "box" | "locator";
+export interface AddressBoxProps extends MapLogProps, AbsoluteAddressBoxProps {
   position: Point;
-  title: string;
-  description?: string;
 }
 export const AAddressBox = defineSetup(function AAddressBox(props: AddressBoxProps) {
   useMapLog(props, "AAddressBox");

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

@@ -10,7 +10,7 @@ import { useMapRecomendPlace, UseMapRecomendPlaceProps } from "../../hooks/useMa
 import { useMapSupplier } from "../../hooks/useMapSupplier";
 import { defineLagecySetup } from "../../types/helper";
 import type { Place, Point } from "../../types/interface";
-import { AddressBox } from "../AddressBox";
+import { AbsoluteAddressBox, AbsoluteAddressBoxProps } from "../AbsoluteAddressBox";
 import { PassengerCircle } from "../PassengerCircle";
 import { PickupPoints } from "../PickupPoints";
 
@@ -35,12 +35,13 @@ export interface BusinessRecomendPlaceMapProps
   onChangePlace?: UseMapPlaceProps["onChange"];
   onChangeRecomandPlace?: UseMapRecomendPlaceProps["onChange"];
   onGeoError?: UseGeoLocationProps["onError"];
+  onClickLocator?: AbsoluteAddressBoxProps["onClick"];
 }
 export const BusinessRecomendPlaceMap = defineLagecySetup(
   (props: BusinessRecomendPlaceMapProps, { emit }) => {
     useMapLog(props, "BusinessRecomendPlaceMap");
     const { geoDefaultPosition, getRecomendPlace, mapContext } = props;
-    const { mapRef, setMap, panTo } = useHeycarMap();
+    const { mapRef, setMap } = useHeycarMap();
     const { readyPromise } = useMapSupplier();
     const centerPlace = reactive<Place>({
       lng: geoDefaultPosition?.[0] ?? 0,
@@ -151,12 +152,12 @@ export const BusinessRecomendPlaceMap = defineLagecySetup(
         <HeycarMap center={centerPoint.value} zoom={18} mapRef={setMap} log={props.log}>
           <PassengerCircle position={geoPosition.value} />
           <PickupPoints places={placeCandidates.value} onClick={setCenterByPlace} log={props.log} />
-          <AddressBox
-            position={centerPoint.value}
+          <AbsoluteAddressBox
             title={availableRef.value ? centerPlace.name : props.unavailableTitle}
             description={description}
             type={isDragging.value ? "locator" : "box"}
             log={props.log}
+            onClick={() => emit("clickLocator")}
           />
         </HeycarMap>
       );

package/src/components/Amap/Amap.css.ts

@@ -1,3 +1,5 @@
 import { style } from "@vanilla-extract/css";
 
-export const amap = style({});
+export const amap = style({
+  position: "relative",
+});

package/src/components/Gmap/Gmap.css.ts

@@ -0,0 +1,5 @@
+import { style } from "@vanilla-extract/css";
+
+export const gmap = style({
+  position: "relative",
+});

package/src/components/Gmap/Gmap.ts

@@ -8,6 +8,8 @@ import {
   watchNoneImmediatePostEffectForDeepOption,
   watchPostEffectForGMapEvent,
 } from "../../utils/compare";
+import * as css from "./Gmap.css";
+
 export interface GmapProps extends google.maps.MapOptions {
   mapRef?: SetMap<google.maps.Map>;
   onDragStart?: MapEventHandler<google.maps.Map>;
@@ -50,5 +52,5 @@ export const Gmap = defineSetup(function Gmap(props: GmapProps, { slots, emit })
     }
   );
   watchPostEffectForGMapEvent(mapRef, props, handleDrag, ["onDragStart", "onDragEnd"]);
-  return () => h("div", { ref: elementRef }, slots.default?.());
+  return () => h("div", { ref: elementRef, class: css.gmap }, slots.default?.());
 });

package/src/hooks/useMapAutoComplete.ts

@@ -1,15 +1,17 @@
 import { ref, watch } from "vue-demi";
 import type { AutoCompletePlace, City } from "../types/interface";
+import { MapLogProps, useMapLogVariable } from "./useMapLog";
 import { useMapSupplier } from "./useMapSupplier";
 import { useUpdate } from "./useUdate";
 
-export interface UseMapAutoCompleteProps {
+export interface UseMapAutoCompleteProps extends MapLogProps {
   city: City;
 }
 
 export const useAmapAutoComplete = (props: UseMapAutoCompleteProps) => {
   const { city } = props;
   const cityRef = ref(city);
+  useMapLogVariable(props, "useAmapAutoComplete", cityRef, "cityRef");
   const { readyPromise } = useMapSupplier();
   const keywordRef = ref("");
   const autoCompletePlacesRef = ref<AutoCompletePlace[]>([]);

package/src/hooks/useMapLog.ts

@@ -4,9 +4,21 @@ export interface MapLogProps {
   log?: boolean;
 }
 
-export const useMapLog = <P extends MapLogProps>(props: P, name: string) => {
+export const useMapLog = <P extends MapLogProps>(props: P, prefix: string) => {
   watchEffect(() => {
     if (!props.log) return;
-    console.log(`log ${name} props = `, { ...props });
+    console.log(`log ${prefix} props = `, { ...props });
+  });
+};
+
+export const useMapLogVariable = <P extends MapLogProps>(
+  props: P,
+  prefix: string,
+  variable: any,
+  name: string
+) => {
+  watchEffect(() => {
+    if (!props.log) return;
+    console.log(`log ${prefix} ${name} = `, { ...variable });
   });
 };

package/src/hooks/useMapPlace.ts

@@ -34,12 +34,14 @@ export const useAmapPlace = (props: UseMapPlaceProps) => {
               ? addressComponent.city
               : addressComponent.province;
             const countryName = addressComponent.country;
+            const cityParentName = addressComponent.province;
             place.name = name;
             place.lng = lng;
             place.lat = lat;
             place.cityName = cityName;
+            place.cityParentName = cityParentName;
             place.countryName = countryName;
-            onChange?.({ lng, lat, name, cityName, countryName });
+            onChange?.({ lng, lat, name, cityName, cityParentName, countryName });
             return;
           }
 
@@ -70,13 +72,15 @@ 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]);
+      const cityParentName = results.slice(-2)[0].address_components[0].long_name;
       const countryName = results.slice(-1)[0].address_components[0].long_name;
       place.lng = lng;
       place.lat = lat;
       place.name = name;
       place.cityName = cityName;
+      place.cityParentName = cityParentName;
       place.countryName = countryName;
-      onChange?.({ lng, lat, name, cityName, countryName });
+      onChange?.({ lng, lat, name, cityName, cityParentName, countryName });
     }
   );
   return { place, updatePlace };

package/src/hooks-business/useBusinessMapAutoComplete.ts

@@ -1,8 +1,9 @@
 import type { Ref } from "vue-demi";
 import { useMapAutoComplete } from "../hooks/useMapAutoComplete";
 import { useMapBoundCity } from "../hooks/useMapCityBound";
+import type { MapLogProps } from "../hooks/useMapLog";
 
-export interface UseBusinessMapAutoCompleteProps {
+export interface UseBusinessMapAutoCompleteProps extends MapLogProps {
   cityNameRef: Ref<string>;
 }
 
@@ -12,7 +13,7 @@ export const useBusinessMapAutoComplete = (props: UseBusinessMapAutoCompleteProp
     cityNameRef,
     onChange: (v) => setCity(v),
   });
-  const { autoCompletePlaces, setKeyword, setCity } = useMapAutoComplete({ city });
+  const { autoCompletePlaces, setKeyword, setCity } = useMapAutoComplete({ city, log: props.log });
   const handleKeywordInput = (e: Event) => {
     const target = e.target as HTMLInputElement;
     setKeyword(target.value);

package/src/index.ts

@@ -1,4 +1,5 @@
 import "./style.css";
+export { AbsoluteAddressBox } from "./business-components/AbsoluteAddressBox";
 export { AddressBox } from "./business-components/AddressBox";
 export { BusinessQuotingMap } from "./business-components/BusinessQuotingMap";
 export { BusinessRecomendPlaceMap } from "./business-components/BusinessRecomendPlaceMap";

package/src/types/interface.ts

@@ -7,6 +7,7 @@ export type Place = {
   lat: number;
   name: string;
   cityName?: string;
+  cityParentName?: string;
   countryName?: string;
 };
 

package/todo.md

@@ -2,20 +2,14 @@ https://dawchihliou.github.io/articles/building-custom-google-maps-marker-react-
 
 2. Google 地址名称太长
 3. 中心点 drag 期间位置
-4. place 需要包含 autocomplete 查询需要的信息
-5. 高德地图加载期间出现大量的请求
-6. google/高德 坐标系转化
-7. click 事件
+4. 高德地图加载期间出现大量的请求
+5. google/高德 坐标系转化
 
 ---
 
-1. 需要计算用户与上车点的预估时间 导出
-2. 全程时间与距离导出
 3. 司机接单页起点名称怎么显示 ？
 4. passenger 超过 10 公里 fitview 不考虑怎么设计
-5. home 页面用户 出发点与终点小于 200 米，需要提示，需要导出接口
-6. walkingRoute 显示报错
-7. 需要一个手段让 fitview 初始化起作用
+5. 需要一个手段让 fitview 初始化起作用
 
 ---
 
@@ -27,3 +21,5 @@ https://dawchihliou.github.io/articles/building-custom-google-maps-marker-react-
 ---
 
 1. 定位失败的视觉稿文字提示
+2. 用户手动输入地址，然后跳回 home 页面， centerplace 的 name 不正确
+3. 用户地址搜索，先设置台湾，搜个结果，然后切换城市到新加坡，搜索到结果依然是台湾