【React Native】调起地图进行导航（系统地图、高德、百度）

最新推荐文章于 2025-06-02 09:15:37 发布
原创 最新推荐文章于 2025-06-02 09:15:37 发布 · 2.9k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react-native #地图 #导航 #百度地图 #高德地图

本文介绍如何在React-Native项目中实现地图功能，包括通过经纬度进行路线规划，以及react-native代码与原生代码的交互，以实现地图功能的完整演示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

react-native 项目在实现地图相关功能时，将目标地址的经纬度传给系统地图、高德或者百度来实现从当前位置到目标地址的路线规划等功能，以及react-native 代码与原生代码的交互，共同实现地图功能。

Demo地址：https://github.com/zhang-kui/Amap_RN.git

文档待补充。。。

 

React-Native 高德地图的使用
AnitaSun的博客
03-29 1397
使用 react-native-amap-geolocation 高德地图组件 分别使用了两个功能，一个是AndroidSDK和一个web服务 申请 高度地图的key 下载依赖 yarn add react-native-amap-geolocation 配置文件 编辑 android/settings.gradle，设置项目路径： + include ':react-native-amap-geolocation' + project(':react-native-amap-geo
react-native调起第三方高德地图导航URL解释
huhao0829的博客
12-12 3948
react-native调起第三方高德地图导航URL解释做react-native地图应用时，主要使用的是高德地图，所以在导航上也准备调起高德地图应用来完成导航功能，在高德地图API官网并没有发现高德地图应用的URL（这里就不得不说高德文档没有百度写的详细了），于是通过种种途径获取到了高德地图的URL，介绍一下1. 高德地图导航URLsourceApplication:你自己应用的名字，可不填 s
react-native调用高德地图进行直接导航，传参数（目的地经纬度）
GL666的专栏
07-01 2100
注：转载原作者“guchuanhang”的笔记，经测试ok！ 一、react-native 调用原生代码 1） package com.demo; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.widget.Toast; ...
React Native Maps 跨平台地图组件安装与配置指南
最新发布
gitblog_00220的博客
06-02 374
React Native Maps 跨平台地图组件安装与配置指南 前言 React Native Maps 是一个强大的跨平台地图组件库，允许开发者在 React Native 应用中集成地图功能。本文将详细介绍如何在不同平台（iOS/Android）和不同环境（Expo/原生项目）中正确安装和配置该组件。 基础安装 首先通过 npm 或 yarn 安装核心库： npm install react...
ReactNative调用高德地图流程
m0_38051293的博客
11-25 3092
ReactNative调用高德地图流程 ReactNative调用高德地图使用的是react-native-amap3d插件。可查看插件的github。 1、安装依赖和项目配置 首先命令行中分别执行 npm i react-native-amap3d react-native link react-native-amap3d 2、添加高德地图Key 获取Key可参考高德地图官网，查看官网...
ReactNative——导航器react-navigation（堆栈式导航器篇）
qq_37117521的博客
03-16 2811
RN持续更新噢~
React Native使用高德地图
low神
09-27 1757
在React Native项目中使用高德地图，主要涉及到几个关键步骤：安装高德地图相关的React Native模块、配置项目、申请高德地图API Key、以及在实际组件中使用高德地图功能。
reactnative调用第三方地图插件进行导航兼容android和ios
08-10
本文将详细介绍如何使用`react-native-map-linking`库在Android和iOS平台上调用高德地图、百度地图、腾讯地图以及Apple地图进行导航。 `react-native-map-linking`是一个非常实用的模块，它允许React Native应用...
reactnative高德地图拖拽定位demo使用webview实现
08-11
首先，`react-native-webview-amap`是React Native的一个插件，它允许开发者在原生应用中嵌入一个WebView，该WebView加载高德地图的JavaScript API，从而实现与React Native组件的交互。这使得开发者能够利用...
react-native-amap3d：react-native高德地图组件，使用最新的3D SDK，支持Android + iOS
02-05
react-native高德地图组件，使用最新的3D SDK，支持Android + iOS，受启发，提供功能丰富且易用的接口。 相关项目推荐： 关联文档： : 功能 地图模式切换（常规，卫星，导航，夜间） 3D建筑，路况，室内地图 内置...
ReactNative高德地图定位模块支持AndroidiOS
08-10
在“React Native高德地图定位模块支持Android iOS”这个主题中，我们将深入探讨如何在React Native项目中集成高德地图的定位功能，以便在两个主要移动平台上实现地理定位。 首先，React Native提供了跨平台开发的...
高德地图-实时导航，路径轨迹显示
11-13
高德地图-实时导航，路径轨迹显示 [注：本内容来自网络，在此分享仅为帮助有需要的网友，如果侵犯了您的权利，麻烦联系我，我会第一时间删除，谢谢您。]
react native 调用手机内置地图
随风而逝
10-09 2434
GitHub：https://github.com/starlight36/react-native-map-linking Android： 高德地图 百度地图 iOS： 高德地图 百度地图 苹果地图 使用：npm install react-native-map-linking --save ios需要在 info.plist 内配置： <key>LSApplica...
【亲测免费】 React Native 高德地图定位模块使用教程
gitblog_00025的博客
08-10 695
React Native 高德地图定位模块使用教程 项目介绍 react-native-amap-geolocation 是一个为 React Native 应用提供高德地图定位功能的模块，支持 Android 和 iOS 平台。该项目旨在提供尽可能完善的原生接口，同时提供符合 Web 标准的 Geolocation API 用法。 项目快速启动 安装模块 首先，使用 npm 或 yarn 安装 ...
React Native集成高德地图(android)
慕天远的博客
10-31 1592
首先要在这个网站上注册用户 然后根据说明创建应用,在应用右边点击加号添加key。 如何获取key: https://lbs.amap.com/api/android-sdk/guide/create-project/get-key 获取key之前需要填写两个SHA1值 ，一个是发行版本的SHA1值 一个是调试时候的SHA1值 获取调试版本SHA1值（需要根据开发工具的不同来生成，我用的...
React Native 高德地图组件的使用（react-native-amap3d）
laijinhui1995的博客
10-10 2556
这篇文章主要介绍 RN 高德地图组件 react-native-amap3d，安装过程请参考 README。 基本使用 import {MapView} from 'react-native-amap3d' render() { return MapView style={StyleSheet.absoluteFill}/> } 设置地图状态 所谓的地图状态包括：中
React Native 高德地图组件 `react-native-amap3d` 教程
gitblog_00092的博客
08-10 745
React Native 高德地图组件 react-native-amap3d 教程 1. 项目介绍 react-native-amap3d 是一个基于 React Native 开发的高德地图组件库，它使用最新的 3D SDK，支持 Android 和 iOS 平台。该组件库提供了丰富的地图功能，如地图模式切换、3D 建筑展示、手势交互等，同时也具备自定义标记、折线绘制、多边形绘制等功能。受 r...
React-Native使用高德地图插件获取定位信息的详细教程
qq_42458992的博客
08-17 2863
一 获取高德地图开放平台的Key        首先登陆高德地图开放平台：        https://console.amap.com/        然后注册登陆啥的就不说了。 进入控制台选项，创建两个应用：        
React Native 高德地图定位SDK插件使用教程
gitblog_00647的博客
09-13 1014
React Native 高德地图定位SDK插件使用教程 1. 项目目录结构及介绍 react-native-smart-amap-location/ ├── android/ │ ├── app/ │ ├── build.gradle │ ├── settings.gradle │ └── ... ├── ios/ │ ├── RCTAMapLocation.xcodepro...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ZhangKui_c

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值