模板版本：v0.4.2

react-native-maps

本项目基于 react-native-maps 开发。

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

简介

react-native-maps 是一个用于 React Native 的地图组件库，提供跨平台的地图展示与交互能力。
支持地图展示（标准/卫星/地形）、标记点（Marker）、折线（Polyline）、多边形（Polygon）、圆形覆盖物（Circle）、自定义样式、地图截图等功能。

下载安装

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

npm

npm install @react-native-ohos/react-native-maps

yarn

yarn add @react-native-ohos/react-native-maps

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

import React from "react";
import { StyleSheet, View, Text, Dimensions } from "react-native";
import MapView, { Circle, Polygon, Polyline, Marker } from "react-native-maps";

const { width, height } = Dimensions.get("window");

const ASPECT_RATIO = width / height;
const LATITUDE = 39.9;
const LONGITUDE = 116.4;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
const SPACE = 0.01;

class Overlays extends React.Component<any, any> {
  constructor(props: any) {
    super(props);

    this.state = {
      marker1: true,
      region: {
        latitude: LATITUDE,
        longitude: LONGITUDE,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA,
      },
      circle: {
        center: {
          latitude: LATITUDE + SPACE,
          longitude: LONGITUDE + SPACE,
        },
        radius: 700,
      },
      polygon: [
        {
          latitude: LATITUDE + SPACE,
          longitude: LONGITUDE + SPACE,
        },
        {
          latitude: LATITUDE - SPACE,
          longitude: LONGITUDE - SPACE,
        },
        {
          latitude: LATITUDE - SPACE,
          longitude: LONGITUDE + SPACE,
        },
      ],
      polyline: [
        {
          latitude: LATITUDE + SPACE,
          longitude: LONGITUDE - SPACE,
        },
        {
          latitude: LATITUDE - 2 * SPACE,
          longitude: LONGITUDE + 2 * SPACE,
        },
        {
          latitude: LATITUDE - SPACE,
          longitude: LONGITUDE - SPACE,
        },
        {
          latitude: LATITUDE - 2 * SPACE,
          longitude: LONGITUDE - SPACE,
        },
      ],
    };
  }

  render() {
    const { region, circle, polygon, polyline } = this.state;
    return (
      <View style={styles.container}>
        <MapView
          provider={this.props.provider}
          style={styles.map}
          initialRegion={region}
        >
          <Marker
            onPress={() => this.setState({ marker1: !this.state.marker1 })}
            coordinate={{
              latitude: LATITUDE + SPACE,
              longitude: LONGITUDE - SPACE,
            }}
            centerOffset={{ x: -42, y: -60 }}
            anchor={{ x: 0.84, y: 1 }}
            opacity={0.6}
          />
          <Circle
            center={circle.center}
            radius={circle.radius}
            fillColor="rgba(255, 255, 255, 1)"
            strokeColor="rgba(0,0,0, 1)"
            zIndex={2}
            strokeWidth={10}
          />
          <Polygon
            coordinates={polygon}
            fillColor="rgba(0, 200, 0, 1)"
            strokeColor="rgba(0,0,0, 1)"
            strokeWidth={10}
          />
          <Polyline
            coordinates={polyline}
            strokeColor="rgba(0,0,200, 1)"
            strokeWidth={10}
            lineDashPattern={[5, 2, 3, 2]}
          />
        </MapView>
        <View style={styles.buttonContainer}>
          <View style={styles.bubble}>
            <Text>Render circles, polygons, and polylines</Text>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: "flex-end",
    alignItems: "center",
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
  bubble: {
    flex: 1,
    backgroundColor: "rgba(255,255,255,0.7)",
    paddingHorizontal: 18,
    paddingVertical: 12,
    borderRadius: 20,
  },
  latlng: {
    width: 200,
    alignItems: "stretch",
  },
  button: {
    width: 80,
    paddingHorizontal: 12,
    alignItems: "center",
    marginHorizontal: 10,
  },
  buttonContainer: {
    flexDirection: "row",
    marginVertical: 20,
    backgroundColor: "transparent",
  },
});

Link

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

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

{
  ...
  "overrides": {
    "@rnoh/react-native-openharmony" : "./react_native_openharmony"
  }
}

"dependencies": {
    "@rnoh/react-native-openharmony": "file:../react_native_openharmony",
    "@react-native-ohos/react-native-maps": "file:../../node_modules/@react-native-ohos/react-native-maps/harmony/maps.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-maps/src/main/cpp" ./maps)
# 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_maps)
# RNOH_END: manual_package_linking_2

#include "RNOH/PackageProvider.h"
#include "generated/RNOHGeneratedPackage.h"
#include "SamplePackage.h"
+ #include "MapsPackage.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<MapsPackage>(ctx)
    };
}

  ...
