@heycar/heycars-map 0.3.4 → 0.3.5

package/package.json

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

package/src/Demo/DemoBusinessRecomendPlace.tsx

@@ -64,6 +64,7 @@ export const DemoBusinessRecomendPlace = defineSetup(function DemoBusinessRecome
         <SomeAutoComplete cityName="Shinjuku-ku"></SomeAutoComplete>
         <BusinessRecomendPlaceMap
           class={css.demo}
+          geoErrorTitle={"定位获取失败\n请手动设置上车点"}
           geoLoadingTitle={"正在读取GPS位置信息..."}
           unavailableTitle={"当前区域暂未开通服务"}
           noRecomendDescription={"附近无推荐上车地点"}

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

@@ -1,9 +1,20 @@
+import { computed } from "vue-demi";
 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 * as css from "./AbsoluteAddressBox.css";
 
+interface MultilineTitleProps {
+  value?: string;
+}
+const MultilineTitle = defineSetup(function MultilineTitle(props: MultilineTitleProps) {
+  const linesRef = computed(() => {
+    return props.value?.split("\n").flatMap((line, idx) => (idx === 0 ? line : [<br />, line]));
+  });
+  return () => <div>{linesRef.value}</div>;
+});
+
 export interface AbsoluteAddressBoxProps extends MapLogProps {
   type: "box" | "locator";
   title: string;
@@ -27,7 +38,7 @@ export const AbsoluteAddressBox = defineSetup(function AbsoluteAddressBox(
       <div class={css.absoluteAddressBoxLayout}>
         <div class={css.absoluteAddressBox} onClick={handleClick}>
           <div class={css.boxTextLayout}>
-            <div class={css.boxTitle}>{title}</div>
+            <MultilineTitle class={css.boxTitle} value={title} />
             {description && <div class={css.boxDescription}>{description}</div>}
           </div>
           <img class={css.arrowRight} src={imgArrowRight} />

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

@@ -24,6 +24,7 @@ export interface BusinessRecomendPlaceMapProps
     Pick<UseMapRecomendPlaceProps<CenterPlaceSource>, "getRecomendPlace">,
     MapLogProps {
   geoLoadingTitle: string;
+  geoErrorTitle: string;
   unavailableTitle: string;
   recomendDescription: string;
   noRecomendDescription: string;
@@ -150,14 +151,17 @@ export const BusinessRecomendPlaceMap = defineLagecySetup(
     return () => {
       const title = geoLoading.value
         ? props.geoLoadingTitle
+        : geoError.value
+        ? props.geoErrorTitle
         : availableRef.value
         ? centerPlace.name
         : props.unavailableTitle;
-      const description = !availableRef.value
-        ? undefined
-        : placeCandidates.value.length > 0
-        ? props.recomendDescription
-        : props.noRecomendDescription;
+      const description =
+        !availableRef.value || geoError.value || geoLoading.value
+          ? undefined
+          : placeCandidates.value.length > 0
+          ? props.recomendDescription
+          : props.noRecomendDescription;
       return (
         <HeycarMap center={centerPoint.value} zoom={18} mapRef={setMap} log={props.log}>
           <PassengerCircle position={geoPosition.value} />
@@ -175,6 +179,7 @@ export const BusinessRecomendPlaceMap = defineLagecySetup(
   }
 ).props([
   "log",
+  "geoErrorTitle",
   "geoLoadingTitle",
   "unavailableTitle",
   "recomendDescription",

package/todo.md

@@ -1,9 +1,8 @@
 https://dawchihliou.github.io/articles/building-custom-google-maps-marker-react-component-like-airbnb-in-nextjs
 
 2. Google 地址名称太长
-3. 中心点 drag 期间位置
-4. 高德地图加载期间出现大量的请求
-5. google/高德 坐标系转化
+3. 高德地图加载期间出现大量的请求
+4. google/高德 坐标系转化
 
 ---
 
@@ -17,5 +16,4 @@ https://dawchihliou.github.io/articles/building-custom-google-maps-marker-react-
 
 ---
 
-1. 定位失败的视觉稿文字提示
-2. 用户地址搜索，先设置台湾，搜个结果，然后切换城市到新加坡，搜索到结果依然是台湾
+2. google cityparent 要用 city 上级，目前是 country 下级