经度 103.841974， 纬度 1.311295 在高德地图上的坐标类型是:
{toAmapCoordinateType([103.841974, 1.311295])}
);
},
});
```
#### 打车状态流转业务的地图组件 `BusinessTaxiServiceMap`
对于 jsx/tsx 文件的例子
```jsx
import { defineComponent } from "vue";
import { BusinessTaxiServiceMap, useBusinessTaxiServiceMap } from "@heycar/heycars-map";
export default defineComponent({
setup() {
const { mapContext } = useBusinessTaxiServiceMap();
return () => (
"*6月12日 11:00* 用车"}
driverArrivedTitle="司机已等待 00:35"
renderStartSerivceTitle={({ distance, duration }) =>
`距你*${distance}*公里, *${duration}*分钟`
}
renderInServiceTitle={({ distance, duration }) =>
`距离终点*${distance}*公里, 预计*${duration}*分钟`
}
getDriverPositionTrack={async () => {
// 向后端请求司机的历史轨迹
return Promise.resolve([
{ lng: 121.4036983, lat: 31.216324, type: "gcj02", angle: 30, timestamp: 1698058438000 },
{ lng: 121.4036983, lat: 31.216324, type: "gcj02", angle: 30, timestamp: 1698058439000 },
{ lng: 121.403581, lat: 31.216415, type: "gcj02", angle: 30, timestamp: 1698058442000 },
]);
}}
// getDriverRouteOrTrack 与 getDriverPositionTrack 二选一
getDriverRouteOrTrack={async () => {
// 后端返回司机的真实导航路径或者历史轨迹
return Promise.resolve({
routes: {
distance: 4270,
duration: 1310,
path: [
{lng: 121.401554, lat: 31.21653, type: "gcj02"},
{lng: 121.401554, lat: 31.21653, type: "gcj02"},
{lng: 121.401795, lat: 31.21654, type: "gcj02"},
],
},
});
}}
interval={5000}
mapContext={mapContext}
/>
);
},
});
```
#### 服务结束的地图组件
对于 jsx/tsx 文件的例子
```jsx
import { defineComponent } from "vue";
import { BusinessTaxiEndMap } from "@heycar/heycars-map";
export default defineComponent({
setup() {
return () => (
);
},
});
```
#### 下面是基础业务组件的使用方法，但是目前阶段不推荐使用
下列是一些更加基础的业务组件， 虽然导出了，但是目前阶段不推荐使用
- `AbsoluteAddressBox`
- `DrivingLine`
- `PassengerCircle`
- `PlaceCircle`
- `StartEndPoint`
- `TaxiCar`
- `WalkingLine`
- `WaveCircle`
- `DrivingRoute`
- `WalkingRoute`
- `PickupPoints`
#### 在地图里使用 `AddressBox` ，需要放在 `HeycarMap` 内部
```jsx
...
...
```
- 对于 vue 文件的例子
```vue
error
loading
...
...
```
#### `HeycarMap` 的基本用法
- 对于 jsx/tsx 文件的例子
```jsx
error
}
// 地图还没有加载完成时要显示的内容
loading={() => loading
}
// 地图中心点
center={[0, 0]}
// 地图放缩
zoom={3}
>
...
```
- 对于 vue 文件的例子
```vue
error
loading
...
```
#### 关于 enableAuxiliaryGraspRoad 模式
enableAuxiliaryGraspRoad 模式适用场景：
- 测试司机位置偏移 的优化效果
- 目前只能在国内打车，测试优化效果。
- 目前只能用 splytech 供应商进行测试。
测试时的注意点：
1. 起点和终点 在 splytech 后台系统地图上的位置是错误的。
为了方便测试 司机位置偏移 的优化效果，在 enableAuxiliaryGraspRoad 模式下会显示下列辅助信息：
1. 会显示两个导航路线，蓝色跟设计稿样式一致的是原来的导航路径，红色的是司机位置纠偏以后计算的导航路径。
2. 会显示两个车辆，跟设计稿样式一致的是原来的车辆，虚影的车辆是司机位置纠偏以后的车辆。
3. 会将供应商提供的司机位置显示为蓝色标记，辅助观察供应商提供的司机位置。
4. 会显示一条黑色的路径，表示将供应商提供的位置纠偏以后的路径。
5. enableAuxiliaryGraspRoad 模式下，为了方便测试，取消了屏幕 15 秒自动调整功能。
#### 下面是地图导出的一些基本工具
```ts
import { isCoordinatePointEqual } from "@heycar/heycars-map";
// 比较两个带有坐标类型的点是否为同一个点
isCoordinatePointEqual(
{ type: "gcj02", lng: 114.215114, lat: 22.215972 },
{ type: "wgs84", lng: 114.21016180538568, lat: 22.219570659901557 },
) === true;
```
```ts
import { inChina, inHongKong, inMacau, inTaiwan, inKorean } from "@heycar/heycars-map";
// 判断某点是否在某区域内
const point = [114.215114, 22.215972];
// 是否在中国 (不包含台湾)
inChina(point);
// 是否在香港
inHongKong(point);
// 是否在澳门
inMacau(point);
// 是否在台湾
inTaiwan(point);
// 是否在韩国
inKorean(point);
// 是否在谷歌、高德地图坐标系存在差异区域
inKorean(point);
```