@heycar/heycars-map 0.2.11 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/business-components/AbsoluteAddressBox/AbsoluteAddressBox.css.d.ts +8 -0
- package/dist/business-components/AbsoluteAddressBox/AbsoluteAddressBox.d.ts +8 -2
- package/dist/business-components/AddressBox/AddressBox.d.ts +5 -7
- package/dist/business-components/BusinessRecomendPlaceMap/BusinessRecomendPlaceMap.d.ts +3 -1
- package/dist/components/Gmap/Gmap.css.d.ts +1 -0
- package/dist/hooks-business/useBusinessRecomendPlaceMap.d.ts +2 -2
- package/dist/index.cjs +47 -47
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1164 -1118
- package/dist/style.css +1 -1
- package/package.json +2 -2
- package/src/App.tsx +3 -3
- package/src/Demo/DemoBusinessRecomendPlace.tsx +10 -30
- package/src/business-components/AbsoluteAddressBox/AbsoluteAddressBox.css.ts +66 -0
- package/src/business-components/AbsoluteAddressBox/AbsoluteAddressBox.tsx +34 -3
- package/src/business-components/AddressBox/AddressBox.tsx +2 -4
- package/src/business-components/BusinessRecomendPlaceMap/BusinessRecomendPlaceMap.tsx +12 -7
- package/src/components/Amap/Amap.css.ts +3 -1
- package/src/components/Gmap/Gmap.css.ts +5 -0
- package/src/components/Gmap/Gmap.ts +3 -1
- package/src/hooks-business/useBusinessRecomendPlaceMap.ts +5 -5
- package/src/index.ts +1 -0
- package/todo.md +6 -12
package/dist/style.css
CHANGED
|
@@ -1 +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}
|
|
1
|
+
.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
CHANGED
package/src/App.tsx
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineComponent } from "vue-demi";
|
|
2
2
|
import { MapProvider } from "./components/MapProvider";
|
|
3
|
-
import {
|
|
3
|
+
import { DemoBusinessRecomendPlace } from "./Demo/DemoBusinessRecomendPlace";
|
|
4
4
|
|
|
5
5
|
const gmapApiKey = import.meta.env.VITE_GMAP_API_KEY;
|
|
6
6
|
const gmapId = import.meta.env.VITE_GMAP_MAP_ID;
|
|
@@ -17,9 +17,9 @@ export const App = defineComponent({
|
|
|
17
17
|
gmapKey={gmapApiKey}
|
|
18
18
|
supplier={"amap"}
|
|
19
19
|
>
|
|
20
|
-
|
|
20
|
+
<DemoBusinessRecomendPlace />
|
|
21
21
|
{/* <DemoBusinessQuoting /> */}
|
|
22
|
-
<DemoBusinessTaxiService />
|
|
22
|
+
{/* <DemoBusinessTaxiService /> */}
|
|
23
23
|
{/* <DemoBusinessTaxiEnd /> */}
|
|
24
24
|
</MapProvider>
|
|
25
25
|
);
|
|
@@ -37,41 +37,21 @@ export const DemoBusinessRecomendPlace = defineSetup(function DemoBusinessRecome
|
|
|
37
37
|
) => {
|
|
38
38
|
const { lat, lng } = place;
|
|
39
39
|
console.log("getRecomendPlace context?.source = ", context?.source);
|
|
40
|
-
return [
|
|
41
|
-
{
|
|
42
|
-
address: "2 College Ave West, Stephen Riady Centre, Singapore 138607",
|
|
43
|
-
distance: 68,
|
|
44
|
-
lat: 1.2961134,
|
|
45
|
-
lng: 103.7722912,
|
|
46
|
-
name: "2 College Ave West, Stephen Riady Centre, Singapore 138607",
|
|
47
|
-
reqFrom: "Recent",
|
|
48
|
-
},
|
|
49
|
-
{
|
|
50
|
-
address: "10 Architecture Drive, Singapore",
|
|
51
|
-
distance: 71,
|
|
52
|
-
lat: 1.2969847,
|
|
53
|
-
lng: 103.7714507,
|
|
54
|
-
name: "Centre for English Language Communication (CELC)",
|
|
55
|
-
reqFrom: "public",
|
|
56
|
-
},
|
|
57
|
-
{
|
|
58
|
-
address: "10 Kent Ridge Crescent, #01-02 Block AS8",
|
|
59
|
-
distance: 75,
|
|
60
|
-
lat: 1.295979,
|
|
61
|
-
lng: 103.7720608,
|
|
62
|
-
name: "The Coffee Roaster Cafe @ NUS",
|
|
63
|
-
reqFrom: "public",
|
|
64
|
-
},
|
|
65
|
-
];
|
|
66
|
-
|
|
67
40
|
return [
|
|
68
41
|
{ lat: lat + 0.0001, lng: lng + 0.0001, name: "place name 1" },
|
|
69
42
|
{ lat: lat + 0.002, lng: lng + 0.002, name: "place name 2" },
|
|
70
43
|
];
|
|
71
44
|
};
|
|
72
|
-
const {
|
|
73
|
-
|
|
45
|
+
const {
|
|
46
|
+
centerPlace,
|
|
47
|
+
placeCandidates,
|
|
48
|
+
setCenterPlaceByRecomand,
|
|
49
|
+
mapContext,
|
|
50
|
+
apiMapDistance,
|
|
51
|
+
panToGeoPositionByRecomend,
|
|
52
|
+
} = useBusinessRecomendPlaceMap();
|
|
74
53
|
(window as any).setCenterPlaceByRecomand = setCenterPlaceByRecomand;
|
|
54
|
+
(window as any).panToGeoPositionByRecomend = panToGeoPositionByRecomend;
|
|
75
55
|
return () => {
|
|
76
56
|
return (
|
|
77
57
|
<div>
|
|
@@ -80,7 +60,6 @@ export const DemoBusinessRecomendPlace = defineSetup(function DemoBusinessRecome
|
|
|
80
60
|
{centerPlace.cityName} | {centerPlace.countryName} <br />
|
|
81
61
|
<SomeAutoComplete cityName="Taiwan"></SomeAutoComplete>
|
|
82
62
|
<BusinessRecomendPlaceMap
|
|
83
|
-
log
|
|
84
63
|
class={css.demo}
|
|
85
64
|
unavailableTitle={"当前区域暂未开通服务"}
|
|
86
65
|
noRecomendDescription={"附近无推荐上车地点"}
|
|
@@ -89,6 +68,7 @@ export const DemoBusinessRecomendPlace = defineSetup(function DemoBusinessRecome
|
|
|
89
68
|
getRecomendPlace={getRecomendPlace}
|
|
90
69
|
mapContext={mapContext}
|
|
91
70
|
onGeoError={(e) => console.log("onGeoError e = ", e)}
|
|
71
|
+
onClickLocator={() => alert("hi")}
|
|
92
72
|
/>
|
|
93
73
|
</div>
|
|
94
74
|
);
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { style } from "@vanilla-extract/css";
|
|
2
|
+
|
|
3
|
+
export const absoluteAddressBoxLayout = style({
|
|
4
|
+
position: "absolute",
|
|
5
|
+
bottom: "50%",
|
|
6
|
+
left: 0,
|
|
7
|
+
right: 0,
|
|
8
|
+
marginLeft: "auto",
|
|
9
|
+
marginRight: "auto",
|
|
10
|
+
display: "flex",
|
|
11
|
+
flexDirection: "column",
|
|
12
|
+
alignItems: "center",
|
|
13
|
+
zIndex: 1,
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
export const absoluteAddressBox = style({
|
|
17
|
+
padding: "2.67vw 4.27vw",
|
|
18
|
+
background: "linear-gradient(90deg, #79AFFF 0%, #5C8DFF 32%, #507FFF 75%, #4471FF 100%)",
|
|
19
|
+
borderRadius: "3.2vw",
|
|
20
|
+
display: "flex",
|
|
21
|
+
alignItems: "center",
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
export const boxTextLayout = style({
|
|
25
|
+
paddingRight: "2.67vw",
|
|
26
|
+
maxWidth: "41.33vw",
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
export const boxTitle = style({
|
|
30
|
+
display: "-webkit-box",
|
|
31
|
+
fontSize: "3.47vw",
|
|
32
|
+
fontFamily: "PingFangSC-Semibold, PingFang SC",
|
|
33
|
+
fontWeight: 600,
|
|
34
|
+
color: "#FFFFFF",
|
|
35
|
+
lineHeight: "4.8vw",
|
|
36
|
+
WebkitLineClamp: 2,
|
|
37
|
+
WebkitBoxOrient: "vertical",
|
|
38
|
+
overflow: "hidden",
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
export const boxDescription = style({
|
|
42
|
+
marginTop: "0.53vw",
|
|
43
|
+
fontSize: "2.93vw",
|
|
44
|
+
fontFamily: "PingFangSC-Regular, PingFang SC",
|
|
45
|
+
fontWeight: 400,
|
|
46
|
+
color: "#FFFFFF",
|
|
47
|
+
lineHeight: "4.27vw",
|
|
48
|
+
opacity: 0.8,
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
export const arrowRight = style({
|
|
52
|
+
width: "1.758vw",
|
|
53
|
+
height: "2.93vw",
|
|
54
|
+
});
|
|
55
|
+
|
|
56
|
+
export const straightLine = style({
|
|
57
|
+
width: "0.8vw",
|
|
58
|
+
height: "4vw",
|
|
59
|
+
background: "#4C80FF",
|
|
60
|
+
borderRadius: "0vw 0vw 26.67vw 26.67vw",
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
export const locatorIcon = style({
|
|
64
|
+
width: "6.9355vw",
|
|
65
|
+
height: "10.67vw",
|
|
66
|
+
});
|
|
@@ -1,8 +1,39 @@
|
|
|
1
|
+
import imgAddressLocator from "../../assets/icons/svg/address-locator.svg";
|
|
2
|
+
import imgArrowRight from "../../assets/icons/svg/arrow-right.svg";
|
|
3
|
+
import type { MapLogProps } from "../../hooks/useMapLog";
|
|
1
4
|
import { defineSetup } from "../../types/helper";
|
|
2
|
-
import
|
|
5
|
+
import * as css from "./AbsoluteAddressBox.css";
|
|
3
6
|
|
|
4
|
-
export
|
|
7
|
+
export interface AbsoluteAddressBoxProps extends MapLogProps {
|
|
8
|
+
type: "box" | "locator";
|
|
9
|
+
title: string;
|
|
10
|
+
description?: string;
|
|
11
|
+
onClick?: () => any;
|
|
12
|
+
}
|
|
13
|
+
export const AbsoluteAddressBox = defineSetup(function AbsoluteAddressBox(
|
|
14
|
+
props: AbsoluteAddressBoxProps,
|
|
15
|
+
{ emit }
|
|
16
|
+
) {
|
|
17
|
+
const handleClick = () => emit("click");
|
|
5
18
|
return () => {
|
|
6
|
-
|
|
19
|
+
const { type, title, description } = props;
|
|
20
|
+
if (type === "locator")
|
|
21
|
+
return (
|
|
22
|
+
<div class={css.absoluteAddressBoxLayout}>
|
|
23
|
+
<img class={css.locatorIcon} src={imgAddressLocator} />
|
|
24
|
+
</div>
|
|
25
|
+
);
|
|
26
|
+
return (
|
|
27
|
+
<div class={css.absoluteAddressBoxLayout}>
|
|
28
|
+
<div class={css.absoluteAddressBox} onClick={handleClick}>
|
|
29
|
+
<div class={css.boxTextLayout}>
|
|
30
|
+
<div class={css.boxTitle}>{title}</div>
|
|
31
|
+
{description && <div class={css.boxDescription}>{description}</div>}
|
|
32
|
+
</div>
|
|
33
|
+
<img class={css.arrowRight} src={imgArrowRight} />
|
|
34
|
+
</div>
|
|
35
|
+
<i class={css.straightLine} />
|
|
36
|
+
</div>
|
|
37
|
+
);
|
|
7
38
|
};
|
|
8
39
|
});
|
|
@@ -9,14 +9,12 @@ import { createElement, defineSetup } from "../../types/helper";
|
|
|
9
9
|
import type { Point } from "../../types/interface";
|
|
10
10
|
import { createDom } from "../../utils/dom";
|
|
11
11
|
import { vec2lnglat } from "../../utils/transform";
|
|
12
|
+
import type { AbsoluteAddressBoxProps } from "../AbsoluteAddressBox";
|
|
12
13
|
import { AAddressLocator, GAddressLocator } from "../AddressLocator";
|
|
13
14
|
import * as css from "./AddressBox.css";
|
|
14
15
|
|
|
15
|
-
export interface AddressBoxProps extends MapLogProps {
|
|
16
|
-
type: "box" | "locator";
|
|
16
|
+
export interface AddressBoxProps extends MapLogProps, AbsoluteAddressBoxProps {
|
|
17
17
|
position: Point;
|
|
18
|
-
title: string;
|
|
19
|
-
description?: string;
|
|
20
18
|
}
|
|
21
19
|
export const AAddressBox = defineSetup(function AAddressBox(props: AddressBoxProps) {
|
|
22
20
|
useMapLog(props, "AAddressBox");
|
|
@@ -10,7 +10,7 @@ import { useMapRecomendPlace, UseMapRecomendPlaceProps } from "../../hooks/useMa
|
|
|
10
10
|
import { useMapSupplier } from "../../hooks/useMapSupplier";
|
|
11
11
|
import { defineLagecySetup } from "../../types/helper";
|
|
12
12
|
import type { Place, Point } from "../../types/interface";
|
|
13
|
-
import {
|
|
13
|
+
import { AbsoluteAddressBox, AbsoluteAddressBoxProps } from "../AbsoluteAddressBox";
|
|
14
14
|
import { PassengerCircle } from "../PassengerCircle";
|
|
15
15
|
import { PickupPoints } from "../PickupPoints";
|
|
16
16
|
|
|
@@ -35,12 +35,13 @@ export interface BusinessRecomendPlaceMapProps
|
|
|
35
35
|
onChangePlace?: UseMapPlaceProps["onChange"];
|
|
36
36
|
onChangeRecomandPlace?: UseMapRecomendPlaceProps["onChange"];
|
|
37
37
|
onGeoError?: UseGeoLocationProps["onError"];
|
|
38
|
+
onClickLocator?: AbsoluteAddressBoxProps["onClick"];
|
|
38
39
|
}
|
|
39
40
|
export const BusinessRecomendPlaceMap = defineLagecySetup(
|
|
40
41
|
(props: BusinessRecomendPlaceMapProps, { emit }) => {
|
|
41
42
|
useMapLog(props, "BusinessRecomendPlaceMap");
|
|
42
43
|
const { geoDefaultPosition, getRecomendPlace, mapContext } = props;
|
|
43
|
-
const { mapRef, setMap
|
|
44
|
+
const { mapRef, setMap } = useHeycarMap();
|
|
44
45
|
const { readyPromise } = useMapSupplier();
|
|
45
46
|
const centerPlace = reactive<Place>({
|
|
46
47
|
lng: geoDefaultPosition?.[0] ?? 0,
|
|
@@ -56,8 +57,6 @@ export const BusinessRecomendPlaceMap = defineLagecySetup(
|
|
|
56
57
|
centerPlace.lat = point[1];
|
|
57
58
|
updatePlace();
|
|
58
59
|
};
|
|
59
|
-
mapContext.setCenterPlaceByRecomand = setCenterPlaceByRecomand;
|
|
60
|
-
mapContext.panTo = panTo;
|
|
61
60
|
const setCenterByPlace = (place: Place) => {
|
|
62
61
|
centerSource.source = "api";
|
|
63
62
|
centerPlace.lng = place.lng;
|
|
@@ -65,7 +64,7 @@ export const BusinessRecomendPlaceMap = defineLagecySetup(
|
|
|
65
64
|
centerPlace.name = place.name;
|
|
66
65
|
};
|
|
67
66
|
|
|
68
|
-
const { geoPosition } = useGeoLocation({
|
|
67
|
+
const { geoPosition, geoError } = useGeoLocation({
|
|
69
68
|
geoDefaultPosition,
|
|
70
69
|
onLoad: async (value) => {
|
|
71
70
|
// geo 主入口
|
|
@@ -88,6 +87,12 @@ export const BusinessRecomendPlaceMap = defineLagecySetup(
|
|
|
88
87
|
onChange: (v) => emit("changeGeoLocation", v),
|
|
89
88
|
onError: (e) => emit("geoError", e),
|
|
90
89
|
});
|
|
90
|
+
mapContext.setCenterPlaceByRecomand = setCenterPlaceByRecomand;
|
|
91
|
+
mapContext.panToGeoPositionByRecomend = () => {
|
|
92
|
+
if (geoError.value) return false;
|
|
93
|
+
setCenterPlaceByRecomand(geoPosition.value);
|
|
94
|
+
return true;
|
|
95
|
+
};
|
|
91
96
|
const { isDragging } = useMapDrag({
|
|
92
97
|
mapRef,
|
|
93
98
|
onChange: (point) => {
|
|
@@ -147,12 +152,12 @@ export const BusinessRecomendPlaceMap = defineLagecySetup(
|
|
|
147
152
|
<HeycarMap center={centerPoint.value} zoom={18} mapRef={setMap} log={props.log}>
|
|
148
153
|
<PassengerCircle position={geoPosition.value} />
|
|
149
154
|
<PickupPoints places={placeCandidates.value} onClick={setCenterByPlace} log={props.log} />
|
|
150
|
-
<
|
|
151
|
-
position={centerPoint.value}
|
|
155
|
+
<AbsoluteAddressBox
|
|
152
156
|
title={availableRef.value ? centerPlace.name : props.unavailableTitle}
|
|
153
157
|
description={description}
|
|
154
158
|
type={isDragging.value ? "locator" : "box"}
|
|
155
159
|
log={props.log}
|
|
160
|
+
onClick={() => emit("clickLocator")}
|
|
156
161
|
/>
|
|
157
162
|
</HeycarMap>
|
|
158
163
|
);
|
|
@@ -8,6 +8,8 @@ import {
|
|
|
8
8
|
watchNoneImmediatePostEffectForDeepOption,
|
|
9
9
|
watchPostEffectForGMapEvent,
|
|
10
10
|
} from "../../utils/compare";
|
|
11
|
+
import * as css from "./Gmap.css";
|
|
12
|
+
|
|
11
13
|
export interface GmapProps extends google.maps.MapOptions {
|
|
12
14
|
mapRef?: SetMap<google.maps.Map>;
|
|
13
15
|
onDragStart?: MapEventHandler<google.maps.Map>;
|
|
@@ -50,5 +52,5 @@ export const Gmap = defineSetup(function Gmap(props: GmapProps, { slots, emit })
|
|
|
50
52
|
}
|
|
51
53
|
);
|
|
52
54
|
watchPostEffectForGMapEvent(mapRef, props, handleDrag, ["onDragStart", "onDragEnd"]);
|
|
53
|
-
return () => h("div", { ref: elementRef }, slots.default?.());
|
|
55
|
+
return () => h("div", { ref: elementRef, class: css.gmap }, slots.default?.());
|
|
54
56
|
});
|
|
@@ -3,7 +3,7 @@ import { useMapGeometry } from "../hooks/useMapGeometry";
|
|
|
3
3
|
import type { Place, Point } from "../types/interface";
|
|
4
4
|
|
|
5
5
|
export interface BusinessRecomendPlaceContext {
|
|
6
|
-
|
|
6
|
+
panToGeoPositionByRecomend: (value: Point) => void;
|
|
7
7
|
setCenterPlaceByRecomand: (value: Point) => void;
|
|
8
8
|
onChangeCenterPlace: (value: Place) => void;
|
|
9
9
|
onChangeRecomendPlaces: (value: Place[]) => void;
|
|
@@ -18,11 +18,11 @@ export const useBusinessRecomendPlaceMap = () => {
|
|
|
18
18
|
});
|
|
19
19
|
const placeCandidates = ref<Place[]>([]);
|
|
20
20
|
const { apiMapDistance } = useMapGeometry();
|
|
21
|
-
const
|
|
21
|
+
const panToGeoPositionByRecomend = (value: Point) => mapContext.panToGeoPositionByRecomend(value);
|
|
22
22
|
const setCenterPlaceByRecomand = (value: Point) => mapContext.setCenterPlaceByRecomand(value);
|
|
23
23
|
const mapContext: BusinessRecomendPlaceContext = {
|
|
24
|
-
|
|
25
|
-
throw new Error("MyError:
|
|
24
|
+
panToGeoPositionByRecomend: () => {
|
|
25
|
+
throw new Error("MyError: panToGeoPositionByRecomend used before assigned");
|
|
26
26
|
},
|
|
27
27
|
setCenterPlaceByRecomand: () => {
|
|
28
28
|
throw new Error("MyError: setCenterPlaceByRecomand used before assigned");
|
|
@@ -38,7 +38,7 @@ export const useBusinessRecomendPlaceMap = () => {
|
|
|
38
38
|
mapContext,
|
|
39
39
|
centerPlace,
|
|
40
40
|
placeCandidates,
|
|
41
|
-
|
|
41
|
+
panToGeoPositionByRecomend,
|
|
42
42
|
setCenterPlaceByRecomand,
|
|
43
43
|
apiMapDistance,
|
|
44
44
|
};
|
package/src/index.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import "./style.css";
|
|
2
|
+
export { AbsoluteAddressBox } from "./business-components/AbsoluteAddressBox";
|
|
2
3
|
export { AddressBox } from "./business-components/AddressBox";
|
|
3
4
|
export { BusinessQuotingMap } from "./business-components/BusinessQuotingMap";
|
|
4
5
|
export { BusinessRecomendPlaceMap } from "./business-components/BusinessRecomendPlaceMap";
|
package/todo.md
CHANGED
|
@@ -2,20 +2,14 @@ https://dawchihliou.github.io/articles/building-custom-google-maps-marker-react-
|
|
|
2
2
|
|
|
3
3
|
2. Google 地址名称太长
|
|
4
4
|
3. 中心点 drag 期间位置
|
|
5
|
-
4.
|
|
6
|
-
5.
|
|
7
|
-
6. google/高德 坐标系转化
|
|
8
|
-
7. click 事件
|
|
5
|
+
4. 高德地图加载期间出现大量的请求
|
|
6
|
+
5. google/高德 坐标系转化
|
|
9
7
|
|
|
10
8
|
---
|
|
11
9
|
|
|
12
|
-
1. 需要计算用户与上车点的预估时间 导出
|
|
13
|
-
2. 全程时间与距离导出
|
|
14
10
|
3. 司机接单页起点名称怎么显示 ?
|
|
15
11
|
4. passenger 超过 10 公里 fitview 不考虑怎么设计
|
|
16
|
-
5.
|
|
17
|
-
6. walkingRoute 显示报错
|
|
18
|
-
7. 需要一个手段让 fitview 初始化起作用
|
|
12
|
+
5. 需要一个手段让 fitview 初始化起作用
|
|
19
13
|
|
|
20
14
|
---
|
|
21
15
|
|
|
@@ -26,6 +20,6 @@ https://dawchihliou.github.io/articles/building-custom-google-maps-marker-react-
|
|
|
26
20
|
|
|
27
21
|
---
|
|
28
22
|
|
|
29
|
-
1.
|
|
30
|
-
2.
|
|
31
|
-
3.
|
|
23
|
+
1. 定位失败的视觉稿文字提示
|
|
24
|
+
2. 用户手动输入地址,然后跳回 home 页面, centerplace 的 name 不正确
|
|
25
|
+
3. 用户地址搜索,先设置台湾,搜个结果,然后切换城市到新加坡,搜索到结果依然是台湾
|