@heycar/heycars-map 0.3.6 → 0.3.7
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/components/Gmap/Gmap.css.d.ts +1 -0
- package/dist/components/Gmap/Gmap.d.ts +2 -0
- package/dist/components/MapProvider/MapProvider.d.ts +2 -0
- package/dist/hooks/useMapPlace.d.ts +2 -1
- package/dist/hooks/useMapRecomendPlace.d.ts +1 -1
- package/dist/index.cjs +43 -43
- package/dist/index.js +860 -841
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/App.tsx +1 -1
- package/src/business-components/BusinessRecomendPlaceMap/BusinessRecomendPlaceMap.tsx +27 -9
- package/src/components/Gmap/Gmap.css.ts +5 -0
- package/src/components/Gmap/Gmap.ts +8 -10
- package/src/components/MapProvider/MapProvider.tsx +4 -2
- package/src/hooks/useMapPlace.ts +15 -7
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.n8tgem0{pointer-events:none;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{pointer-events:auto;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
|
|
1
|
+
.n8tgem0{pointer-events:none;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{pointer-events:auto;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{position:relative}._7anfuo0{height:inherit;width:inherit}._7anfuo1{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{display:-webkit-box;font-size:3.2vw;font-family:PingFangSC-Semibold,PingFang SC;font-weight:600;color:#243e66;line-height:4.53vw;width:max-content;max-width:32vw;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}._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
|
@@ -47,7 +47,7 @@ export const BusinessRecomendPlaceMap = defineLagecySetup(
|
|
|
47
47
|
useMapLog(props, "BusinessRecomendPlaceMap");
|
|
48
48
|
const { geoDefaultPosition, getRecomendPlace, mapContext } = props;
|
|
49
49
|
const { mapRef, setMap } = useHeycarMap();
|
|
50
|
-
const { readyPromise } = useMapSupplier();
|
|
50
|
+
const { readyPromise, supplier } = useMapSupplier();
|
|
51
51
|
const { timerStart, timerStop } = useWaitTimer({ interval: MAP_DRAG_END_WAIT_ANIMATION });
|
|
52
52
|
const centerPlace = reactive<Place>({
|
|
53
53
|
lng: geoDefaultPosition?.[0] ?? 0,
|
|
@@ -167,7 +167,23 @@ export const BusinessRecomendPlaceMap = defineLagecySetup(
|
|
|
167
167
|
? props.recomendDescription
|
|
168
168
|
: props.noRecomendDescription;
|
|
169
169
|
return (
|
|
170
|
-
<HeycarMap
|
|
170
|
+
<HeycarMap
|
|
171
|
+
center={centerPoint.value}
|
|
172
|
+
zoom={18}
|
|
173
|
+
mapRef={setMap}
|
|
174
|
+
renderOverlay={() => {
|
|
175
|
+
return supplier === "gmap" ? (
|
|
176
|
+
<AbsoluteAddressBox
|
|
177
|
+
title={title}
|
|
178
|
+
description={description}
|
|
179
|
+
type={isDragging.value ? "locator" : "box"}
|
|
180
|
+
log={props.log}
|
|
181
|
+
onClick={() => emit("clickLocator")}
|
|
182
|
+
/>
|
|
183
|
+
) : null;
|
|
184
|
+
}}
|
|
185
|
+
log={props.log}
|
|
186
|
+
>
|
|
171
187
|
{!geoError.value && <PassengerCircle position={geoPosition.value} />}
|
|
172
188
|
<PickupPoints
|
|
173
189
|
places={placeCandidates.value}
|
|
@@ -175,13 +191,15 @@ export const BusinessRecomendPlaceMap = defineLagecySetup(
|
|
|
175
191
|
onClick={setCenterByPlace}
|
|
176
192
|
log={props.log}
|
|
177
193
|
/>
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
194
|
+
{supplier === "amap" && (
|
|
195
|
+
<AbsoluteAddressBox
|
|
196
|
+
title={title}
|
|
197
|
+
description={description}
|
|
198
|
+
type={isDragging.value ? "locator" : "box"}
|
|
199
|
+
log={props.log}
|
|
200
|
+
onClick={() => emit("clickLocator")}
|
|
201
|
+
/>
|
|
202
|
+
)}
|
|
185
203
|
</HeycarMap>
|
|
186
204
|
);
|
|
187
205
|
};
|
|
@@ -2,7 +2,7 @@ import { computed, h, shallowRef, watchPostEffect } from "vue-demi";
|
|
|
2
2
|
import type { SetMap } from "../../hooks/useHeycarMap";
|
|
3
3
|
import { provideGmap } from "../../hooks/useMap";
|
|
4
4
|
import { useMapEventSource } from "../../hooks/useMapEventSource";
|
|
5
|
-
import { defineSetup } from "../../types/helper";
|
|
5
|
+
import { defineSetup, VueNode } from "../../types/helper";
|
|
6
6
|
import type { MapEventHandler } from "../../types/mapHelper";
|
|
7
7
|
import {
|
|
8
8
|
watchNoneImmediatePostEffectForDeepOption,
|
|
@@ -14,12 +14,13 @@ export interface GmapProps extends google.maps.MapOptions {
|
|
|
14
14
|
mapRef?: SetMap<google.maps.Map>;
|
|
15
15
|
onDragStart?: MapEventHandler<google.maps.Map>;
|
|
16
16
|
onDragEnd?: MapEventHandler<google.maps.Map>;
|
|
17
|
+
renderOverlay?: () => VueNode;
|
|
17
18
|
}
|
|
18
19
|
|
|
19
20
|
export const Gmap = defineSetup(function Gmap(props: GmapProps, { slots, emit }) {
|
|
20
21
|
const setMap = props.mapRef;
|
|
21
22
|
const options = computed(() => {
|
|
22
|
-
const { mapRef, onDragStart, onDragEnd, ...options } = props;
|
|
23
|
+
const { renderOverlay, mapRef, onDragStart, onDragEnd, ...options } = props;
|
|
23
24
|
return options;
|
|
24
25
|
});
|
|
25
26
|
const defaultOptions = options.value;
|
|
@@ -38,13 +39,6 @@ export const Gmap = defineSetup(function Gmap(props: GmapProps, { slots, emit })
|
|
|
38
39
|
mapRef.value = map!;
|
|
39
40
|
setMap?.(map!);
|
|
40
41
|
});
|
|
41
|
-
// watch(
|
|
42
|
-
// () => options.value.zoom,
|
|
43
|
-
// (zoom) => {
|
|
44
|
-
// if (zoom) mapRef.value?.setZoom(zoom);
|
|
45
|
-
// },
|
|
46
|
-
// { flush: "post" }
|
|
47
|
-
// );
|
|
48
42
|
watchNoneImmediatePostEffectForDeepOption(
|
|
49
43
|
() => options.value,
|
|
50
44
|
(options) => {
|
|
@@ -52,5 +46,9 @@ export const Gmap = defineSetup(function Gmap(props: GmapProps, { slots, emit })
|
|
|
52
46
|
}
|
|
53
47
|
);
|
|
54
48
|
watchPostEffectForGMapEvent(mapRef, props, handleDrag, ["onDragStart", "onDragEnd"]);
|
|
55
|
-
return () =>
|
|
49
|
+
return () =>
|
|
50
|
+
h("div", { class: css.gmapLayout }, [
|
|
51
|
+
props.renderOverlay?.(),
|
|
52
|
+
h("div", { ref: elementRef, class: css.gmap }, slots.default?.()),
|
|
53
|
+
]);
|
|
56
54
|
});
|
|
@@ -29,6 +29,7 @@ export interface HeycarMapProps
|
|
|
29
29
|
Pick<AmapProps, "center" | "zoom">,
|
|
30
30
|
MapLogProps {
|
|
31
31
|
mapRef?: SetMap<AMap.Map> | SetMap<google.maps.Map>;
|
|
32
|
+
renderOverlay?: GmapProps["renderOverlay"];
|
|
32
33
|
onDragEnd?: (value: [number, number]) => any;
|
|
33
34
|
}
|
|
34
35
|
export const HeycarMap = defineLagecySetup(function HeycarMap(
|
|
@@ -47,7 +48,7 @@ export const HeycarMap = defineLagecySetup(function HeycarMap(
|
|
|
47
48
|
};
|
|
48
49
|
return () => {
|
|
49
50
|
const { supplier, gmapId, language = "zh", status } = payload;
|
|
50
|
-
const { mapRef: setMap, center, zoom } = props;
|
|
51
|
+
const { mapRef: setMap, center, zoom, renderOverlay } = props;
|
|
51
52
|
if (status === Status.LOADING) return slots.loading?.();
|
|
52
53
|
if (status === Status.FAILURE) return slots.fallback?.();
|
|
53
54
|
const children = slots.default?.();
|
|
@@ -59,6 +60,7 @@ export const HeycarMap = defineLagecySetup(function HeycarMap(
|
|
|
59
60
|
mapId={gmapId}
|
|
60
61
|
center={center ? vec2lnglat(center) : undefined}
|
|
61
62
|
zoom={zoom}
|
|
63
|
+
renderOverlay={renderOverlay}
|
|
62
64
|
onDragEnd={gmapDebouncedEmit}
|
|
63
65
|
>
|
|
64
66
|
{children}
|
|
@@ -78,4 +80,4 @@ export const HeycarMap = defineLagecySetup(function HeycarMap(
|
|
|
78
80
|
);
|
|
79
81
|
}
|
|
80
82
|
};
|
|
81
|
-
}).props(["center", "fallback", "loading", "mapRef", "zoom"]);
|
|
83
|
+
}).props(["center", "fallback", "loading", "mapRef", "zoom", "renderOverlay"]);
|
package/src/hooks/useMapPlace.ts
CHANGED
|
@@ -8,6 +8,7 @@ import { useUpdate } from "./useUdate";
|
|
|
8
8
|
export interface UseMapPlaceOnChangeCityProps {
|
|
9
9
|
cityName?: string;
|
|
10
10
|
cityParentName?: string;
|
|
11
|
+
countryName?: string;
|
|
11
12
|
}
|
|
12
13
|
export interface UseMapPlaceProps {
|
|
13
14
|
pointRef: Ref<Point>;
|
|
@@ -33,7 +34,7 @@ export const useAmapPlace = (props: UseMapPlaceProps) => {
|
|
|
33
34
|
const { addressComponent } = (result as AMap.ReGeocoderResult).regeocode;
|
|
34
35
|
const cityName = addressComponent.city ? addressComponent.city : addressComponent.province;
|
|
35
36
|
const cityParentName = addressComponent.province;
|
|
36
|
-
onChangeCity?.({ cityName, cityParentName });
|
|
37
|
+
onChangeCity?.({ cityName, cityParentName, countryName: "" });
|
|
37
38
|
});
|
|
38
39
|
};
|
|
39
40
|
const updatePlace = (value: Point) => {
|
|
@@ -64,7 +65,7 @@ export const useAmapPlace = (props: UseMapPlaceProps) => {
|
|
|
64
65
|
place.lng = lng;
|
|
65
66
|
place.lat = lat;
|
|
66
67
|
onChange?.({ lng, lat, name });
|
|
67
|
-
onChangeCity?.({ cityName, cityParentName });
|
|
68
|
+
onChangeCity?.({ cityName, cityParentName, countryName: "" });
|
|
68
69
|
return;
|
|
69
70
|
}
|
|
70
71
|
|
|
@@ -82,14 +83,20 @@ export const useAmapPlace = (props: UseMapPlaceProps) => {
|
|
|
82
83
|
};
|
|
83
84
|
|
|
84
85
|
export const useGmapPlace = (props: UseMapPlaceProps) => {
|
|
85
|
-
const {
|
|
86
|
+
const { onChange, onChangeCity } = props;
|
|
87
|
+
const defaultPoint: Point = [...props.pointRef.value];
|
|
88
|
+
const pointRef = ref<Point>(defaultPoint);
|
|
86
89
|
const { readyPromise } = useMapSupplier();
|
|
87
|
-
const { idx: placeKey, update
|
|
90
|
+
const { idx: placeKey, update } = useUpdate();
|
|
88
91
|
const place = reactive<Place>({
|
|
89
92
|
lng: pointRef.value[0],
|
|
90
93
|
lat: pointRef.value[1],
|
|
91
94
|
name: "",
|
|
92
95
|
});
|
|
96
|
+
const updatePlace = (value: Point) => {
|
|
97
|
+
pointRef.value = value;
|
|
98
|
+
update();
|
|
99
|
+
};
|
|
93
100
|
const setPlace = (value: Place) => {
|
|
94
101
|
place.lng = value.lng;
|
|
95
102
|
place.lat = value.lat;
|
|
@@ -101,7 +108,8 @@ export const useGmapPlace = (props: UseMapPlaceProps) => {
|
|
|
101
108
|
const { results } = await geocoder.geocode({ language: LANGUAGE, location: { lng, lat } });
|
|
102
109
|
const cityName = geocoderResult2cityName(results[0]);
|
|
103
110
|
const cityParentName = results.slice(-2)[0].address_components[0].long_name;
|
|
104
|
-
|
|
111
|
+
const countryName = results.slice(-1)[0].address_components[0].long_name;
|
|
112
|
+
onChangeCity?.({ cityName, cityParentName, countryName });
|
|
105
113
|
};
|
|
106
114
|
watch(
|
|
107
115
|
() => placeKey.value,
|
|
@@ -113,12 +121,12 @@ export const useGmapPlace = (props: UseMapPlaceProps) => {
|
|
|
113
121
|
const name = results[0].formatted_address;
|
|
114
122
|
const cityName = geocoderResult2cityName(results[0]);
|
|
115
123
|
const cityParentName = results.slice(-2)[0].address_components[0].long_name;
|
|
116
|
-
|
|
124
|
+
const countryName = results.slice(-1)[0].address_components[0].long_name;
|
|
117
125
|
place.lng = lng;
|
|
118
126
|
place.lat = lat;
|
|
119
127
|
place.name = name;
|
|
120
128
|
onChange?.({ lng, lat, name });
|
|
121
|
-
onChangeCity?.({ cityName, cityParentName });
|
|
129
|
+
onChangeCity?.({ cityName, cityParentName, countryName });
|
|
122
130
|
}
|
|
123
131
|
);
|
|
124
132
|
return { place, updatePlace, setPlace, updateCity };
|