# ReactNativeLinkingToThirdMap

**Repository Path**: scenario-samples/react-native-linking-to-third-map

## Basic Information

- **Project Name**: ReactNativeLinkingToThirdMap
- **Description**: 在应用开发中，常常需要打开第三方地图，并完成路线规划。 本示例使用Linking.openURL打开第三方地图APP，实现路径规划。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-02-27
- **Last Updated**: 2026-02-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 通过Linking打开第三方地图

## 场景介绍

在应用开发中，常常需要打开第三方地图，并完成路线规划。
本示例使用Linking.openURL打开第三方地图APP，实现路径规划。

## 效果预览

<img src="screenshots/LinkingToThirdMap.gif" width="200">

## 实现思路

1.HarmonyOS侧在 entry/src/module.json5 中配置 querySchemes 字段。querySchemes标识允许当前应用进行跳转查询的URL schemes。其中maps是花瓣地图的scheme，amapuri是高德地图的scheme，baidumap是百度地图的scheme。
```
{
  "module": {
    "querySchemes":[
      "maps",
      "amapuri",
      "baidumap"
    ],
  }
}
```

2. React Native侧调用react-native种的Linking，使用Linking.openURL()打开第三方地图。其中在路径规划时涉及往三方地图APP传参，具体传参可参考对应地图URI API参考文档。

```
import { Linking } from 'react-native';
// 打开百度地图
Linking.openURL(`baidumap://map/direction?destination=name:${distTitle}|latlng:${distLat},${distLng}`);
// 打开高德地图
Linking.openURL(`amapuri://route/plan?dlat=${distLat}&dname=${distTitle}&dlon=${distLng}&t=${mode === 'drive' ? '0' : mode === 'bus' ? '1' : '2'}&sourceApplication=${appName}`);
// 打开花瓣地图
Linking.openURL(`maps://routes?linkSource=${appName}&destinationLatitude=${distLat}&destinationLongitude=${distLng}&destinationName=${distTitle}&vehicleType=${mode === 'drive' ? '0' : mode === 'bus' ? '3' : '1'}`);
```

## 约束与限制

- 本示例支持API Version 20 Release及以上版本。
- 本示例支持HarmonyOS 6.0.0 Release SDK及以上版本。
- 本示例需要使用DevEco Studio 6.0.0 Release及以上版本进行编译运行。
- 本示例使用0.77.33版本RNOH

## 工程目录

```
ReactNativeKeyboardListener                      // RN工程
├──harmony                                       // harmony工程
│  ├──entry/src/main/cpp                         // native相关配置
│  │  ├──generated                               // codegen自动生成的桥接代码
│  │  │   └──RNOHGeneratedPackage.h              
│  │  ├──CMakeLists.txt
│  │  └──PackageProvider.cpp
│  ├──entry/src
│  │        ├──main/ets
│  │        │       ├──entryability
│  │        │       │  └──EntryAbility.ets
│  │        │       ├──pages
│  │        │       │  └──Index.ets              // harmony侧入口
│  │        │       └──RNPackagesFactory.ets
│  │        └──module.json5                      // querySchemes字段配置文件
│  └──entry/src/main/resources/rawfile           // bundle、静态资源存放目录
├──App.tsx                                       // 跳转第三方地图实现
├──index.js                                      // 入口文件
├──metro.config.js                               // 打包配置
```
## 参考文档
[openurl](https://reactnative.cn/docs/next/linking#openurl)

[RNOH使用文档](https://gitcode.com/openharmony-sig/ohos_react_native/blob/tag_0.77.33/README.md)

[高德地图 URI API](https://lbs.amap.com/api/uri-api/gettingstarted)

[百度地图 URI API](https://lbs.baidu.com/faq/api?title=webapi/uri)

[花瓣地图 URI API](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/map-petalmaps)