+ import { AIRMap, AIR_MAP_TYPE, AIRMapMarker, AIR_MAP_MARKER_TYPE, AIRMapPolyline, AIR_MAP_POLYLINE_TYPE, AIRMapPolygon,
+  AIR_MAP_POLYGON_TYPE, AIRMapCircle, AIR_MAP_CIRCLE_TYPE, AIR_MAP_CALLOUT_SUBVIEW_TYPE, AIR_MAP_CALLOUT_TYPE,
+  AIRMapCallout,
+  AIRMapCalloutSubview,
+  Geojson,
+  AIR_GEOJSON_TYPE,
+  AIRMapUrlTile,
+  AIR_URLTILE_TYPE,
+  AIRMapWMSTile,
+  AIR_WMSTILE_TYPE,
+  AIR_OVERLAY_TYPE,
+  AIRMapOverlay,
+  AIR_MAP_CLUSTER_TYPE,
+  AIRMapCluster,
+ } from "@react-native-ohos/react-native-maps"

@Builder
export function buildCustomRNComponent(ctx: ComponentBuilderContext) {
  ...
+  if (ctx.componentName === AIR_MAP_TYPE) {
+    AIRMap({
+      ctx: ctx.rnComponentContext,
+      tag: ctx.tag,
+    })
+  }else if (ctx.componentName === AIR_MAP_MARKER_TYPE) {
+    AIRMapMarker({
+      ctx: ctx.rnComponentContext,
+      tag: ctx.tag,
+    })
+  }else if (ctx.componentName === AIR_MAP_POLYLINE_TYPE) {
+    AIRMapPolyline({
+      ctx: ctx.rnComponentContext,
+      tag: ctx.tag,
+    })
+  }else if (ctx.componentName === AIR_MAP_POLYGON_TYPE) {
+    AIRMapPolygon({
+      ctx: ctx.rnComponentContext,
+      tag: ctx.tag,
+    })
+  }else if (ctx.componentName === AIR_MAP_CIRCLE_TYPE) {
+    AIRMapCircle({
+      ctx: ctx.rnComponentContext,
+      tag: ctx.tag,
+    })
+  }else if (ctx.componentName === AIR_MAP_CALLOUT_TYPE) {
+    AIRMapCallout({
+      ctx: ctx.rnComponentContext,
+      tag: ctx.tag,
+    })
+  }else if (ctx.componentName === AIR_MAP_CALLOUT_SUBVIEW_TYPE) {
+    AIRMapCalloutSubview({
+      ctx: ctx.rnComponentContext,
+      tag: ctx.tag,
+    })
+  }else if (ctx.componentName === AIR_MAP_CALLOUT_SUBVIEW_TYPE) {
+    AIRMapCalloutSubview({
+      ctx: ctx.rnComponentContext,
+      tag: ctx.tag,
+    })
+  }else if (ctx.componentName === AIR_GEOJSON_TYPE) {
+    Geojson({
+      ctx: ctx.rnComponentContext,
+      tag: ctx.tag,
+    })
+  }else if (ctx.componentName === AIR_URLTILE_TYPE) {
+    AIRMapUrlTile({
+      ctx: ctx.rnComponentContext,
+      tag: ctx.tag,
+    })
+  }else if (ctx.componentName === AIR_WMSTILE_TYPE) {
+    AIRMapWMSTile({
+      ctx: ctx.rnComponentContext,
+      tag: ctx.tag,
+    })
+  }else if (ctx.componentName === AIR_OVERLAY_TYPE) {
+    AIRMapOverlay({
+      ctx: ctx.rnComponentContext,
+      tag: ctx.tag,
+    })
+  } else if (ctx.componentName === AIR_MAP_CLUSTER_TYPE) {
+     AIRMapCluster({
+       ctx: ctx.rnComponentContext,
+       tag: ctx.tag,
+     })
+   }
...
}
...

const arkTsComponentNames: Array<string> = [
  SampleView.NAME,
  GeneratedSampleView.NAME,
  PropsDisplayer.NAME,
+ AIR_MAP_TYPE, 
+ AIR_MAP_MARKER_TYPE, 
+ AIR_MAP_POLYLINE_TYPE, 
+ AIR_MAP_POLYGON_TYPE, 
+ AIR_MAP_CIRCLE_TYPE, 
+ AIR_MAP_CALLOUT_TYPE, 
+ AIR_GEOJSON_TYPE, 
+ AIR_URLTILE_TYPE, 
+ AIR_WMSTILE_TYPE, 
+ AIR_OVERLAY_TYPE,
+ AIR_MAP_CLUSTER_TYPE,
  ];

  ...
+ import {MapsPackage} from '@react-native-ohos/react-native-maps/ts';

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

运行

点击右上角的 sync 按钮

或者在终端执行：

cd entry
ohpm install

然后编译、运行即可。

约束与限制

兼容性

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

1. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71;

权限要求

以下是示例项目配置

1.打开 工程目录/AppScope/app.json5,修改

 bundleName:"com.example.rnmapdemo" //自建项目请与开发者平台上的包名一致

2.打开 entry/src/main/module.json5，添加相关配置

