react-native-baidu-map使用及注意问题

简介: react-native-baidu-map使用及注意问题

使用组件:

react-native-baidu-map


获取百度地图API_KEY


地址:http://lbsyun.baidu.com,在控制台成功创建应用后,就可以看到应用的api key了

微信图片_20220609183945.png

安装


yarn add react-native-baidu-map

原生部分


Android配置
react-native link react-native-baidu-map
配置AndroidManifest.xml文件

1.在<application>中加入如下代码配置开发密钥(AK)

<application>  
    <meta-data  
        android:name="com.baidu.lbsapi.API_KEY"  
        android:value="开发者 key" />  
</application>

2.在<application/>外部添加如下权限声明:

//获取设备网络状态,禁用后无法获取网络状态
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
//网络权限,当禁用后,无法进行检索等相关业务
<uses-permission android:name="android.permission.INTERNET" />
//读取设备硬件信息,统计数据
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
//读取系统信息,包含系统版本等信息,用作统计
<uses-permission android:name="com.android.launcher.permission.READ_SETTINGS" />
//获取设备的网络状态,鉴权所需网络代理
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
//允许sd卡写权限,需写入地图数据,禁用后无法显示地图
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
//这个权限用于进行网络定位
<uses-permission android:name="android.permission.WRITE_SETTINGS" />
//这个权限用于访问GPS定位
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
//获取统计数据
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
//使用步行AR导航,配置Camera权限
<uses-permission android:name="android.permission.CAMERA" />
//程序在手机屏幕关闭后后台进程仍然运行
<uses-permission android:name="android.permission.WAKE_LOCK" />
IOS配置

使用pod,Podfile文件中添加

pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge',
    'DevSupport', 
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', 
    'RCTAnimation'
  ]
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
  pod 'react-native-baidu-map', :podspec => '../node_modules/react-native-baidu-map/ios/react-native-baidu-map.podspec'
注意!!!:AppDelegate.m init 初始化,使用如下代码,可以解决RCTBaiduMapViewManager.h文件找不到的问题
#import <react-native-baidu-map/BaiduMapViewManager.h>
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    ...
    // 地图 ak 注册
    [BaiduMapViewManager initSDK:@""];
    ...
}

使用


导入
import { MapView, MapTypes, Geolocation, Overlay } from 'react-native-baidu-map'
const { Marker } = Overlay;
<MapView
         width={deviceWidth}
         height={200}
         zoom={18}
         trafficEnabled={true}
         zoomControlsVisible={true}
         mapType={MapTypes.SATELLITE}
         center={{ longitude: 116.465175, latitude: 39.938522 }}
>
        <Marker
            title='中心'
            location={{longitude: 116.465175, latitude: 39.938522}}
          />
</MapView>

效果,上图


微信图片_20220609183706.png

目录
相关文章
Baidu千帆大模型4——ERNIE-Bot 4.0角色
Baidu千帆大模型4——ERNIE-Bot 4.0角色
408 0
|
定位技术
vue-baidu-map 自定义地图主题
vue-baidu-map 自定义地图主题
275 0
|
10月前
|
NoSQL Linux Redis
linux之centos安装redis
linux之centos安装redis
|
数据采集 数据安全/隐私保护
高效网络采集实践:使用 Haskell 和 html-conduit 下载 www.baidu.com 视频完整教程
网络采集在当今信息时代中发挥着关键作用,用于从互联网上获取数据并进行分析。本文将介绍如何使用 Haskell 进行网络编程,从数据采集到图片分析,为你提供一个清晰的指南。我们将探讨如何使用爬虫代理来确保高效、可靠的数据获取,并使用 Haskell 的强大功能来分析和处理数据。
2971 1
|
12月前
|
人工智能 自然语言处理 API
谷歌AI Gemini官方网站入口(谷歌gemini pro官网入口)
谷歌 Gemini 是 Google 开发的一种多模态 AI 语言模型,具备多项强大功能,能够理解和生成自然语言,协助完成各种与语言相关的任务。
|
人工智能 自然语言处理 数据可视化
【千帆大模型】——使用Baidu Comate插件使用
【千帆大模型】——使用Baidu Comate插件使用
390 0
|
监控 网络协议 网络架构
在浏览器中输入www.baidu.com后执行的全过程
在浏览器中输入www.baidu.com后执行的全过程
1016 0
vxe-table可编辑状态默认显示下拉选select为默认展示
vxe-table可编辑状态默认显示下拉选select为默认展示
|
监控 BI Android开发
钉钉 Android 端功耗优化最佳实践(下)
钉钉 Android 端功耗优化最佳实践(下)
411 0
钉钉 Android 端功耗优化最佳实践(下)
|
监控 BI Android开发
钉钉 Android 端功耗优化最佳实践(上)
钉钉 Android 端功耗优化最佳实践(上)
889 0