@react-native-ohos/react-native-baidu-map
v1.2.0
Published
Baidu Map SDK modules and views for React Native, support react native 0.61+. 百度地图 React Native 模块，支持 react native 0.61+，已更新到最新的百度地图 SDK 版本。
Readme
模板版本：v0.4.1
本项目基于 react-native-baidu-map 开发。
| 三方库名称 | 三方库版本 | 发布信息 | 支持RN版本 | Autolink | 编译API版本 | 社区基线版本 | npm地址 | | ----------------------------------------------- | ---------------- | --------------------------------------------------------------------------- | --------------- | -------- | ------- | ------ | ------------------------------------------------------------------------------------------ | | @react-native-ohos/react-native-baidu-map | ~1.2.0(开发中) | GitCode Releases | 0.82 | 是 | API12+ | 1.0.37 | Npm Address | | @react-native-ohos/react-native-baidu-map | ~1.1.0 | GitCode Releases | 0.77 | 否 | API12+ | 1.0.37 | Npm Address | | @react-native-ohos/react-native-baidu-map | ~1.0.38 | GitCode Releases | 0.72 | 是 | API12+ | 1.0.37 | Npm Address | | @react-native-oh-tpl/react-native-baidu-map | <= 1.0.37-0.0.5@deprecated | Github Releases | 0.72 | 否 | API12+ | 1.0.37 | Npm Address |
安装与使用
请到三方库的 Releases 发布地址查看配套的版本信息：@react-native-ohos/react-native-baidu-map Releases 。对于未发布到npm的旧版本，请参考安装指南安装tgz包。
进入到工程目录并输入以下命令：
npm
npm install @react-native-ohos/react-native-baidu-mapyarn
yarn add @react-native-ohos/react-native-baidu-mapLink
| | 是否支持autolink | RN框架版本 | |--------------------------------------|-----------------|------------| | ~1.2.0 | 是 | 0.82 |
使用AutoLink的工程需要根据该文档配置，Autolink框架指导文档：https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md
如您使用的版本支持 Autolink，并且工程已接入 Autolink，可跳过ManualLink配置。
首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 harmony。
1. 在工程根目录的 oh-package.json5 添加 overrides 字段
{
...
"overrides": {
"@rnoh/react-native-openharmony": "./react_native_openharmony"
}
}2. 引入原生端代码
目前有两种方法：
- 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）；
- 直接链接源码。
方法一：通过 har 包引入（推荐）
[!TIP] har 包位于三方库安装路径的
harmony文件夹下。
打开 entry/oh-package.json5，添加以下依赖
"dependencies": {
"@rnoh/react-native-openharmony": "file:../react_native_openharmony",
"@react-native-ohos/react-native-baidu-map": "file:../../node_modules/@react-native-ohos/react-native-baidu-map/harmony/baidu_map.har"
}点击右上角的 sync 按钮
或者在终端执行：
cd entry
ohpm install方法二：直接链接源码
[!TIP] 如需使用直接链接源码，请参考直接链接源码说明
3. 配置 CMakeLists 和引入 BaiduMapPackage
若使用的是 <= 1.0.37-0.0.5 版本，请跳过本章。
打开 entry/src/main/cpp/CMakeLists.txt，添加：
project(rnapp)
cmake_minimum_required(VERSION 3.4.1)
set(CMAKE_SKIP_BUILD_RPATH TRUE)
set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}")
set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules")
+ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")
set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp")
set(LOG_VERBOSITY_LEVEL 1)
set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments")
set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie")
set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use
add_compile_definitions(WITH_HITRACE_SYSTRACE)
add_subdirectory("${RNOH_CPP_DIR}" ./rn)
# RNOH_BEGIN: manual_package_linking_1
add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package)
+ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-baidu-map/src/main/cpp" ./baidu-map)
# RNOH_END: manual_package_linking_1
file(GLOB GENERATED_CPP_FILES "./generated/*.cpp")
add_library(rnoh_app SHARED
${GENERATED_CPP_FILES}
"./PackageProvider.cpp"
"${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp"
)
target_link_libraries(rnoh_app PUBLIC rnoh)
# RNOH_BEGIN: manual_package_linking_2
target_link_libraries(rnoh_app PUBLIC rnoh_sample_package)
+ target_link_libraries(rnoh_app PUBLIC rnoh_baidu_map)
# RNOH_END: manual_package_linking_2打开 entry/src/main/cpp/PackageProvider.cpp，添加：
#include "RNOH/PackageProvider.h"
#include "generated/RNOHGeneratedPackage.h"
#include "SamplePackage.h"
+ #include "BaiduMapPackage.h"
using namespace rnoh;
std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
return {
std::make_shared<RNOHGeneratedPackage>(ctx),
std::make_shared<SamplePackage>(ctx),
+ std::make_shared<BaiduMapPackage>(ctx),
};
}4. 在 ArkTs 侧引入 BaiduMapPackage
打开 entry/src/main/ets/RNPackagesFactory.ts，添加：
...
+ import {BaiduMapPackage} from '@react-native-ohos/react-native-baidu-map/ts';
export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
return [
new SamplePackage(ctx),
+ new BaiduMapPackage(ctx)
];
}5. 在 ArkTs 侧引入 react-native-baidu-map 组件
找到 function buildCustomRNComponent()，一般位于 entry/src/main/ets/pages/index.ets
或 entry/src/main/ets/rn/LoadBundle.ets，添加：
...
+ import {
+ BAIDU_MAP_OVERLAY_CIRCLE_TYPE,
+ BAIDU_MAP_OVERLAY_MARKER_TYPE,
+ BAIDU_MAP_OVERLAY_POLYGON_TYPE,
+ BAIDU_MAP_OVERLAY_POLYLINE_TYPE,
+ BAIDU_MAP_OVERLAY_TEXT_TYPE,
+ BAIDU_MAP_VIEW_TYPE,
+ BaiduMapOverlayCircle,
+ BaiduMapOverlayPolygon,
+ BaiduMapOverlayPolyline,
+ BaiduMapOverlayText,
+ BaiduMapOverlayMarker,
+ BaiduMapView
+} from '@react-native-ohos/react-native-baidu-map';
@Builder
export function buildCustomRNComponent(ctx: ComponentBuilderContext) {
...
+ if (ctx.componentName === BAIDU_MAP_VIEW_TYPE) {
+ BaiduMapView({
+ ctx: ctx.rnComponentContext,
+ tag: ctx.tag
+ })
+ }
+ if (ctx.componentName === BAIDU_MAP_OVERLAY_CIRCLE_TYPE) {
+ BaiduMapOverlayCircle({
+ ctx: ctx.rnComponentContext,
+ tag: ctx.tag
+ })
+ }
+ if (ctx.componentName === BAIDU_MAP_OVERLAY_MARKER_TYPE) {
+ BaiduMapOverlayMarker({
+ ctx: ctx.rnComponentContext,
+ tag: ctx.tag
+ })
+ }
+ if (ctx.componentName === BAIDU_MAP_OVERLAY_POLYGON_TYPE) {
+ BaiduMapOverlayPolygon({
+ ctx: ctx.rnComponentContext,
+ tag: ctx.tag
+ })
+ }
+ if (ctx.componentName === BAIDU_MAP_OVERLAY_POLYLINE_TYPE) {
+ BaiduMapOverlayPolyline({
+ ctx: ctx.rnComponentContext,
+ tag: ctx.tag
+ })
+ }
+ if (ctx.componentName === BAIDU_MAP_OVERLAY_TEXT_TYPE) {
+ BaiduMapOverlayText({
+ ctx: ctx.rnComponentContext,
+ tag: ctx.tag
+ })
+ }
...
}
...[!TIP] 本库使用了混合方案，需要添加组件名。
在entry/src/main/ets/pages/index.ets 或 entry/src/main/ets/rn/LoadBundle.ets 找到常量 arkTsComponentNames
在其数组里添加组件名
const arkTsComponentNames: Array<string> = [
SampleView.NAME,
GeneratedSampleView.NAME,
PropsDisplayer.NAME,
+ BAIDU_MAP_VIEW_TYPE,
+ BAIDU_MAP_OVERLAY_CIRCLE_TYPE,
+ BAIDU_MAP_OVERLAY_MARKER_TYPE,
+ BAIDU_MAP_OVERLAY_POLYGON_TYPE,
+ BAIDU_MAP_OVERLAY_POLYLINE_TYPE,
+ BAIDU_MAP_OVERLAY_TEXT_TYPE
];运行
点击右上角的 sync 按钮
或者在终端执行：
cd entry
ohpm install然后编译、运行即可。
约束与限制
兼容性
要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
在以下版本验证通过：
- RNOH: 0.82.1; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;
权限要求
在 entry 目录下的module.json5中添加权限
打开 entry/src/main/module.json5，添加：
...
"requestPermissions": [
+ {
+ "name": "ohos.permission.WRITE_USER_STORAGE"
+ },
+ {
+ "name": "ohos.permission.READ_USER_STORAGE"
+ },
+ {
+ "name": "ohos.permission.INTERNET"
+ },
+ {
+ "name": "ohos.permission.GET_BUNDLE_INFO"
+ },
+ {
+ "name": "ohos.permission.LOCATION",
+ "reason": "$string:EntryAbility_desc",
+ "usedScene": {
+ "abilities": [
+ "MainAbility"
+ ],
+ "when": "inuse"
+ }
+ },
+ {
+ "name": "ohos.permission.LOCATION_IN_BACKGROUND",
+ "reason": "$string:EntryAbility_desc",
+ "usedScene": {
+ "abilities": [
+ "MainAbility"
+ ],
+ "when": "inuse"
+ }
+ },
+ {
+ "name": "ohos.permission.APPROXIMATELY_LOCATION",
+ "reason": "$string:EntryAbility_desc",
+ "usedScene": {
+ "abilities": [
+ "MainAbility"
+ ],
+ "when": "inuse"
+ }
+ }
]使用示例
下面的代码展示了这个库的基本使用场景：
[!WARNING] 使用时 import 的库名不变。
import React, { Component } from 'react';
import { Text, ScrollView, View, StyleSheet } from 'react-native';
import { MapApp, Location, BaiduMapManager, MapView, Overlay } from 'react-native-baidu-map';
function App({ }): JSX.Element {
const _onMapClick = (location: Location) => {
console.log('baidumap _onMapClick location latitude:' + location.latitude);
console.log('baidumap _onMapClick location longitude:' + location.longitude);
}
const _onMapDoubleClick = () => {
console.log('baidumap _onMapDoubleClick');
}
const _onMapLoaded = () => {
console.log('baidumap _onMapLoaded');
}
function _TestTurboModule() {
console.log('baidumap _TestTurboModule');
BaiduMapManager.initSDK('test');
BaiduMapManager.hasLocationPermission().then((hasPermission: boolean) => {
console.log('baidumap hasLocationPermission:' + hasPermission);
})
MapApp.openDrivingRoute({ latitude: 38.914935, longitude: 115.403119, name: "" }, { latitude: 39.914935, longitude: 116.403119, name: "" });
MapApp.openTransitRoute({ latitude: 36.914935, longitude: 113.403119, name: "" }, { latitude: 37.914935, longitude: 114.403119, name: "" });
MapApp.openWalkNavi({ latitude: 34.914935, longitude: 111.403119, name: "" }, { latitude: 35.914935, longitude: 112.403119, name: "" });
}
return (
<View >
<View style={[styles.button, { marginLeft: 100, marginTop: 40 }]}
onTouchEnd={() => {
_TestTurboModule();
}
}>
<Text style={styles.buttonText}>_TestTurboModule</Text>
</View>
<MapView
center={{ latitude: 38.914935, longitude: 115.403119 }}
zoom={12.0}
mapType={1}
trafficEnabled={true}
zoomGesturesEnabled={true}
scrollGesturesEnabled={true}
zoomControlsVisible={true}
showsUserLocation={true}
locationData={{ latitude: 38.914935, longitude: 115.403119 }}
onMapClick={_onMapClick}
onMapLoaded={_onMapLoaded}
onMapDoubleClick={_onMapDoubleClick}
style={{ width: '100%', height: '90%' }}
>
<Overlay.Circle
radius={6000}
fillColor='0000FF'
stroke={{ width: 12, color: 'AAEEFF11' }}
center={{ latitude: 38.914935, longitude: 115.403119 }} />
<Overlay.Marker
location={{ latitude: 39.844935, longitude: 115.603119 }} onClick={() => {
console.log("baidumap Marker CLICK1")
}} icon={{ uri: "https://maponline0.bdimg.com/sty/map_icons2x/MapRes/huochezhan.png?udt=20230227" }} />
<Overlay.Marker
location={{ latitude: 40.044935, longitude: 115.603119 }} onClick={() => {
console.log("baidumap Marker CLICK2")
}} icon={{ uri: "https://maponline0.bdimg.com/sty/map_icons2x/MapRes/huochezhan.png?udt=20230227" }} />
<Overlay.Polyline
points={[{ latitude: 38.914935, longitude: 115.403119 }, { latitude: 39.014935, longitude: 115.603119 }, { latitude: 38.814935, longitude: 115.603119 }]}
stroke={{ width: 5, color: 'AA000000' }} />
<Overlay.Polygon
points={[{ latitude: 38.914935, longitude: 115.403119 }, { latitude: 38.614935, longitude: 115.203119 }, { latitude: 39.414935, longitude: 115.403119 }]}
stroke={{ width: 5, color: 'AA000000' }}
fillColor='0000FF' />
<Overlay.Text
location={{ latitude: 38.614935, longitude: 115.403119 }}
fontColor='0000FF'
fontSize={32}
bgColor='888888'
rotate={10}
text='overlay Text test' />
</MapView>
</View>
)
}
const styles = StyleSheet.create({
button: {
width: 160,
height: 36,
backgroundColor: 'hsl(190, 50%, 70%)',
paddingHorizontal: 16,
paddingVertical: 8,
borderRadius: 8,
},
buttonText: {
width: '100%',
height: '100%',
fontWeight: 'bold',
},
});
export default App;使用说明
<MapView
center={{ latitude: 38.914935, longitude: 115.403119 }}
zoom={12.0}
mapType={1}
trafficEnabled={true}
zoomGesturesEnabled={true}
scrollGesturesEnabled={true}
zoomControlsVisible={true}
showsUserLocation={true}
locationData={{ latitude: 38.914935, longitude: 115.403119 }}
onMapClick={_onMapClick}
onMapLoaded={_onMapLoaded}
onMapDoubleClick={_onMapDoubleClick}
style={{ width: '100%', height: '90%' }}
>
<Overlay.Circle
radius={6000}
fillColor='0000FF'
stroke={{ width: 12, color: 'AAEEFF11' }}
center={{ latitude: 38.914935, longitude: 115.403119 }} />
<Overlay.Marker
location={{ latitude: 39.844935, longitude: 115.603119 }} onClick={() => {
console.log("baidumap Marker CLICK1")
}} icon={{ uri: "https://maponline0.bdimg.com/sty/map_icons2x/MapRes/huochezhan.png?udt=20230227" }} />
<Overlay.Marker
location={{ latitude: 40.044935, longitude: 115.603119 }} onClick={() => {
console.log("baidumap Marker CLICK2")
}} icon={{ uri: "https://maponline0.bdimg.com/sty/map_icons2x/MapRes/huochezhan.png?udt=20230227" }} />
<Overlay.Polyline
points={[{ latitude: 38.914935, longitude: 115.403119 }, { latitude: 39.014935, longitude: 115.603119 }, { latitude: 38.814935, longitude: 115.603119 }]}
stroke={{ width: 5, color: 'AA000000' }} />
<Overlay.Polygon
points={[{ latitude: 38.914935, longitude: 115.403119 }, { latitude: 38.614935, longitude: 115.203119 }, { latitude: 39.414935, longitude: 115.403119 }]}
stroke={{ width: 5, color: 'AA000000' }}
fillColor='0000FF' />
<Overlay.Text
location={{ latitude: 38.614935, longitude: 115.403119 }}
fontColor='0000FF'
fontSize={32}
bgColor='888888'
rotate={10}
text='overlay Text test' />
</MapView>接口说明
[!TIP] "Platform"列表示该属性在原三方库上支持的平台。
[!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标iOS 或 Android 的效果。
MapView Props 属性
| Name | Description | Type | Required | Platform | HarmonyOS Support | |-------------------------|----------------------------------|----------|----------|----------|-------------------| | zoomControlsVisible | 显示或隐藏缩放控件 | Boolean | no | Android | yes | | trafficEnabled | 是否启用交通图层 | Boolean | no | All | yes | | baiduHeatMapEnabled | 是否启用百度热力图 | Boolean | no | All | no | | zoomGesturesEnabled | 允许手势缩放 | Boolean | no | All | yes | | scrollGesturesEnabled | 允许拖动 | Boolean | no | All | yes | | mapType | 地图类型 | Number | no | All | partially【支持的值：1（普通地图）、2（卫星地图）； 不支持的值：0（空白地图）】 | | zoom | 地图的缩放级别 | Number | no | All | yes | | showsUserLocation | 是否显示定位 | Boolean | no | All | yes | | locationData | 定位信息 {latitude: 0, longitude: 0} | Object | no | All | yes | | center | {latitude: 0, longitude: 0} | Object | no | All | yes | | onMapStatusChangeStart | 地图状态开始变化时的回调函数 | Function | no | Android | no | | onMapStatusChange | 地图状态变化时的回调函数 | Function | no | All | no | | onMapStatusChangeFinish | 地图状态变化完成时的回调函数 | Function | no | Android | no | | onMapLoaded | 地图加载完成时的回调函数 | Function | no | All | yes | | onMapClick | 地图被点击时的回调函数 | Function | no | All | yes | | onMapDoubleClick | 地图被双击时的回调函数 | Function | no | All | yes | | onMarkerClick | 地图上的标记被点击时的回调函数 | Function | no | All | no | | onMapPoiClick | 地图上的兴趣点（POI）被点击时的回调函数 | Function | no | All | no |
Marker Props 属性
| Name | Description | Type | Required | Platform | HarmonyOS Support | |--------------|------------------------------------------|----------|----------|----------|-------------------| | title | 如果没有 InfoWindow，将会根据 title 生成 InfoWindow | String | no | All | no | | titleOffsetY | title 作为 InfoWindow 展示的 y 轴偏移量 | Number | no | Android | no | | location | 标记的经纬度坐标位置 | Object | yes | All | yes | | perspective | 远大近小的效果 | Boolean | no | Android | no | | rotate | 旋转角度 | Number | no | Android | yes | | icon | 图片，同Image组件的 source 属性 | Object | no | All | yes | | alpha | 透明度 | Number | no | Android | yes | | animateType | 动画效果：drop | String | no | All | yes | | pinColor | red/green/purple，大头针颜色 | String | no | IOS | no | | onClick | 当标记被点击时触发的回调函数 | Function | no | All | yes |
Cluster 点聚合
Arc Props 属性
| Name | Description | Type | Required | Platform | HarmonyOS Support | |--------|----------------|---------|----------|----------|-------------------| | stroke | 当标记被点击时触发的回调函数 | Object | yes | All | no | | points | 数值长度必须为3 | Object | yes | All | no | | dash | 是否为虚线 | Boolean | yes | iOS | no |
Circle Props 属性
| Name | Description | Type | Required | Platform | HarmonyOS Support | |-----------|-------------------|--------|----------|----------|-------------------| | radius | 圆的半径 | Number | yes | All | yes | | fillColor | 圆的填充颜色，6 位(RRGGBB)或 8 位(AARRGGBB) | String | yes | All | yes | | stroke | 圆的描边样式 | Object | yes | All | yes | | center | 圆的中心点坐标 | Object | yes | All | yes |
Polyline Props 属性
| Name | Description | Type | Required | Platform | HarmonyOS Support | |--------|-------------|--------|----------|----------|-------------------| | points | 折线的顶点坐标数组 | Object | yes | All | yes | | stroke | 折线的描边样式 | Object | yes | All | no |
Polygon Props 属性
| Name | Description | Type | Required | Platform | HarmonyOS Support | |-----------|----------------------|--------|----------|----------|-------------------| | points | 多边形的顶点坐标数组 | Object | yes | All | yes | | fillColor | 多边形的填充颜色，6 位(RRGGBB)或 8 位(AARRGGBB) | String | no | All | yes | | stroke | 多边形的描边样式 | Object | no | All | yes |
Text Props 属性
| Name | Description | Type | Required | Platform | HarmonyOS Support | |-----------|---------------|--------|----------|----------|-------------------| | text | 要显示的文本 | String | yes | All | yes | | fontSize | 文本的字体大小 | Number | no | All | yes | | fontColor | 文本的字体颜色，6 位(RRGGBB)或 8 位(AARRGGBB) | String | no | All | yes | | bgColor | 文本的背景颜色，6 位(RRGGBB)或 8 位(AARRGGBB) | String | no | All | yes | | rotate | 文本旋转的角度 | Number | no | All | yes | | location | 文本在地图上的位置坐标 | Object | yes | All | yes |
MarkerIcon 使用 View 作为 marker 的 icon
InfoWindow Props 属性
[!TIP]InfoWindow必须作为 Marker 的子组件使用
| Name | Description | Type | Required | Platform | HarmonyOS Support | |---------|--------------------------------|--------|----------|----------|-------------------| | offsetY | 相对于 point 在 y 轴的偏移量 | Object | yes | Android | no |
HeatMap Props 属性
| Name | Description | Type | Required | Platform | HarmonyOS Support | |----------|-------------|--------|----------|----------|-------------------| | points | 绘制热度图的点 | array | yes | All | no | | gradient | 颜色渐变对象 | object | yes | All | no |
静态方法
[!TIP] "Platform"列表示该属性在原三方库上支持的平台。
[!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标iOS 或 Android 的效果。
BaiduMapManager
| Name | Description | Type | Required | Platform | HarmonyOS Support | |-------------------------------|-------------|------|----------|----------|-------------------| | initSDK | iOS 初始化 SDK | void | no | All | yes | | Promise hasLocationPermission | 是否有定位权限 | void | no | All | yes |
Geolocation Methods
| Name | Description | Type | Required | Platform | HarmonyOS Support | |---------------------------------------------------|--------------------------------------|------|----------|----------|-------------------| | Promise reverseGeoCode | 根据给定的经纬度坐标获取相应的地址信息 | void | no | All | no | | Promise reverseGeoCodeGPS | 通过给定的经纬度进行反向地理编码，从而获取与该经纬度对应的地理位置信息。 | void | no | All | no | | Promise geocode | 调用一个提供地理编码服务的API | void | no | All | no | | Promise getCurrentPosition | 获取当前定位信息，coorType 可为 bd09ll 或 gcj02，默认 bd09ll | void | no | All | no | | startLocating(function listener, String coorType) | 开始持续定位 | void | no | All | no | | stopLocating | 停止持续定位 | void | no | All | no |
GetDistance Methods
| Name | Description | Type | Required | Platform | HarmonyOS Support | |-----------------------------|---------------|------|----------|----------|-------------------| | Promise getLocationDistance | 计算两个地理位置之间的距离 | no | no | All | no |
MapApp Methods 调起百度地图客户端
| Name | Description | Type | Required | Platform | HarmonyOS Support | |------------------|-------------|------|----------|----------|-------------------| | openDrivingRoute | 调起百度地图驾车规划 | void | no | All | yes | | openTransitRoute | 调起百度地图公交路线 | void | no | All | yes | | openWalkNavi | 调起百度地图步行路线 | void | no | All | yes |
遗留问题
- [ ] Arc覆盖物未实现 #15
- [ ] infoWindow覆盖物未实现 #16
- [ ] HeatMap覆盖物未实现 #17
- [ ] Cluster 覆盖物未实现 #18
- [ ] MarkerIcon 覆盖物未实现 #19
- [ ] MapView部分事件未实现 #20
- [ ] marker的title、pincolor、perspective属性未实现 #21
- [ ] Geolocation 静态类功能未实现 #22
- [ ] GetDistance静态类功能未实现 #23
- [ ] Polyline的stroke属性未实现 #21
其他
目录结构
/rntpc_react-native-baidu-map # 项目根目录
harmony/
├── baidu_map.har # 编译后的 HAR 包（HarmonyOS Archive）
└── baidu_map/ # 鸿蒙适配核心代码
├── build-profile.json5
├── hvigorfile.ts
├── index.ets
├── oh-package.json5
├── ts.ets
└── src/
└── main/
├── cpp/ # C++ 原生层（新架构 Fabric/TurboModule）
│ ├── BaiduMapEventEmitRequestHandler.h
│ ├── BaiduMapOverlayArcComponentDescriptor.h
│ ├── BaiduMapOverlayArcJSIBinder.h
│ ├── BaiduMapOverlayCircleComponentDescriptor.h
│ ├── BaiduMapOverlayCircleJSIBinder.h
│ ├── BaiduMapOverlayClusterComponentDescriptor.h
│ ├── BaiduMapOverlayClusterJSIBinder.h
│ ├── BaiduMapOverlayHeatMapComponentDescriptor.h
│ ├── BaiduMapOverlayHeatMapJSIBinder.h
│ ├── BaiduMapOverlayInfoWindowComponentDescriptor.h
│ ├── BaiduMapOverlayInfoWindowJSIBinder.h
│ ├── BaiduMapOverlayMarkerComponentDescriptor.h
│ ├── BaiduMapOverlayMarkerIconComponentDescriptor.h
│ ├── BaiduMapOverlayMarkerIconJSIBinder.h
│ ├── BaiduMapOverlayMarkerJSIBinder.h
│ ├── BaiduMapOverlayPolygonComponentDescriptor.h
│ ├── BaiduMapOverlayPolygonJSIBinder.h
│ ├── BaiduMapOverlayPolylineComponentDescriptor.h
│ ├── BaiduMapOverlayPolylineJSIBinder.h
│ ├── BaiduMapOverlayTextComponentDescriptor.h
│ ├── BaiduMapOverlayTextJSIBinder.h
│ ├── BaiduMapPackage.h
│ ├── BaiduMapViewComponentDescriptor.h
│ ├── BaiduMapViewJSIBinder.h
│ ├── CMakeLists.txt
│ ├── ComponentDescriptors.h
│ ├── EventEmitters.cpp
│ ├── EventEmitters.h
│ ├── NativeTurboModule.cpp
│ ├── NativeTurboModule.h
│ ├── Props.cpp
│ ├── Props.h
│ ├── ShadowNodes.cpp
│ ├── ShadowNodes.h
│ ├── States.cpp
│ └── States.h
├── ets/ # ArkTS 业务层
│ ├── BaiduMapOverlayCircle.ets
│ ├── BaiduMapOverlayInfowindow.ets
│ ├── BaiduMapOverlayMarker.ets
│ ├── BaiduMapOverlayPolygon.ets
│ ├── BaiduMapOverlayPolyline.ets
│ ├── BaiduMapOverlayText.ets
│ ├── BaiduMapPackage.ets
│ ├── BaiduMapTurboModule.ts
│ ├── BaiduMapView.ets
│ ├── Logger.ts
│ ├── MapEnvConstant.ts
│ ├── PermissionsUtils.ts
│ └── PublicClass.ts
├── module.json5
└── resources/ # 资源文件
├── base/element/string.json
├── en_US/element/string.json
├── rawfile/
│ ├── end.png
│ └── start.png
└── zh_CN/element/string.json 贡献代码
使用过程中发现任何问题都可以提交 Issue，当然，也非常欢迎提交 PR 。
开源协议
本项目基于 The MIT License (MIT) ，请自由地享受和参与开源。