...
   "metadata": [ // 配置如下信息 测试地图功能
+       {
+       "name": "client_id",
+       "value": "110168601"  //配置为从华为开发者平台获取的Client ID，自建项目请与开发者平台上的client id一致
+       }
   ],
   "requestPermissions": [
+      {
+        "name": "ohos.permission.APPROXIMATELY_LOCATION",
+        "reason": "$string:Access_maps",
+        "usedScene": {
+          "abilities": [
+            "EntryAbility"
+          ],
+          "when": "always"
+        }
+      },
+      {
+        "name": "ohos.permission.LOCATION",
+        "reason": "$string:Access_maps",
+        "usedScene": {
+          "abilities": [
+            "EntryAbility"
+          ],
+          "when": "always"
+       }
+      },
+     {
+        "name": "ohos.permission.INTERNET"
+      }
    ]

3.在 entry 目录下添加申请地图权限的原因

打开 entry/src/main/resources/base/element/string.json，添加：

...
{
  "string": [
+    {
+      "name": "Access_maps",
+      "value": "access maps"
+    }
  ]
}

4.打开 工程目录/build-profile.json5 在 app 节点下修改

 signingConfigs: [
    {
      "name": "default",
      "type": "HarmonyOS",
      "material": {
        "storePassword": "0000001F46D5FEE280574FA23000DE66587FD7FA83EEFEF6D5890B713F4B512621FD3A4F5F6965E94C20441708BCE7", //自建项目配置的指纹证书密码
        "certpath": "E:/aboutKey/rnmapdemo.cer", //自建项目配置的指纹证书
        "keyAlias": "key0",
        "keyPassword": "0000001F2B30EA30206AEBA445E5E69F5A42C4FA4F829039AEBEA0167FF3591ADCAED98732BE405314206771508E5C", //自建项目配置的指纹证书密码
        "profile": "E:/aboutKey/rnmapDebug.p7b",  //自建项目配置的指纹证书
        "signAlg": "SHA256withECDSA",
        "storeFile": "E:/aboutKey/rnmapdemo.p12" //自建项目配置的指纹证书
      }
    }
  ]

接口说明

MapView

属性

注：HarmonyOS 侧的 mapType 支持以下字符串值

'none' \ 'standard' \ 'terrain'

注：HarmonyOS 侧的双击放大由 zoomEnabled 开启，zoomTapEnabled 不能单独关闭该功能。

静态方法

API

Marker

属性

静态方法

API

Polyline

属性

注：HarmonyOS 侧的 lineJoin 支持以下字符串值

'default' \ 'bevel' \ 'round'

Polygon

属性

注：HarmonyOS 侧的 lineJoin 支持以下字符串值

'default' \ 'bevel' \ 'round'

Circle

属性

Overlay

属性

静态方法

UrlTile & WMSTile

属性

Callout

属性

Geojson

属性

Heatmap

属性

Gradient Config

Android Doc | iOS Doc

Cluster

属性

遗留问题

• AIRMap 和 AIRMapMarker 中 Animated 未实现 issues#1
• AIRMapOverlay 组件目前华为地图中不支持往地图组件中添加自定义 view issues#2
• AIRMap AIRMapMarker AIRMapPolyline AIRMapPolygon AIRMapCircle 组件在 HarmonyOS 中的不支持属性是因为华为地图没提供对应的属性 issues#3
• AIRMapCallout AIRMapCalloutSubview 组件为 marker 子组件，华为地图中 marker 有自带的，但是目前不支持自定义样式显示 issues#4
• AIRMapUrlTile AIRMapWMSTile 瓦片地图加载方式华为地图不支持 issues#5
• Heatmap 华为地图不支持 issues#6

其他

目录结构

/rntpc_react-native-maps  # 项目根目录
├── harmony               # 鸿蒙适配代码
│    └── maps.har         # har包
│    └── maps             # 鸿蒙适配核心代码
│         └── Index.ets   # 鸿蒙适配代码入口
│         └── src/main/ets
│              └── AIRMaps  # 地图组件（MapView/Marker/Polyline/Polygon/Circle/Overlay/Callout/Geojson/UrlTile/WMSTile/Cluster）
│              └── MapsPackage.ets  # 鸿蒙侧Package注册
│         └── src/main/cpp  # C++ TurboModule 桥接层
├── src                   # RN代码
│    └── index.ts         # 入口文件
│    └── MapView.tsx      # MapView组件
│    └── MapMarker.tsx    # Marker组件
│    └── MapPolyline.tsx  # Polyline组件
│    └── MapPolygon.tsx   # Polygon组件
│    └── MapCircle.tsx    # Circle组件
│    └── MapOverlay.tsx   # Overlay组件
│    └── MapHeatmap.tsx   # Heatmap组件
│    └── MapCallout.tsx   # Callout气泡组件
│    └── MapCalloutSubview.tsx  # Callout子视图组件
│    └── Geojson.tsx      # Geojson组件
│    └── MapUrlTile.tsx   # UrlTile组件
│    └── MapWMSTile.tsx   # WMSTile组件
│    └── MapCluster.tsx   # Cluster点聚合组件
│    └── MapView.types.ts # 类型定义
│    └── sharedTypes.ts   # 共享类型定义
├── README.md             # 中文安装使用方法
├── README_en.md          # 英文安装使用方法

贡献代码

使用过程中发现任何问题都可以提交 Issue，当然，也非常欢迎提交 PR 。

开源协议

本项目基于 MIT License (MIT) ，请自由地享受和参与开源。