@heycar/heycars-map 0.2.12 → 0.3.0

package/dist/style.css

@@ -1 +1 @@
-.rgf09w0{width:7.1045vw;height:10.93vw;display:flex}._15rq2xn0{display:flex;flex-direction:column;align-items:center;margin-bottom:-1.6vw}._15rq2xn1{padding:2.13vw 4.5vw 2.67vw 4.27vw;display:flex;align-items:center;background:linear-gradient(90deg,#79AFFF 0%,#5C8DFF 32%,#507FFF 75%,#4471FF 100%);border-radius:3.2vw}._15rq2xn2{font-size:3.47vw;font-family:PingFangSC-Semibold,PingFang SC;font-weight:600;color:#fff;line-height:4.8vw;white-space:nowrap}._15rq2xn3{font-size:2.93vw;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#eafaf8;line-height:4.27vw;white-space:nowrap;opacity:.8}._15rq2xn4{margin-left:3.2vw;width:1.44vw;height:2.4vw}._15rq2xn5{width:.8vw;height:4vw;background:#4C80FF;border-radius:0vw 0vw 26.67vw 26.67vw;z-index:1}._15rq2xn6{margin-top:-1.5vw;width:3.2vw;height:3.2vw}._4a4ovk0{margin-bottom:-.4vw;display:flex;flex-direction:column;align-items:center}._4a4ovk1{padding:1.07vw 2.4vw 1.6vw 2.67vw;background:#FFFFFF;box-shadow:0 .53vw 2.4vw #3f3f3f33;border-radius:2.13vw}._4a4ovk2{padding:2.67vw 2.67vw 2.4vw 3.2vw;background:#FFFFFF;box-shadow:0 0 2.67vw #4e556c26;border-radius:4.8vw;font-size:3.2vw;font-family:PingFangSC-Medium,PingFang SC;font-weight:500;color:#1e1e1e;line-height:4.53vw;white-space:nowrap}._4a4ovk3{font-size:3.2vw;font-family:PingFangSC-Medium,PingFang SC;font-weight:500;color:#1e1e1e;line-height:4.53vw;white-space:nowrap}._4a4ovk4{font-size:2.4vw;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#7e7e7e;line-height:3.47vw;white-space:nowrap}._4a4ovk5{color:#4471ff;font-family:PingFangSC-Medium,PingFang SC;font-weight:500}._4a4ovk6{margin-top:1.33vw;width:6.192vw;height:7.998vw}._4a4ovk7{margin-top:2.4vw;width:6.192vw;height:7.998vw}._1l6offo0{display:flex}._1l6offo1{width:4.53vw;height:4.53vw;margin-bottom:-2.265vw}._1l6offo2{width:16.27vw;height:16.27vw;margin-bottom:-8.135vw}.fhyw80{display:flex;align-items:center}.fhyw81{flex-direction:row-reverse}.fhyw83{margin-right:-2.265vw}.fhyw84{margin-left:-2.265vw}.fhyw85{margin-bottom:-2.265vw}.fhyw86{margin-right:calc(50% - 2.265vw)}.fhyw87{margin-left:calc(50% - 2.265vw)}.fhyw88{display:flex;width:4.53vw;height:4.53vw}.fhyw89{opacity:0}.fhyw8b{font-size:3.47vw;font-family:PingFangSC-Semibold,PingFang SC;font-weight:600;color:#243e66;line-height:4.53vw;white-space:nowrap}._65j3sr1{margin-top:1.87vw;margin-bottom:-5.5vw;width:6vw;height:11vw}@keyframes rrvp0y0{0%{transform:scale(0);opacity:1}33.33%{transform:scale(.5);opacity:1}66.66%{transform:scale(1);opacity:0}to{transform:scale(1);opacity:0}}@keyframes rrvp0y1{0%{transform:scale(0);opacity:0}33.33%{transform:scale(0);opacity:1}66.66%{transform:scale(.5);opacity:1}to{transform:scale(1);opacity:0}}.rrvp0y2{display:flex;margin-bottom:-30.935vw;width:61.87vw;height:61.87vw;animation-name:rrvp0y0;animation-duration:3s;animation-iteration-count:infinite;animation-timing-function:linear}.rrvp0y3{animation-name:rrvp0y1}
+.n8tgem0{position:absolute;bottom:50%;left:0;right:0;margin-left:auto;margin-right:auto;display:flex;flex-direction:column;align-items:center;z-index:1}.n8tgem1{padding:2.67vw 4.27vw;background:linear-gradient(90deg,#79AFFF 0%,#5C8DFF 32%,#507FFF 75%,#4471FF 100%);border-radius:3.2vw;display:flex;align-items:center}.n8tgem2{padding-right:2.67vw;max-width:41.33vw}.n8tgem3{display:-webkit-box;font-size:3.47vw;font-family:PingFangSC-Semibold,PingFang SC;font-weight:600;color:#fff;line-height:4.8vw;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.n8tgem4{margin-top:.53vw;font-size:2.93vw;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#fff;line-height:4.27vw;opacity:.8}.n8tgem5{width:1.758vw;height:2.93vw}.n8tgem6{width:.8vw;height:4vw;background:#4C80FF;border-radius:0vw 0vw 26.67vw 26.67vw}.n8tgem7{width:6.9355vw;height:10.67vw}.rgf09w0{width:7.1045vw;height:10.93vw;display:flex}._15rq2xn0{display:flex;flex-direction:column;align-items:center;margin-bottom:-1.6vw}._15rq2xn1{padding:2.13vw 4.5vw 2.67vw 4.27vw;display:flex;align-items:center;background:linear-gradient(90deg,#79AFFF 0%,#5C8DFF 32%,#507FFF 75%,#4471FF 100%);border-radius:3.2vw}._15rq2xn2{font-size:3.47vw;font-family:PingFangSC-Semibold,PingFang SC;font-weight:600;color:#fff;line-height:4.8vw;white-space:nowrap}._15rq2xn3{font-size:2.93vw;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#eafaf8;line-height:4.27vw;white-space:nowrap;opacity:.8}._15rq2xn4{margin-left:3.2vw;width:1.44vw;height:2.4vw}._15rq2xn5{width:.8vw;height:4vw;background:#4C80FF;border-radius:0vw 0vw 26.67vw 26.67vw;z-index:1}._15rq2xn6{margin-top:-1.5vw;width:3.2vw;height:3.2vw}._1d8ur7t0,._7anfuo0{position:relative}._4a4ovk0{margin-bottom:-.4vw;display:flex;flex-direction:column;align-items:center}._4a4ovk1{padding:1.07vw 2.4vw 1.6vw 2.67vw;background:#FFFFFF;box-shadow:0 .53vw 2.4vw #3f3f3f33;border-radius:2.13vw}._4a4ovk2{padding:2.67vw 2.67vw 2.4vw 3.2vw;background:#FFFFFF;box-shadow:0 0 2.67vw #4e556c26;border-radius:4.8vw;font-size:3.2vw;font-family:PingFangSC-Medium,PingFang SC;font-weight:500;color:#1e1e1e;line-height:4.53vw;white-space:nowrap}._4a4ovk3{font-size:3.2vw;font-family:PingFangSC-Medium,PingFang SC;font-weight:500;color:#1e1e1e;line-height:4.53vw;white-space:nowrap}._4a4ovk4{font-size:2.4vw;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#7e7e7e;line-height:3.47vw;white-space:nowrap}._4a4ovk5{color:#4471ff;font-family:PingFangSC-Medium,PingFang SC;font-weight:500}._4a4ovk6{margin-top:1.33vw;width:6.192vw;height:7.998vw}._4a4ovk7{margin-top:2.4vw;width:6.192vw;height:7.998vw}._1l6offo0{display:flex}._1l6offo1{width:4.53vw;height:4.53vw;margin-bottom:-2.265vw}._1l6offo2{width:16.27vw;height:16.27vw;margin-bottom:-8.135vw}.fhyw80{display:flex;align-items:center}.fhyw81{flex-direction:row-reverse}.fhyw83{margin-right:-2.265vw}.fhyw84{margin-left:-2.265vw}.fhyw85{margin-bottom:-2.265vw}.fhyw86{margin-right:calc(50% - 2.265vw)}.fhyw87{margin-left:calc(50% - 2.265vw)}.fhyw88{display:flex;width:4.53vw;height:4.53vw}.fhyw89{opacity:0}.fhyw8b{font-size:3.47vw;font-family:PingFangSC-Semibold,PingFang SC;font-weight:600;color:#243e66;line-height:4.53vw;white-space:nowrap}._65j3sr1{margin-top:1.87vw;margin-bottom:-5.5vw;width:6vw;height:11vw}@keyframes rrvp0y0{0%{transform:scale(0);opacity:1}33.33%{transform:scale(.5);opacity:1}66.66%{transform:scale(1);opacity:0}to{transform:scale(1);opacity:0}}@keyframes rrvp0y1{0%{transform:scale(0);opacity:0}33.33%{transform:scale(0);opacity:1}66.66%{transform:scale(.5);opacity:1}to{transform:scale(1);opacity:0}}.rrvp0y2{display:flex;margin-bottom:-30.935vw;width:61.87vw;height:61.87vw;animation-name:rrvp0y0;animation-duration:3s;animation-iteration-count:infinite;animation-timing-function:linear}.rrvp0y3{animation-name:rrvp0y1}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heycar/heycars-map",
-  "version": "0.2.12",
+  "version": "0.3.0",
   "type": "module",
   "scripts": {
     "dev": "vite -c vite.config.dev.ts",

package/src/Demo/DemoBusinessRecomendPlace.tsx

@@ -68,6 +68,7 @@ export const DemoBusinessRecomendPlace = defineSetup(function DemoBusinessRecome
           getRecomendPlace={getRecomendPlace}
           mapContext={mapContext}
           onGeoError={(e) => console.log("onGeoError e = ", e)}
+          onClickLocator={() => alert("hi")}
         />
       </div>
     );

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/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/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. 用户地址搜索，先设置台湾，搜个结果，然后切换城市到新加坡，搜索到结果依然是台湾