@heycar/heycars-map 0.2.8 → 0.2.9
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/Demo/Demo.d.ts +2 -0
- package/dist/Demo/DemoBusinessQuoting.d.ts +1 -0
- package/dist/Demo/DemoBusinessRecomendPlace.d.ts +1 -0
- package/dist/Demo/DemoBusinessTaxiEnd.d.ts +1 -0
- package/dist/Demo/DemoBusinessTaxiService.d.ts +1 -0
- package/dist/business-components/BusinessRecomendPlaceMap/BusinessRecomendPlaceMap.d.ts +3 -2
- package/dist/business-components/BusinessTaxiEndMap/BusinessTaxiEndMap.d.ts +6 -0
- package/dist/business-components/BusinessTaxiEndMap/index.d.ts +1 -0
- package/dist/business-components/BusinessTaxiServiceMap/BusinessTaxiServiceMap.d.ts +6 -0
- package/dist/hooks/useMapRecomendPlace.d.ts +4 -1
- package/dist/index.cjs +27 -27
- package/dist/index.d.ts +1 -0
- package/dist/index.js +611 -550
- package/package.json +1 -1
- package/src/App.tsx +21 -7
- package/src/{components/Demo → Demo/CityBound}/SearchDemo.tsx +2 -2
- package/src/{components/Demo → Demo}/Demo.tsx +13 -13
- package/src/Demo/DemoBusinessQuoting.tsx +18 -0
- package/src/Demo/DemoBusinessRecomendPlace.tsx +66 -0
- package/src/Demo/DemoBusinessTaxiEnd.tsx +13 -0
- package/src/{components/Demo → Demo}/DemoBusinessTaxiService.tsx +6 -26
- package/src/business-components/BusinessRecomendPlaceMap/BusinessRecomendPlaceMap.tsx +47 -38
- package/src/business-components/BusinessTaxiEndMap/BusinessTaxiEndMap.tsx +33 -0
- package/src/business-components/BusinessTaxiEndMap/index.ts +1 -0
- package/src/business-components/BusinessTaxiServiceMap/BusinessTaxiServiceMap.tsx +2 -2
- package/src/hooks/useMapGeometry.ts +4 -4
- package/src/hooks/useMapRecomendPlace.ts +34 -3
- package/src/index.ts +1 -0
- package/todo.md +6 -0
- package/dist/components/Demo/BusinessDemo.d.ts +0 -2
- package/dist/components/Demo/Demo.d.ts +0 -2
- package/dist/components/Demo/DemoBusinessQuoting.d.ts +0 -1
- package/dist/components/Demo/DemoBusinessTaxiService.d.ts +0 -2
- package/dist/components/Demo/Hello.d.ts +0 -17
- package/dist/components/Demo/HeycarDemo.d.ts +0 -3
- package/dist/components/Demo/index.d.ts +0 -1
- package/src/components/Demo/BusinessDemo.tsx +0 -117
- package/src/components/Demo/DemoBusinessQuoting.tsx +0 -38
- package/src/components/Demo/Hello.tsx +0 -15
- package/src/components/Demo/HeycarDemo.tsx +0 -104
- package/src/components/Demo/TemplateDemo.vue +0 -11
- package/src/components/Demo/index.ts +0 -1
- /package/dist/{components/Demo → Demo/CityBound}/SearchDemo.d.ts +0 -0
- /package/dist/{components/Demo → Demo/CityBound}/country.d.ts +0 -0
- /package/dist/{components/Demo → Demo/CityBound}/searchResult.d.ts +0 -0
- /package/dist/{components/Demo → Demo}/Demo.css.d.ts +0 -0
- /package/src/{components/Demo → Demo/CityBound}/country.ts +0 -0
- /package/src/{components/Demo → Demo/CityBound}/searchResult.ts +0 -0
- /package/src/{components/Demo → Demo}/Demo.css.ts +0 -0
package/package.json
CHANGED
package/src/App.tsx
CHANGED
|
@@ -1,13 +1,27 @@
|
|
|
1
1
|
import { defineComponent } from "vue-demi";
|
|
2
|
-
import {
|
|
2
|
+
import { MapProvider } from "./components/MapProvider";
|
|
3
|
+
import { DemoBusinessRecomendPlace } from "./Demo/DemoBusinessRecomendPlace";
|
|
4
|
+
|
|
5
|
+
const gmapApiKey = import.meta.env.VITE_GMAP_API_KEY;
|
|
6
|
+
const gmapId = import.meta.env.VITE_GMAP_MAP_ID;
|
|
7
|
+
const amapApiKey = import.meta.env.VITE_AMAP_API_KEY;
|
|
8
|
+
const amapApiSecret = import.meta.env.VITE_AMAP_API_SECRET;
|
|
3
9
|
|
|
4
10
|
export const App = defineComponent({
|
|
5
11
|
setup() {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
+
return () => (
|
|
13
|
+
<MapProvider
|
|
14
|
+
amapKey={amapApiKey}
|
|
15
|
+
amapSecret={amapApiSecret}
|
|
16
|
+
gmapId={gmapId}
|
|
17
|
+
gmapKey={gmapApiKey}
|
|
18
|
+
supplier={"amap"}
|
|
19
|
+
>
|
|
20
|
+
<DemoBusinessRecomendPlace />
|
|
21
|
+
{/* <DemoBusinessQuoting /> */}
|
|
22
|
+
{/* <DemoBusinessTaxiService /> */}
|
|
23
|
+
{/* <DemoBusinessTaxiEnd /> */}
|
|
24
|
+
</MapProvider>
|
|
25
|
+
);
|
|
12
26
|
},
|
|
13
27
|
});
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { watchPostEffect } from "vue-demi";
|
|
2
|
+
import { HeycarMap, MapProvider } from "../../components/MapProvider/MapProvider";
|
|
2
3
|
import { useHeycarMap } from "../../hooks/useHeycarMap";
|
|
3
4
|
import { defineSetup } from "../../types/helper";
|
|
4
|
-
import
|
|
5
|
+
import * as css from "../Demo.css";
|
|
5
6
|
import { citiesWithCountry } from "./country";
|
|
6
|
-
import * as css from "./Demo.css";
|
|
7
7
|
import { searchResult } from "./searchResult";
|
|
8
8
|
|
|
9
9
|
const gmapApiKey = import.meta.env.VITE_GMAP_API_KEY;
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import { ref } from "vue-demi";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
2
|
+
import { Amap } from "../components/Amap";
|
|
3
|
+
import { AmapInfoWindow } from "../components/AmapInfoWindow";
|
|
4
|
+
import { AmapLoader } from "../components/AmapLoader";
|
|
5
|
+
import { AmapMarker } from "../components/AmapMarker";
|
|
6
|
+
import { AmapPolygon } from "../components/AmapPolygon";
|
|
7
|
+
import { AmapPolyline } from "../components/AmapPolyline";
|
|
8
|
+
import { Gmap } from "../components/Gmap";
|
|
9
|
+
import { GmapInfoWindow } from "../components/GmapInfoWindow";
|
|
10
|
+
import { GmapLoader } from "../components/GmapLoader";
|
|
11
|
+
import { GmapMarker } from "../components/GmapMarker";
|
|
12
|
+
import { GmapPolygon } from "../components/GmapPolygon";
|
|
13
|
+
import { GmapPolyline } from "../components/GmapPolyline";
|
|
14
|
+
import { defineSetup } from "../types/helper";
|
|
15
15
|
|
|
16
16
|
import * as css from "./Demo.css";
|
|
17
17
|
const gmapApiKey = import.meta.env.VITE_GMAP_API_KEY;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { BusinessQuotingMap } from "../business-components/BusinessQuotingMap";
|
|
2
|
+
import { useBusinessQuotingMap } from "../hooks-business/useBusinessQuotingMap";
|
|
3
|
+
import { defineSetup } from "../types/helper";
|
|
4
|
+
import * as css from "./Demo.css";
|
|
5
|
+
|
|
6
|
+
export const DemoBusinessQuoting = defineSetup(function DemoBusinessQuoting() {
|
|
7
|
+
const { setMap, registerFitVeiw } = useBusinessQuotingMap();
|
|
8
|
+
return () => (
|
|
9
|
+
<BusinessQuotingMap
|
|
10
|
+
class={css.demo}
|
|
11
|
+
from={{ lng: 121.4, lat: 31.2, name: "from place name" }}
|
|
12
|
+
to={{ lng: 121.5, lat: 31.4, name: "to place name" }}
|
|
13
|
+
renderDescription={({ distance, duration }) => `全程 *${distance}公里* 约行驶 *${duration}*`}
|
|
14
|
+
mapRef={setMap}
|
|
15
|
+
registerOverlay={registerFitVeiw}
|
|
16
|
+
/>
|
|
17
|
+
);
|
|
18
|
+
});
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { computed } from "vue-demi";
|
|
2
|
+
import {
|
|
3
|
+
BusinessRecomendPlaceMap,
|
|
4
|
+
BusinessRecomendPlaceMapProps,
|
|
5
|
+
} from "../business-components/BusinessRecomendPlaceMap";
|
|
6
|
+
import { useBusinessMapAutoComplete } from "../hooks-business/useBusinessMapAutoComplete";
|
|
7
|
+
import { useBusinessRecomendPlaceMap } from "../hooks-business/useBusinessRecomendPlaceMap";
|
|
8
|
+
import { defineSetup } from "../types/helper";
|
|
9
|
+
import * as css from "./Demo.css";
|
|
10
|
+
|
|
11
|
+
const SomeAutoComplete = defineSetup(function SomeAutoComplete(props: { cityName: string }) {
|
|
12
|
+
const { autoCompletePlaces, handleKeywordInput, setCity } = useBusinessMapAutoComplete({
|
|
13
|
+
cityNameRef: computed(() => props.cityName),
|
|
14
|
+
});
|
|
15
|
+
(window as any).setCity = setCity;
|
|
16
|
+
return () => {
|
|
17
|
+
const list = autoCompletePlaces.value.map((place) => [
|
|
18
|
+
<input onInput={handleKeywordInput} />,
|
|
19
|
+
<div>
|
|
20
|
+
{place.lng} | {place.lat} | {place.name} | {place.description}
|
|
21
|
+
</div>,
|
|
22
|
+
]);
|
|
23
|
+
return <div>{list}</div>;
|
|
24
|
+
};
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
export const DemoBusinessRecomendPlace = defineSetup(function DemoBusinessRecomendPlace() {
|
|
28
|
+
const getRecomendPlace: BusinessRecomendPlaceMapProps["getRecomendPlace"] = async (
|
|
29
|
+
place,
|
|
30
|
+
context
|
|
31
|
+
) => {
|
|
32
|
+
const { lat, lng } = place;
|
|
33
|
+
console.log("getRecomendPlace context?.source = ", context?.source);
|
|
34
|
+
return [
|
|
35
|
+
{ lat: lat + 0.0001, lng: lng + 0.0001, name: "place name 1" },
|
|
36
|
+
{ lat: lat + 0.002, lng: lng + 0.002, name: "place name 2" },
|
|
37
|
+
];
|
|
38
|
+
};
|
|
39
|
+
const { centerPlace, placeCandidates, setCenterPlaceByRecomand, mapContext, apiMapDistance } =
|
|
40
|
+
useBusinessRecomendPlaceMap();
|
|
41
|
+
setTimeout(() => {
|
|
42
|
+
const distance = apiMapDistance([0, 0], [1, 1]);
|
|
43
|
+
console.log("distance = ", distance);
|
|
44
|
+
}, 2000);
|
|
45
|
+
(window as any).setCenterPlaceByRecomand = setCenterPlaceByRecomand;
|
|
46
|
+
return () => {
|
|
47
|
+
return (
|
|
48
|
+
<div>
|
|
49
|
+
placeCandidates: {placeCandidates} <br />
|
|
50
|
+
centerPlace: {centerPlace.lng} | {centerPlace.lat} | {centerPlace.name} |{" "}
|
|
51
|
+
{centerPlace.cityName} <br />
|
|
52
|
+
<SomeAutoComplete cityName="上海市"></SomeAutoComplete>
|
|
53
|
+
<BusinessRecomendPlaceMap
|
|
54
|
+
class={css.demo}
|
|
55
|
+
unavailableTitle={"当前区域暂未开通服务"}
|
|
56
|
+
noRecomendDescription={"附近无推荐上车地点"}
|
|
57
|
+
recomendDescription={"最佳上车地点"}
|
|
58
|
+
geoDefaultPosition={[121, 31]}
|
|
59
|
+
getRecomendPlace={getRecomendPlace}
|
|
60
|
+
mapContext={mapContext}
|
|
61
|
+
onGeoError={(e) => console.log("onGeoError e = ", e)}
|
|
62
|
+
/>
|
|
63
|
+
</div>
|
|
64
|
+
);
|
|
65
|
+
};
|
|
66
|
+
});
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { BusinessTaxiEndMap } from "../business-components/BusinessTaxiEndMap";
|
|
2
|
+
import { defineSetup } from "../types/helper";
|
|
3
|
+
import * as css from "./Demo.css";
|
|
4
|
+
|
|
5
|
+
export const DemoBusinessTaxiEnd = defineSetup(function DemoBusinessTaxiEnd() {
|
|
6
|
+
return () => (
|
|
7
|
+
<BusinessTaxiEndMap
|
|
8
|
+
class={css.demo}
|
|
9
|
+
from={{ lng: 121.4, lat: 31.2, name: "from place name" }}
|
|
10
|
+
to={{ lng: 121.5, lat: 31.4, name: "to place name" }}
|
|
11
|
+
/>
|
|
12
|
+
);
|
|
13
|
+
});
|
|
@@ -1,38 +1,18 @@
|
|
|
1
|
-
import { BusinessTaxiServiceMap } from "
|
|
2
|
-
import { useBusinessTaxiServiceMap } from "
|
|
3
|
-
import { defineSetup } from "
|
|
4
|
-
import type { Point } from "
|
|
5
|
-
import { MapProvider } from "../MapProvider/MapProvider";
|
|
1
|
+
import { BusinessTaxiServiceMap } from "../business-components/BusinessTaxiServiceMap/BusinessTaxiServiceMap";
|
|
2
|
+
import { useBusinessTaxiServiceMap } from "../hooks-business/useBusinessTaxiServiceMap";
|
|
3
|
+
import { defineSetup } from "../types/helper";
|
|
4
|
+
import type { Point } from "../types/interface";
|
|
6
5
|
import * as css from "./Demo.css";
|
|
7
6
|
|
|
8
|
-
const gmapApiKey = import.meta.env.VITE_GMAP_API_KEY;
|
|
9
|
-
const gmapId = import.meta.env.VITE_GMAP_MAP_ID;
|
|
10
|
-
const amapApiKey = import.meta.env.VITE_AMAP_API_KEY;
|
|
11
|
-
const amapApiSecret = import.meta.env.VITE_AMAP_API_SECRET;
|
|
12
|
-
|
|
13
7
|
export const DemoBusinessTaxiService = defineSetup(function DemoBusinessTaxiService() {
|
|
14
|
-
|
|
15
|
-
<MapProvider
|
|
16
|
-
amapKey={amapApiKey}
|
|
17
|
-
amapSecret={amapApiSecret}
|
|
18
|
-
gmapId={gmapId}
|
|
19
|
-
gmapKey={gmapApiKey}
|
|
20
|
-
supplier={"amap"}
|
|
21
|
-
>
|
|
22
|
-
<TaxiCarServicePage />
|
|
23
|
-
</MapProvider>
|
|
24
|
-
);
|
|
25
|
-
});
|
|
26
|
-
|
|
27
|
-
export const TaxiCarServicePage = defineSetup(function TaxiCarServicePage() {
|
|
28
|
-
const { setMap, setFitView, registerFitVeiw } = useBusinessTaxiServiceMap();
|
|
8
|
+
const { setMap, registerFitVeiw } = useBusinessTaxiServiceMap();
|
|
29
9
|
const getDriverPosition = () => Promise.resolve([121.42, 31.25] as Point);
|
|
30
10
|
return () => (
|
|
31
11
|
<BusinessTaxiServiceMap
|
|
32
12
|
class={css.demo}
|
|
33
13
|
from={{ lng: 121.4, lat: 31.2, name: "from place name" }}
|
|
34
14
|
to={{ lng: 121.5, lat: 31.4, name: "to place name" }}
|
|
35
|
-
driverStatus="
|
|
15
|
+
driverStatus="completed"
|
|
36
16
|
bookDispatchingTitle="2月14日 11:00 用车"
|
|
37
17
|
bookDispatchedTitle="司机位置将在临近出发时间展示"
|
|
38
18
|
dispatchingTitle="正在为您搜索附近司机"
|
|
@@ -21,8 +21,9 @@ export interface CenterPlaceSource {
|
|
|
21
21
|
export interface BusinessRecomendPlaceMapProps
|
|
22
22
|
extends Omit<HeycarMapProps, "center" | "zoom" | "mapRef">,
|
|
23
23
|
Pick<UseMapRecomendPlaceProps<CenterPlaceSource>, "getRecomendPlace"> {
|
|
24
|
-
|
|
25
|
-
|
|
24
|
+
unavailableTitle: string;
|
|
25
|
+
recomendDescription: string;
|
|
26
|
+
noRecomendDescription: string;
|
|
26
27
|
geoDefaultPosition?: Point;
|
|
27
28
|
mapContext: BusinessRecomendPlaceContext;
|
|
28
29
|
onLoadGeoLocation?: UseGeoLocationProps["onLoad"];
|
|
@@ -94,37 +95,39 @@ export const BusinessRecomendPlaceMap = defineLagecySetup(
|
|
|
94
95
|
emit("changeByDrag", point);
|
|
95
96
|
},
|
|
96
97
|
});
|
|
97
|
-
const { updatePlace, updateRecomandPlace, placeCandidates } = useMapRecomendPlace(
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
98
|
+
const { updatePlace, updateRecomandPlace, placeCandidates, availableRef } = useMapRecomendPlace(
|
|
99
|
+
{
|
|
100
|
+
pointRef: centerPoint,
|
|
101
|
+
context: centerSource,
|
|
102
|
+
getRecomendPlace,
|
|
103
|
+
getLimit: (context) => {
|
|
104
|
+
const source = context?.source;
|
|
105
|
+
switch (source) {
|
|
106
|
+
case "drag":
|
|
107
|
+
case "api":
|
|
108
|
+
return RECOMMEND_PLACE_LIMIT;
|
|
109
|
+
case "geo":
|
|
110
|
+
case "default":
|
|
111
|
+
return Infinity;
|
|
112
|
+
default:
|
|
113
|
+
throw new Error(`MyError: should not call getLimit on source: ${source}`);
|
|
114
|
+
}
|
|
115
|
+
},
|
|
116
|
+
onChangePlace: (place) => {
|
|
117
|
+
Object.assign(centerPlace, { ...place });
|
|
118
|
+
if (centerSource.source !== "recomend") {
|
|
119
|
+
updateRecomandPlace();
|
|
120
|
+
}
|
|
121
|
+
emit("changePlace", place);
|
|
122
|
+
},
|
|
123
|
+
onChange: (place) => {
|
|
124
|
+
centerSource.source = "recomend";
|
|
125
|
+
Object.assign(centerPlace, { ...place });
|
|
126
|
+
updatePlace();
|
|
127
|
+
emit("changeRecomandPlace", place);
|
|
128
|
+
},
|
|
129
|
+
}
|
|
130
|
+
);
|
|
128
131
|
watchEffect(() => {
|
|
129
132
|
mapContext.onChangeCenterPlace({ ...centerPlace });
|
|
130
133
|
});
|
|
@@ -132,26 +135,32 @@ export const BusinessRecomendPlaceMap = defineLagecySetup(
|
|
|
132
135
|
mapContext.onChangeRecomendPlaces([...placeCandidates.value]);
|
|
133
136
|
});
|
|
134
137
|
return () => {
|
|
138
|
+
const description = !availableRef.value
|
|
139
|
+
? undefined
|
|
140
|
+
: placeCandidates.value.length > 0
|
|
141
|
+
? props.recomendDescription
|
|
142
|
+
: props.noRecomendDescription;
|
|
135
143
|
return (
|
|
136
144
|
<HeycarMap center={centerPoint.value} zoom={18} mapRef={setMap}>
|
|
137
145
|
<PassengerCircle position={geoPosition.value} />
|
|
138
146
|
<PickupPoints places={placeCandidates.value} onClick={setCenterByPlace} />
|
|
139
147
|
<AddressBox
|
|
140
148
|
position={centerPoint.value}
|
|
141
|
-
title={props.
|
|
142
|
-
description={
|
|
143
|
-
type={isDragging ? "locator" : "box"}
|
|
149
|
+
title={availableRef.value ? centerPlace.name : props.unavailableTitle}
|
|
150
|
+
description={description}
|
|
151
|
+
type={isDragging.value ? "locator" : "box"}
|
|
144
152
|
/>
|
|
145
153
|
</HeycarMap>
|
|
146
154
|
);
|
|
147
155
|
};
|
|
148
156
|
}
|
|
149
157
|
).props([
|
|
150
|
-
"
|
|
158
|
+
"unavailableTitle",
|
|
159
|
+
"recomendDescription",
|
|
160
|
+
"noRecomendDescription",
|
|
151
161
|
"fallback",
|
|
152
162
|
"geoDefaultPosition",
|
|
153
163
|
"getRecomendPlace",
|
|
154
164
|
"loading",
|
|
155
165
|
"mapContext",
|
|
156
|
-
"title",
|
|
157
166
|
]);
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { HeycarMap } from "../../components/MapProvider";
|
|
2
|
+
import { useHeycarMap } from "../../hooks/useHeycarMap";
|
|
3
|
+
import { useMapFitView } from "../../hooks/useMapFitView";
|
|
4
|
+
import { defineSetup } from "../../types/helper";
|
|
5
|
+
import type { Place } from "../../types/interface";
|
|
6
|
+
import { place2point } from "../../utils/transform";
|
|
7
|
+
import { SectionEndService } from "../BusinessTaxiServiceMap";
|
|
8
|
+
|
|
9
|
+
export interface BusinessTaxiEndMapProps {
|
|
10
|
+
from: Place;
|
|
11
|
+
to: Place;
|
|
12
|
+
}
|
|
13
|
+
export const BusinessTaxiEndMap = defineSetup((props: BusinessTaxiEndMapProps) => {
|
|
14
|
+
const { mapRef, setMap } = useHeycarMap();
|
|
15
|
+
const { registerFitVeiw, setFitView } = useMapFitView({
|
|
16
|
+
mapRef,
|
|
17
|
+
autoFitTimeout: 5000,
|
|
18
|
+
padding: [25, 20, 15, 15],
|
|
19
|
+
});
|
|
20
|
+
return () => {
|
|
21
|
+
const { from, to } = props;
|
|
22
|
+
return (
|
|
23
|
+
<HeycarMap center={place2point(from)} zoom={13} mapRef={setMap}>
|
|
24
|
+
<SectionEndService
|
|
25
|
+
from={from}
|
|
26
|
+
to={to}
|
|
27
|
+
registerOverlay={registerFitVeiw}
|
|
28
|
+
onMapMounted={setFitView}
|
|
29
|
+
/>
|
|
30
|
+
</HeycarMap>
|
|
31
|
+
);
|
|
32
|
+
};
|
|
33
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./BusinessTaxiEndMap";
|
|
@@ -198,12 +198,12 @@ const SectionCanceled = defineSetup((props: SectionCanceledProps, { emit }) => {
|
|
|
198
198
|
};
|
|
199
199
|
});
|
|
200
200
|
|
|
201
|
-
type SectionEndServiceProps = MROP &
|
|
201
|
+
export type SectionEndServiceProps = MROP &
|
|
202
202
|
MapMountedProps & {
|
|
203
203
|
from: Place;
|
|
204
204
|
to: Place;
|
|
205
205
|
};
|
|
206
|
-
const SectionEndService = defineSetup((props: SectionEndServiceProps, { emit }) => {
|
|
206
|
+
export const SectionEndService = defineSetup((props: SectionEndServiceProps, { emit }) => {
|
|
207
207
|
onMapMounted(() => emit("mapMounted"));
|
|
208
208
|
return () => {
|
|
209
209
|
const { from: fromPlace, to: toPlace, registerOverlay } = props;
|
|
@@ -4,18 +4,18 @@ import { Status } from "./useMapLoader";
|
|
|
4
4
|
import { useMapSupplier } from "./useMapSupplier";
|
|
5
5
|
|
|
6
6
|
export const useAmapGeometry = () => {
|
|
7
|
-
const
|
|
7
|
+
const payload = useMapSupplier();
|
|
8
8
|
const apiMapDistance = (from: Point, to: Point) => {
|
|
9
|
-
if (status !== Status.SUCCESS) return undefined;
|
|
9
|
+
if (payload.status !== Status.SUCCESS) return undefined;
|
|
10
10
|
return AMap.GeometryUtil.distance(from, to);
|
|
11
11
|
};
|
|
12
12
|
return { apiMapDistance };
|
|
13
13
|
};
|
|
14
14
|
|
|
15
15
|
export const useGmapGeometry = () => {
|
|
16
|
-
const
|
|
16
|
+
const payload = useMapSupplier();
|
|
17
17
|
const apiMapDistance = (from: Point, to: Point) => {
|
|
18
|
-
if (status !== Status.SUCCESS) return undefined;
|
|
18
|
+
if (payload.status !== Status.SUCCESS) return undefined;
|
|
19
19
|
return google.maps.geometry.spherical.computeDistanceBetween(vec2lnglat(from), vec2lnglat(to));
|
|
20
20
|
};
|
|
21
21
|
return { apiMapDistance };
|
|
@@ -33,12 +33,14 @@ export interface UseMapRecomendPlaceProps<C = Record<string, any>> {
|
|
|
33
33
|
pointRef: Ref<Point>;
|
|
34
34
|
context?: C;
|
|
35
35
|
getLimit: (context?: C) => number;
|
|
36
|
-
|
|
36
|
+
// 如果返回 undefined, 表示当前位置无服务可提供
|
|
37
|
+
getRecomendPlace: (place: Place, context?: C) => Promise<Place[] | undefined>;
|
|
37
38
|
onChangePlace?: UseMapPlaceProps["onChange"];
|
|
38
39
|
onChange?: (place: Place) => any;
|
|
39
40
|
}
|
|
40
41
|
export const useAmapRecomendPlace = <C>(props: UseMapRecomendPlaceProps<C>) => {
|
|
41
42
|
const { pointRef, getRecomendPlace, getLimit, context, onChange, onChangePlace } = props;
|
|
43
|
+
const availableRef = ref(true);
|
|
42
44
|
const placeCandidatesRef = ref<Place[]>([]);
|
|
43
45
|
const { idx: recomendPlaceKey, update: updateRecomandPlace } = useUpdate();
|
|
44
46
|
const { readyPromise } = useMapSupplier();
|
|
@@ -49,19 +51,34 @@ export const useAmapRecomendPlace = <C>(props: UseMapRecomendPlaceProps<C>) => {
|
|
|
49
51
|
async () => {
|
|
50
52
|
await readyPromise;
|
|
51
53
|
const placeCandidates = await getRecomendPlace({ ...place }, context);
|
|
54
|
+
if (placeCandidates === undefined) {
|
|
55
|
+
availableRef.value = false;
|
|
56
|
+
placeCandidatesRef.value = [];
|
|
57
|
+
Object.assign(recomendPlace, { ...place });
|
|
58
|
+
onChange?.({ ...place });
|
|
59
|
+
return;
|
|
60
|
+
}
|
|
52
61
|
const { shortestPlace, shortestDistance } = findAmapNearestPlace(place, placeCandidates);
|
|
53
62
|
const limit = getLimit(context);
|
|
54
63
|
const resultPlace = shortestDistance > limit ? place : shortestPlace;
|
|
64
|
+
availableRef.value = true;
|
|
55
65
|
placeCandidatesRef.value = placeCandidates;
|
|
56
66
|
Object.assign(recomendPlace, { ...resultPlace });
|
|
57
67
|
onChange?.({ ...resultPlace });
|
|
58
68
|
}
|
|
59
69
|
);
|
|
60
|
-
return {
|
|
70
|
+
return {
|
|
71
|
+
recomendPlace,
|
|
72
|
+
placeCandidates: placeCandidatesRef,
|
|
73
|
+
availableRef,
|
|
74
|
+
updateRecomandPlace,
|
|
75
|
+
updatePlace,
|
|
76
|
+
};
|
|
61
77
|
};
|
|
62
78
|
|
|
63
79
|
export const useGmapRecomendPlace = <C>(props: UseMapRecomendPlaceProps<C>) => {
|
|
64
80
|
const { pointRef, getRecomendPlace, getLimit, context, onChange, onChangePlace } = props;
|
|
81
|
+
const availableRef = ref(true);
|
|
65
82
|
const placeCandidatesRef = ref<Place[]>([]);
|
|
66
83
|
const { idx: recomendPlaceKey, update: updateRecomandPlace } = useUpdate();
|
|
67
84
|
const { readyPromise } = useMapSupplier();
|
|
@@ -72,15 +89,29 @@ export const useGmapRecomendPlace = <C>(props: UseMapRecomendPlaceProps<C>) => {
|
|
|
72
89
|
async () => {
|
|
73
90
|
await readyPromise;
|
|
74
91
|
const placeCandidates = await getRecomendPlace({ ...place }, context);
|
|
92
|
+
if (placeCandidates === undefined) {
|
|
93
|
+
availableRef.value = false;
|
|
94
|
+
placeCandidatesRef.value = [];
|
|
95
|
+
Object.assign(recomendPlace, { ...place });
|
|
96
|
+
onChange?.({ ...place });
|
|
97
|
+
return;
|
|
98
|
+
}
|
|
75
99
|
const { shortestPlace, shortestDistance } = findGmapNearestPlace(place, placeCandidates);
|
|
76
100
|
const limit = getLimit(context);
|
|
77
101
|
const resultPlace = shortestDistance > limit ? place : shortestPlace;
|
|
102
|
+
availableRef.value = true;
|
|
78
103
|
placeCandidatesRef.value = placeCandidates;
|
|
79
104
|
Object.assign(recomendPlace, { ...resultPlace });
|
|
80
105
|
onChange?.({ ...resultPlace });
|
|
81
106
|
}
|
|
82
107
|
);
|
|
83
|
-
return {
|
|
108
|
+
return {
|
|
109
|
+
recomendPlace,
|
|
110
|
+
placeCandidates: placeCandidatesRef,
|
|
111
|
+
availableRef,
|
|
112
|
+
updateRecomandPlace,
|
|
113
|
+
updatePlace,
|
|
114
|
+
};
|
|
84
115
|
};
|
|
85
116
|
|
|
86
117
|
export const useMapRecomendPlace = <C>(props: UseMapRecomendPlaceProps<C>) => {
|
package/src/index.ts
CHANGED
|
@@ -2,6 +2,7 @@ import "./style.css";
|
|
|
2
2
|
export { AddressBox } from "./business-components/AddressBox";
|
|
3
3
|
export { BusinessQuotingMap } from "./business-components/BusinessQuotingMap";
|
|
4
4
|
export { BusinessRecomendPlaceMap } from "./business-components/BusinessRecomendPlaceMap";
|
|
5
|
+
export { BusinessTaxiEndMap } from "./business-components/BusinessTaxiEndMap";
|
|
5
6
|
export { BusinessTaxiServiceMap } from "./business-components/BusinessTaxiServiceMap";
|
|
6
7
|
export { DrivingLine } from "./business-components/DrivingLine";
|
|
7
8
|
export { DrivingRoute } from "./business-components/DrivingRoute";
|
package/todo.md
CHANGED
|
@@ -23,3 +23,9 @@ https://dawchihliou.github.io/articles/building-custom-google-maps-marker-react-
|
|
|
23
23
|
2. locator 气泡长度限制
|
|
24
24
|
3. locator 拖动次数多了会不更新
|
|
25
25
|
4. 郝瑞 searh Place 接口搜索次数多了会不更新
|
|
26
|
+
|
|
27
|
+
---
|
|
28
|
+
|
|
29
|
+
1. apiDistance 在 created 生命周期里调用的时候,即便设置了 5 秒延迟,运行到 api 内部的时候 status === 'loading'
|
|
30
|
+
2. getRecomend 接口需要增加一个返回参数,表示当前地区是否可以提供服务
|
|
31
|
+
3. 孙明 刚才传入 complted 状态,地图未显示
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
export declare const ABusinessDemo: import("vue").DefineComponent<import("vue/types/v3-component-props").ComponentObjectPropsOptions<unknown>, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").EmitByProps<unknown, Required<unknown>>, never, unknown, {}>;
|
|
2
|
-
export declare const GBusinessDemo: import("vue").DefineComponent<import("vue/types/v3-component-props").ComponentObjectPropsOptions<unknown>, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").EmitByProps<unknown, Required<unknown>>, never, unknown, {}>;
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
export declare const DemoGmap: import("vue-demi").DefineComponent<import("vue/types/v3-component-props").ComponentObjectPropsOptions<unknown>, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").EmitByProps<unknown, Required<unknown>>, never, unknown, {}>;
|
|
2
|
-
export declare const DemoAmap: import("vue-demi").DefineComponent<import("vue/types/v3-component-props").ComponentObjectPropsOptions<unknown>, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").EmitByProps<unknown, Required<unknown>>, never, unknown, {}>;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const DemoBusinessQuoting: import("vue").DefineComponent<import("vue/types/v3-component-props").ComponentObjectPropsOptions<unknown>, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").EmitByProps<unknown, Required<unknown>>, never, unknown, {}>;
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
export declare const DemoBusinessTaxiService: import("vue").DefineComponent<import("vue/types/v3-component-props").ComponentObjectPropsOptions<unknown>, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").EmitByProps<unknown, Required<unknown>>, never, unknown, {}>;
|
|
2
|
-
export declare const TaxiCarServicePage: import("vue").DefineComponent<import("vue/types/v3-component-props").ComponentObjectPropsOptions<unknown>, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").EmitByProps<unknown, Required<unknown>>, never, unknown, {}>;
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
export declare const Hello: import("vue").DefineComponent<import("vue/types/v3-component-props").ComponentObjectPropsOptions<{
|
|
2
|
-
className?: string | undefined;
|
|
3
|
-
qyc: number;
|
|
4
|
-
style: any;
|
|
5
|
-
}>, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").EmitByProps<{
|
|
6
|
-
className?: string | undefined;
|
|
7
|
-
qyc: number;
|
|
8
|
-
style: any;
|
|
9
|
-
}, Required<{
|
|
10
|
-
className?: string | undefined;
|
|
11
|
-
qyc: number;
|
|
12
|
-
style: any;
|
|
13
|
-
}>>, never, {
|
|
14
|
-
className?: string | undefined;
|
|
15
|
-
qyc: number;
|
|
16
|
-
style: any;
|
|
17
|
-
}, {}>;
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
export declare const HeycarDemo: import("vue-demi").DefineComponent<import("vue/types/v3-component-props").ComponentObjectPropsOptions<unknown>, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").EmitByProps<unknown, Required<unknown>>, never, unknown, {}>;
|
|
2
|
-
export declare const SomeOuterPage: import("vue-demi").DefineComponent<import("vue/types/v3-component-props").ComponentObjectPropsOptions<unknown>, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").EmitByProps<unknown, Required<unknown>>, never, unknown, {}>;
|
|
3
|
-
export declare const SomeHomePage: import("vue-demi").DefineComponent<import("vue/types/v3-component-props").ComponentObjectPropsOptions<unknown>, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").EmitByProps<unknown, Required<unknown>>, never, unknown, {}>;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./Demo";
|