文档模板：v0.4.2

react-native-baidu-map

本项目基于 react-native-baidu-map 开发。

该第三方库的仓库已迁移至 GitCode，且支持直接从 npm 下载，新的包名为：@react-native-ohos/react-native-baidu-map，版本所属关系如下：

简介

百度地图 React Native 模块，支持 react native 0.61+，已更新到最新的百度地图 SDK 版本。
本库提供地图视图（MapView）及 Marker、Polyline、Polygon、Circle、Text 等多种覆盖物组件，并提供定位、地理编码、调起百度地图客户端等能力。

下载安装

进入到工程目录并输入以下命令：

npm

npm install @react-native-ohos/react-native-baidu-map

yarn

yarn add @react-native-ohos/react-native-baidu-map

Link

使用AutoLink的工程需要根据该文档配置，Autolink框架指导文档：https://gitcode.com/CPF-RN/ohos_react_native/blob/main/docs/zh-cn/02-开发/02-开发指南/Autolinking.md

如您使用的版本支持 Autolink，并且工程已接入 Autolink，可跳过ManualLink配置。

{
  "overrides": {
    "@rnoh/react-native-openharmony": "~0.82.18" // ohpm 在线版本
    // "@rnoh/react-native-openharmony" : "./react_native_openharmony.har" // 指向本地 har 包的路径
    // "@rnoh/react-native-openharmony" : "./react_native_openharmony" // 指向源码路径
  }
}

"dependencies": {
    "@react-native-ohos/react-native-baidu-map": "file:../../node_modules/@react-native-ohos/react-native-baidu-map/harmony/baidu_map.har"
  }

cd entry
ohpm install

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

#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),
    };
}

  ...
+ 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
+      })
+    }
...
}
...

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
  ];

  ...
+ import {BaiduMapPackage} from '@react-native-ohos/react-native-baidu-map/ts';

export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
  return [
    new SamplePackage(ctx),
+   new BaiduMapPackage(ctx)
  ];
}

运行

点击右上角的 sync 按钮

或者在终端执行：

cd entry
ohpm install

然后编译、运行即可。

约束与限制

兼容性

本文档内容基于以下版本验证通过：

1. RNOH: 0.82.1; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;

权限要求

打开 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"
+        }
+      }
    ]

编译运行API要求

使用示例

下面的代码展示了这个库的基本使用场景：

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>

接口说明

组件

属性

MapView Props 属性

Marker Props 属性

Cluster 点聚合

Arc Props 属性

Circle Props 属性

Polyline Props 属性

Polygon Props 属性

Text Props 属性

MarkerIcon 使用 View 作为 marker 的 icon

InfoWindow Props 属性

HeatMap Props 属性

API

BaiduMapManager

Geolocation Methods

GetDistance Methods

MapApp Methods 调起百度地图客户端

遗留问题

• 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) ，请自由地享受和参与开源。