@react-native-ohos/react-native-maps
v1.25.0
Published
React Native Mapview component for harmony
Readme
模板版本：v0.4.2
本项目基于 react-native-maps 开发。
该第三方库的仓库已迁移至 Gitcode，且支持直接从 npm 下载，新的包名为：@react-native-ohos/react-native-maps 版本所属关系如下：
| 三方库名称 | 三方库版本（npm地址） | 发布信息 | 支持RN版本 | Autolink | 编译API版本 | 社区基线版本 | 源码地址 | | ------------ | ------------ |------------------------------ |------------- | ------------- |------------------------ | ------------- | ------------- | | @react-native-ohos/react-native-maps | ~1.25.0 （开发中） | Gitcode Releases | 0.82.* | 是 | API12+ | 1.27.2 | br_rnoh0.82 |
简介
react-native-maps 是一个用于 React Native 的地图组件库，提供跨平台的地图展示与交互能力。
支持地图展示（标准/卫星/地形）、标记点（Marker）、折线（Polyline）、多边形（Polygon）、圆形覆盖物（Circle）、自定义样式、地图截图等功能。
下载安装
进入到工程目录并输入以下命令：
npm
npm install @react-native-ohos/react-native-mapsyarn
yarn add @react-native-ohos/react-native-maps下面的代码展示了这个库的基本使用场景：
[!WARNING] 使用时 import 的库名不变。
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
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 | RN框架版本 | |--------------------------------------|-----------------|------------| | ~1.25.0 | Yes | 0.82 |
使用AutoLink的工程需要根据该文档配置，Autolink框架指导文档：https://gitcode.com/CPF-RN/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-maps": "file:../../node_modules/@react-native-ohos/react-native-maps/harmony/maps.har"
}点击右上角的 sync 按钮
或者在终端执行：
cd entry
ohpm install方法二：直接链接源码
[!TIP] 如需使用直接链接源码，请参考直接链接源码说明
3. 配置 CMakeLists 和引入 MapsPackge
若使用的是 <= 1.10.3-0.1.4 版本，请跳过本章。
打开 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-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打开 entry/src/main/cpp/PackageProvider.cpp，添加：
#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)
};
}4. 在 ArkTs 侧引入 AIRMap 等组件
找到 function buildCustomRNComponent()，一般位于 entry/src/main/ets/pages/index.ets 或 entry/src/main/ets/rn/LoadBundle.ets，添加：
...
+ 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,
+ })
+ }
...
}
...[!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,
+ 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,
];5. 在 ArkTs 侧引入 MapsPackage
打开 entry/src/main/ets/RNPackagesFactory.ts，添加：
...
+ 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然后编译、运行即可。
约束与限制
兼容性
要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
在以下版本验证通过：
- RNOH: 0.82.1; SDK: HarmonyOS API Version 21 Release SDK; IDE: DevEco Studio 6.0.1.260; ROM: 6.0.0.130;
权限要求
[!TIP] 如需自建项目使用华为地图可以跳过以下第一步，并前往华为开发者联盟平台申请对应项目和应用程序
[!TIP] 详细配置参考华为开发者官网地图服务
以下是示例项目配置
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" //自建项目配置的指纹证书
}
}
]接口说明
[!TIP] "Platform"列表示该属性在原三方库上支持的平台。
[!TIP] "OpenHarmony Support"列为 yes 表示 OpenHarmony平台支持 该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
MapView
属性
| 名称 | 描述 | 参数类型 | 默认值 | 必填 | 平台 | OpenHarmony平台支持 |
| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------- | ---------- | -------- | ----------- | ----------------- |
| provider | 要使用的地图框架。使用 "google" 表示 GoogleMaps，否则使用 null 或 undefined 表示使用原生地图框架（iOS 中使用 MapKit，Android 中使用 GoogleMaps）。 | string | | no | ios/android | no |
| region | 地图要显示的区域。区域由中心坐标和坐标跨度范围定义。 | Region | | no | ios/android | yes |
| initialRegion | 地图要显示的初始区域。仅当不想控制除初始区域外的地图视口时，才使用此属性代替 region。 | Region | | no | ios/android | yes |
| camera | 地图应显示的相机视图。如果使用此属性，region 属性将被忽略。 | Camera | | no | ios/android | yes |
| initialCamera | 与 initialRegion 类似，仅当不想控制除初始相机设置外的地图视口时，才使用此属性代替 camera。 | Camera | | no | ios/android | yes |
| mapPadding | 为地图的每一边添加自定义内边距。当地图元素/标记被遮挡时很有用。 | EdgePadding | | no | ios/android | yes |
| paddingAdjustmentBehavior | 指示如何/何时使用安全区域影响内边距（仅 iOS 上的 GoogleMaps） | 'always' \ 'automatic' \ 'never' | 'never' | no | ios/android | no |
| liteMode | 启用精简模式。注意：仅 Android。 | Boolean | false | no | android | no |
| mapType | 要显示的地图类型。 | String | "standard" | | ios/android | partially(Support "none", "standard", "terrain") |
| customMapStyle | 为地图组件添加自定义样式。 | Array | | no | ios/android | yes |
| userInterfaceStyle | 将地图设置为选定的样式。默认跟随系统设置。注意：仅 iOS Maps（即 MapKit）。 | 'light'/'dark' | 'light' | no | ios/android | yes |
| showsUserLocation | 如果为 true，用户的位置将显示在地图上。注意：在将此设置为 true 之前，需要获取运行时位置权限，否则将_静默失败_！可参考优秀的 react-native-permissions 库。 | Boolean | false | no | ios/android | yes |
| userLocationPriority | 设置用户位置跟踪的电源优先级。参见 Google APIs 文档。注意：仅 Android。 | 'balanced' / 'high' / 'low' / 'passive' | 'high' | no | android | no |
| userLocationUpdateInterval | 用户位置更新间隔（毫秒）。参见 Google APIs 文档。注意：仅 Android。 | Number | 5000 | no | android | no |
| userLocationFastestInterval | 应用程序主动获取位置的最快间隔。参见 Google APIs 文档。注意：仅 Android。 | Number | 5000 | no | android | no |
| userLocationAnnotationTitle | 当前用户位置标注的标题。仅在 showsUserLocation 为 true 时生效。MapView 设置的默认值为 My Location。注意：仅 iOS。 | String | | no | ios | no |
| followsUserLocation | 如果为 true，地图将聚焦于用户的位置。仅在 showsUserLocation 为 true 且用户已共享其位置时生效。注意：仅 Apple Maps。 | Boolean | false | no | ios | yes |
| userLocationCalloutEnabled | 如果为 true，点击用户位置将显示 userLocation 标注的默认气泡。注意：仅 Apple Maps。 | Boolean | false | no | ios | no |
| showsMyLocationButton | 如果为 false，隐藏将地图移动到当前用户位置的按钮。 | Boolean | true | no | ios/android | yes |
| showsPointsOfInterests | 如果为 false，地图上不会显示兴趣点。注意：仅 Apple Maps。 | Boolean | true | no | ios | no |
| pointsOfInterestFilter | 要在地图上显示的 POI 类别字符串数组。如果设置了此属性，它将优先于 showsPointsOfInterests。有效类别包括：'restaurant'、'gasStation'、'hospital'、'school'、'park'、'hotel'、'bank'、'museum' 等。完整列表参见 MKPointOfInterestCategoryType。注意：仅 Apple Maps。 | MKPointOfInterestCategoryType[] | | no | ios | no |
| showsCompass | 如果为 false，地图上不会显示指南针。 | Boolean | true | no | ios/android | yes |
| showsScale | 布尔值，指示地图是否显示比例尺信息。注意：仅 Apple Maps。 | Boolean | true | no | ios | yes |
| showsBuildings | 布尔值，指示地图是否显示拉伸的建筑信息。 | Boolean | true | no | ios/android | yes |
| showsTraffic | 布尔值，指示地图是否显示交通信息。 | Boolean | false | no | ios/android | yes |
| showsIndoors | 布尔值，指示是否应启用室内地图。 | Boolean | true | no | ios/android | no |
| showsIndoorLevelPicker | 布尔值，指示是否应启用室内楼层选择器。注意：仅 Google Maps（Android 或使用 PROVIDER_GOOGLE 的 iOS）。 | Boolean | false | no | ios/android | no |
| zoomEnabled | 如果为 false，用户将无法捏合/缩放地图。 | Boolean | true | no | ios/android | yes |
| zoomTapEnabled | 如果为 false，用户将无法双击缩放地图。注意：但这会大大降低点击手势识别的延迟。注意：仅 iOS 上的 Google Maps。 | Boolean | true | no | ios/android | yes |
| zoomControlEnabled | 如果为 false，地图右下角的缩放控件将不可见。注意：仅 Android。 | Boolean | true | no | android | yes |
| minZoomLevel | 地图的最小缩放值，必须在 0 到 20 之间。注意：在 Apple Maps 上已弃用，请改用 cameraZoomRange。 | Number | 0 | no | ios/android | yes |
| maxZoomLevel | 地图的最大缩放值，必须在 0 到 20 之间。注意：在 Apple Maps 上已弃用，请改用 cameraZoomRange。 | Number | 20 | no | ios/android | yes |
| rotateEnabled | 如果为 false，用户将无法捏合/旋转地图。 | Boolean | true | no | ios/android | yes |
| scrollEnabled | 如果为 false，用户将无法调整相机的俯仰角。 | Boolean | true | no | ios/android | yes |
| scrollDuringRotateOrZoomEnabled | 如果为 false，地图在旋转或缩放时将保持居中。注意：仅 Google Maps。 | Boolean | true | no | ios/android | no |
| pitchEnabled | 如果为 false，用户将无法调整相机的俯仰角。 | Boolean | true | no | ios/android | yes |
| toolbarEnabled | 仅 Android 如果为 false，按下标记时将隐藏「Navigate」和「Open in Maps」按钮。如果启用工具栏，请确保编辑 AndroidManifest.xml。 | Boolean | true | no | android | no |
| cacheEnabled | 如果为 true，地图将被缓存并显示为图像而非可交互状态，用于提升性能。注意：仅 Apple Maps。 | Boolean | false | no | ios | no |
| loadingEnabled | 如果为 true，地图加载时将显示加载指示器。 | Boolean | false | no | ios/android | yes |
| loadingIndicatorColor | 设置加载指示器的颜色，默认为 #606060。 | Color | #606060 | no | ios/android | yes |
| loadingBackgroundColor | 设置加载背景颜色，默认为 #FFFFFF。 | Color | #FFFFFF | no | ios/android | yes |
| tintColor | 设置地图的色调颜色（更改位置指示器的颜色）。默认为系统蓝色。注意：仅 iOS（Apple Maps）。 | Color | | no | ios | no |
| moveOnMarkerPress | 仅 Android 如果为 false，按下标记时地图不会移动。 | Boolean | true | no | android | no |
| legalLabelInsets | 如果设置，将更改「Legal」标签链接相对于系统默认值的位置。注意：仅 iOS。 | EdgeInsets | | no | ios | no |
| appleLogoInsets | 如果设置，将更改 Apple logo 的位置。使用 left/top 从对应的边缘定位，或使用 right/bottom 从对侧边缘定位。注意：仅 iOS（Apple Maps）。 | EdgeInsets | | no | ios | yes |
| kmlSrc | KML 文件的 URL。注意：仅 Google Maps 和 Markers（Android 或使用 PROVIDER_GOOGLE 的 iOS）。 | String | | no | ios/android | no |
| compassOffset | 如果设置，将更改指南针的位置。注意：仅 iOS Maps。 | Point | | no | ios | yes |
| isAccessibilityElement | 确定 MapView 是捕获 VoiceOver 触摸还是将其转发给子元素。为 true 时，地图标记对 VoiceOver 不可见。注意：仅 iOS Maps。 | Boolean | false | no | ios | no |
| cameraZoomRange | 地图相机距离限制。minCenterCoordinateDistance 为最小距离，maxCenterCoordinateDistance 为最大距离，animated 用于动画缩放范围更改。如果与 minZoomLevel、maxZoomLevel 冲突，优先使用此属性。注意：仅 iOS 13.0+。 | cameraZoomRange | | no | ios | no |
注：HarmonyOS 侧的 mapType 支持以下字符串值
'none' \ 'standard' \ 'terrain'
注：HarmonyOS 侧的双击放大由 zoomEnabled 开启，zoomTapEnabled 不能单独关闭该功能。
静态方法
| 名称 | 描述 | 参数类型 | 必填 | 平台 | OpenHarmony平台支持 | | -------- | ----------- | -------- | -------- | ----------- | ----------------- | | Animated | 动画 | Animated | no | ios/android | no |
API
| 名称 | 描述 | 参数 | 平台 | OpenHarmony平台支持 |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | ----------- | ----------------- |
| getCamera | 返回一个 Promise<Camera> 结构，指示当前的相机配置。 | | ios/android | yes |
| animateCamera | 将相机动画移动到新视图。可以传入部分 camera 对象；未给出的任何属性将保持不变。 | camera: Camera, { duration: Number } | ios/android | yes |
| setCamera | 与 animateCamera 类似，但立即设置新视图，无动画效果。 | camera: Camera | ios/android | yes |
| animateToRegion | 与 animateCamera 类似 | region: Region, duration: Number | ios/android | yes |
| getMapBoundaries | Promise<{northEast: LatLng, southWest: LatLng}> | | ios/android | yes |
| setMapBoundaries | 边界由地图的中心坐标定义，而非设备的视口本身。注意：仅 Google Maps。 | northEast: LatLng, southWest: LatLng | ios/android | yes |
| setIndoorActiveLevelIndex | | levelIndex: Number | ios/android | no |
| fitToElements | 注意 edgePadding 仅适用于 Google Maps。 | options: { edgePadding: EdgePadding, animated: Boolean } | ios/android | no |
| fitToSuppliedMarkers | 如果需要在 ComponentDidMount 中使用，请确保将其放入 timeout 中，否则会导致性能问题。注意 edgePadding 仅适用于 Google Maps。 | markerIDs: String[], options: { edgePadding: EdgePadding, animated: Boolean } | ios/android | no |
| fitToCoordinates | 如果在 Android 的 ComponentDidMount 中调用，将导致异常。建议从 MapView 的 onLayout 事件中调用。 | coordinates: Array, options: { edgePadding: EdgePadding, animated: Boolean } | ios/android | yes |
| addressForCoordinate | 将地图坐标转换为地址（Address）。返回 Promise<Address>。注意：iOS 上的 Google Maps 不支持。 | coordinate: LatLng | ios/android | yes |
| pointForCoordinate | 将地图坐标转换为视图坐标（Point）。返回 Promise<Point>。 | coordinate: LatLng | ios/android | yes |
| coordinateForPoint | 将视图坐标（Point）转换为地图坐标。返回 Promise<Coordinate>。 | point: Point | ios/android | yes |
| getMarkersFrames | 获取标记在视图坐标中的中心和边框。返回 Promise<{ "markerID" : { point: Point, frame: Frame } }>。注意：仅 iOS。 | onlyVisible: Boolean | ios | no |
| takeSnapshot | 截取地图快照并保存为图片文件，或以 base64 编码字符串形式返回图片。 | SnapshotOptions | ios/android | yes |
Marker
属性
| 名称 | 描述 | 参数类型 | 默认值 | 必填 | 平台 | OpenHarmony平台支持 |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------- | -------- | -------- | ----------- | ----------------- |
| title | 标记的标题。仅在组件没有 <Callout /> 子元素时使用，此时将使用默认气泡行为，同时显示 title 和 description（如果提供）。 | String | | no | ios/android | yes |
| description | 标记的描述。仅在组件没有 <Callout /> 子元素时使用，此时将使用默认气泡行为，同时显示 title 和 description（如果提供）。 | String | | no | ios/android | yes |
| image | 用作标记图标的自定义图片。仅允许使用本地图片资源。 | String | | no | ios/android | yes |
| icon | 要渲染的标记图标（相当于 GMSMarker 类的 icon 属性）。仅允许使用本地图片资源。注意：仅 Google Maps！ | ImageSource* | | no | ios/android | no |
| pinColor | 如果未提供自定义标记视图或自定义图片，将使用平台默认图钉，可通过此颜色进行自定义。如果使用了自定义标记，则忽略此属性。 | Color | | no | ios/android | no |
| coordinate | 标记的坐标。 | dynamic | | yes | ios/android | yes |
| centerOffset | 显示视图的偏移量（以点为单位）。 | Point | (0, 0) | no | ios/android | no |
| calloutOffset | 放置气泡的偏移量（以点为单位）。 | Point | (0, 0) | no | ios/android | no |
| anchor | 设置标记的锚点。 | Point | (0.5, 1) | no | ios/android | yes |
| calloutAnchor | 指定标记图片中气泡显示时的锚点位置。使用与 anchor 相同的坐标系。有关更多详细信息，请参见 anchor 属性。 | Point | (0.5, 0) | no | ios/android | yes |
| flat | 设置此标记是平贴在地图上还是作为面向相机的广告牌。 | Boolean | false | no | ios/android | yes |
| identifier | 用于后续引用此标记的标识符。 | String | | no | ios/android | no |
| rotation | 指示标记旋转角度的浮点数，单位为度。 | Float | 0 | no | ios/android | yes |
| draggable | 这是一个非值属性。添加此属性可使标记可拖动（重新定位）。 | Boolean | false | no | ios/android | yes |
| tappable | 设置标记是否可点击。如果设置为 false，标记将不会有 onPress 事件。注意：仅 iOS Google Maps。 | Boolean | true | no | ios/android | yes |
| tracksViewChanges | 设置此标记是否应跟踪子视图的变化。当使用子视图创建自定义标记时，此选项决定在首次渲染后是否跟踪内容的变化。此选项会影响性能，因此建议尽可能禁用它，并在标记内容变化时显式调用 redraw 方法。 | Boolean | true | no | ios/android | no |
| tracksInfoWindowChanges | 设置此标记是否应跟踪信息窗口中的视图变化。启用后，标记可在首次渲染后更改信息窗口的内容，但会降低性能，因此建议在不需要时禁用它。注意：仅 iOS Google Maps。 | Boolean | false | no | ios/android | no |
| stopPropagation | 设置此标记是否应传播 onPress 事件。启用后将阻止父级 MapView 的 onPress 被调用。注意：仅 iOS。Android 不会传播 onPress 事件。更多信息请参见 #1132。 | Boolean | false | no | ios/android | no |
| opacity | 标记的不透明度，介于 0.0 到 1.0 之间。 | Float | 1.0 | no | ios/android | yes |
| isPreselected | 为 true 时，标记将被预选中。将此设置为 true 可让用户无需先点击聚焦即可拖动标记。注意：仅 iOS Apple Maps。 | Boolean | false | no | ios | no |
| key | 如果未指定 key 或 key 不唯一，<Marker /> 将被复用，因此位置更改时会有动画。如果要禁用动画，请添加具有唯一值的 key 属性，如 key_${item.longitude}_${item.latitude}。注意：仅 iOS。 | | | no | ios | no |
静态方法
| 名称 | 描述 | 参数类型 | 必填 | 平台 | OpenHarmony平台支持 | | -------- | ----------- | -------- | -------- | ----------- | ----------------- | | Animated | 动画 | Animated | no | ios/android | no |
API
| 名称 | 描述 | 参数 | 平台 | OpenHarmony平台支持 |
| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------- | ----------------- |
| showCallout | 显示此标记的气泡 | | ios/android | yes |
| hideCallout | 隐藏此标记的气泡 | | ios/android | yes |
| redrawCallout | 触发标记气泡的重绘。适用于 iOS 上的 Google Maps。注意：仅 iOS。 | | ios | no |
| animateMarkerToCoordinate | 动画移动标记。注意：仅 Android。 | | android | yes |
| redraw | 触发标记的重绘。当标记有更新且 tracksViewChanges 成本过高时很有用。 | | ios/android | yes |
Polyline
属性
| 名称 | 描述 | 参数类型 | 默认值 | 必填 | 平台 | OpenHarmony平台支持 |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | --------------------- | -------- | ----------- | ----------------- |
| coordinates | 描述折线的坐标数组 | Array | | yes | ios/android | yes |
| strokeWidth | 路径的描边宽度。 | Number | 1 | no | ios/android | yes |
| strokeColor | 路径的描边颜色。 | String | #000, rgba(r,g,b,0.5) | no | ios/android | yes |
| strokeColors | 路径的描边颜色数组（仅 iOS）。长度必须与 coordinates 相同。 | dynamic | | no | ios/android | yes |
| lineCap | 应用于路径开口端的线帽样式。可能的值为 butt、round 或 square。注意：iOS 上的 GoogleMaps provider 尚不支持 lineCap。 | String | round | no | ios/android | yes |
| lineJoin | 应用于路径转角的线连接样式。可能的值为 miter、round 或 bevel。 | String | round | no | ios/android | yes |
| miterLimit | 用于避免连接线段接合处出现尖角的限制值。miter 限制有助于避免使用 miter lineJoin 样式的路径中出现尖角。如果斜接长度（即斜接对角长度）与线条粗细的比率超过 miter 限制，接合处将转换为斜角连接。默认 miter 限制为 10，这会导致接合处角度小于 11 度的斜接被转换。 | Number | | no | ios/android | no |
| geodesic | 布尔值，指示是否将每条线段绘制为测地线（与墨卡托投影上的直线相对）。测地线是地球表面上两点之间的最短路径。测地线曲线是假设地球为球体构建的。 | Boolean | false | no | ios/android | yes |
| lineDashPhase | （仅 iOS）开始绘制虚线图案的偏移量（以点为单位）。使用此属性可以在线段或间隙的中间位置开始绘制虚线。例如，对于模式 5-2-3-2，phase 值为 6 将使绘制从第一个间隙的中间开始。 | Number | 0 | no | ios/android | no |
| lineDashPattern | 一个数字数组，指定路径使用的虚线图案。数组包含一个或多个数字，指示图案中线段和间隙的长度（以点为单位）。数组中的值交替排列，以第一个线段长度开始，然后是第一个间隙长度，接着是第二个线段长度，依此类推。 | Array | | no | ios/android | yes |
| tappable | 布尔值，允许折线可点击并使用 onPress 函数。 | Bool | false | no | ios/android | yes |
注：HarmonyOS 侧的 lineJoin 支持以下字符串值
'default' \ 'bevel' \ 'round'
Polygon
属性
| 名称 | 描述 | 参数类型 | 默认值 | 必填 | 平台 | OpenHarmony平台支持 |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ----------------------- | -------- | ----------- | ----------------- |
| coordinates | 描述多边形的坐标数组 | Array | | yes | ios/android | yes |
| holes | 描述多边形孔洞的二维坐标数组，每个孔洞至少包含 3 个点。 | Array<Array> | | no | ios/android | yes |
| strokeWidth | 路径的描边宽度。 | Number | 1 | no | ios/android | yes |
| strokeColor | 路径的描边颜色。 | String | #000, rgba(r,g,b,0.5) | no | ios/android | yes |
| fillColor | 路径的填充颜色。 | String | #000, rgba(r,g,b,0.5) | no | ios/android | yes |
| lineCap | 应用于路径开口端的线帽样式。可能的值为 butt、round 或 square。注意：iOS 上的 GoogleMaps provider 尚不支持 lineCap。 | String | round | no | ios/android | no |
| lineJoin | 应用于路径转角的线连接样式。可能的值为 miter、round 或 bevel。 | String | round | no | ios/android | yes |
| miterLimit | 用于避免连接线段接合处出现尖角的限制值。miter 限制有助于避免使用 miter lineJoin 样式的路径中出现尖角。如果斜接长度（即斜接对角长度）与线条粗细的比率超过 miter 限制，接合处将转换为斜角连接。默认 miter 限制为 10，这会导致接合处角度小于 11 度的斜接被转换。 | Number | | no | ios/android | no |
| geodesic | 布尔值，指示是否将每条线段绘制为测地线（与墨卡托投影上的直线相对）。测地线是地球表面上两点之间的最短路径。测地线曲线是假设地球为球体构建的。 | Boolean | false | no | ios/android | yes |
| lineDashPhase | （仅 iOS）开始绘制虚线图案的偏移量（以点为单位）。使用此属性可以在线段或间隙的中间位置开始绘制虚线。例如，对于模式 5-2-3-2，phase 值为 6 将使绘制从第一个间隙的中间开始。 | Number | 0 | no | ios/android | no |
| lineDashPattern | (iOS only) 一个数字数组，指定路径使用的虚线图案。数组包含一个或多个数字，指示图案中线段和间隙的长度（以点为单位）。数组中的值交替排列，以第一个线段长度开始，然后是第一个间隙长度，接着是第二个线段长度，依此类推。 | Array | | no | ios/android | yes |
| tappable | 布尔值，允许多边形可点击并使用 onPress 函数。 | Bool | false | no | ios/android | yes |
| zIndex | （仅 Android）此多边形覆盖物相对于其他覆盖物的绘制顺序。z-index 较大的覆盖物绘制在 z-index 较小的覆盖物之上。相同 z-index 的覆盖物顺序是任意的。默认 zIndex 为 0。 | Number | 0 | no | ios/android | yes |
注：HarmonyOS 侧的 lineJoin 支持以下字符串值
'default' \ 'bevel' \ 'round'
Circle
属性
| 名称 | 描述 | 参数类型 | 默认值 | 必填 | 平台 | OpenHarmony平台支持 |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ----------------------- | -------- | ----------- | ----------------- |
| center | 圆心的坐标 | LatLng | | yes | ios/android | yes |
| radius | 要绘制的圆的半径（以米为单位） | Number | | yes | ios/android | yes |
| strokeWidth | 路径的描边宽度。 | Number | 1 | no | ios/android | yes |
| strokeColor | 路径的描边颜色。 | String | #000, rgba(r,g,b,0.5) | no | ios/android | yes |
| fillColor | 路径的填充颜色。