@heycar/heycars-map-react
v0.2.19
Published
时间关系,先写个简要文档,之后会补一个全面的文档。
Downloads
139
Keywords
Readme
说明
时间关系,先写个简要文档,之后会补一个全面的文档。
安装
# 安装依赖包
npm install @heycar/heycars-map-react --save
加载地图样式
import "@heycar/heycars-map-react/dist/style.css";
使用
目前有下列常用数据结构
export type Point = [number, number];
export type Place = {
lng: number;
lat: number;
name: string;
};
在 入口文件添加 MapProvider
- 对于 jsx/tsx 文件的例子
<MapProvider
// 高德地图 api key
amapKey={amapApiKey}
// 高德地图 secret
amapSecret={amapApiSecret}
// 谷歌地图 id
gmapId={gmapId}
// 谷歌地图 api key
gmapKey={gmapApiKey}
// 使用哪个地图供应商,目前两个供应商: amap 高德 / gmap 谷歌
supplier={"amap"}
>
...
</MapProvider>
在地图里可以使用的组件
为了方便集成,已经将常用业务逻辑集成在四个业务组件里面,下面是推荐使用的业务组件
BusinessRecomendPlaceMap
BusinessQuotingMap
BusinessTaxiServiceMap
BusinessTaxiEndMap
下面三个是推荐搭配使用的业务 hooks
useBusinessRecomendPlaceMap
useBusinessQuotingMap
useBusinessTaxiServiceMap
选择上车点和推荐点的地图组件 BusinessRecomendPlaceMap
import { useBusinessRecomendPlaceMap, BusinessRecomendPlaceMap } from "@heycar/heycars-map-react";
function DemoForBusinessRecomendPlaceMap() {
const { mapContext, centerPlace, setCenterPlaceByUserSpecified } = useBusinessRecomendPlaceMap();
return (
<BusinessRecomendPlaceMap
className={"demo"}
geoLoadingTitle={"正在获取您当前的位置"}
unavailableTitle={"当前区域暂未开通服务"}
recomendDescription={"您将在此处上车"}
geoDefaultPosition={[139.777777, 35.777777]}
getRecomendPlace={async ({ lng, lat }) => {
// 获取推荐点。如果没有数据,可以返回 undefined
return {
available: true,
zone: {
name: "香港迪斯尼乐园",
path: [
[lng - 0.001, lat + 0.001],
[lng, lat - 0.001],
[lng + 0.001, lat + 0.0005],
],
},
places: [
{ lat: lat - 0.00001, lng: lng + 0.0001, name: "place 1" },
{ lat: lat - 0.0002, lng: lng + 0.0002, name: "place 2" },
{ lat: lat - 0.0002, lng: lng - 0.0001, name: "place 3" },
],
};
}}
getDefaultCenterPlace={async () => {
// 获取最后一次上车点
return { lng: 139, lat: 35, name: "user last pickup place" };
}}
onChangePlace={() =>
console.log("用户操作地图,导致地址变更时触发,此时可以向后端查询城市信息")
}
onClickLocator={() =>
console.log("用户点击了蓝色光标触发,此时可以执行用户点击起点输入框相同的逻辑")
}
onGeoError={() => {
console.log("获取GPS失败时触发,此时可以弹框告诉用户");
}}
mapContext={mapContext}
/>
);
}
询价业务的地图组件 BusinessQuotingMap
import { useBusinessQuotingMap, BusinessQuotingMap } from "@heycar/heycars-map-react";
function DemoForBusinessQuotingMap() {
const { setMap, registerFitVeiw } = useBusinessQuotingMap();
return (
<BusinessQuotingMap
className={"demo"}
to={{ name: "深圳宝安国际机场", lat: 22.625687, lng: 113.81147 }}
from={{ name: "香港国际机场", lat: 22.308527, lng: 113.91851 }}
waypointCandidates={[
[113.950999, 22.490871],
[113.980826, 22.448231],
]}
fromDescription={"您将在此上车"}
renderDescription={({ distance, duration }) =>
`全程 *${distance / 1000}公里* 约行驶 *${duration}*`
}
mapRef={setMap}
registerOverlay={registerFitVeiw}
onClickPlaceFrom={() => console.log("用户点击起点图标时触发")}
onClickPlaceTo={() => console.log("用户点击终点图标时触发")}
onChangeDrivingRoute={({ distance, duration }) =>
console.log(`驾车路线变更时触发: ${distance}米 ${duration}秒`)
}
/>
);
}
打车状态流转业务的地图组件 BusinessTaxiServiceMap
import {
useBusinessTaxiServiceMap,
BusinessTaxiServiceMap,
DriverStatus,
} from "@heycar/heycars-map-react";
function DemoForBusinessTaxiServiceMap() {
const { setMap, registerFitVeiw } = useBusinessTaxiServiceMap();
const status: DriverStatus = "dispatching";
return (
<BusinessTaxiServiceMap
className={css.adjustedDemo}
from={from}
to={to}
driverStatus={status}
submitTitle="2月14日 11:00 用车"
confirmNoCarTitle="出发前1小时可见司机位置"
arriveTitle="司机已等待 00:35"
renderSetOutTitle={({ distance, duration }) => `距你*${distance}*公里, *${duration}*分钟`}
renderDrivingTitle={({ distance, duration }) =>
`距离终点*${distance}*公里, 预计*${duration}*分钟`
}
getDriverPosition={async () => {
// 向后端请求司机位置和车头方向
return { position: [121.4136983, 31.216324] as Point, angle: 30 }
}}
interval={5000}
mapRef={setMap}
registerOverlay={registerFitVeiw}
onChangeDrivingRoute={({ distance, duration }) =>
console.log(`当行驶路线变更时触发,行程${distance}米,${duration}秒`)
}
/>
);
}
服务结束的地图组件
<BusinessTaxiEndMap
className={"demo"}
to={{ name: "深圳宝安国际机场", lat: 22.625687, lng: 113.81147 }}
from={{ name: "香港国际机场", lat: 22.308527, lng: 113.91851 }}
waypointCandidates={[
[113.950999, 22.490871],
[113.980826, 22.448231],
]}
/>
下面是基础业务组件的使用方法,但是目前阶段不推荐使用
下列是一些更加基础的业务组件, 虽然导出了,但是目前阶段不推荐使用
AbsoluteAddressBox
DrivingLine
PassengerCircle
PlaceCircle
StartEndPoint
TaxiCar
WalkingLine
WaveCircle
DrivingRoute
WalkingRoute
PickupPoints
在地图里使用 AbsoluteAddressBox
,需要放在 HeycarMap
内部
<HeycarMap center={[0, 0]} zoom={3}>
...
<AbsoluteAddressBox position={[0, 0]} title={"Martyrs Lawn"} description={"您将在此处上车"} />
...
</HeycarMap>
在需要用到地图的地方添加 HeycarMap
- 对于 jsx/tsx 文件的例子
<HeycarMap
class="any class name"
// 地图加载失败要显示的内容
fallback={<div>error</div>}
// 地图还没有加载完成时要显示的内容
loading={<div>loading</div>}
// 地图中心点
center={[0, 0]}
// 地图放缩
zoom={3}
>
...
</HeycarMap>