React native导入百度地图
开源地址:https://github.com/lovebing/react-native-baidu-map
今天在React native中导入百度地图组件遇到过许多坑,特此写一篇博客记录踩过的坑...
1、Install 安装
npm install react-native-baidu-map --save
2、在settings.gradle中添加以下内容
include ':app'
include ':react-native-baidu-map'
project(':react-native-baidu-map').projectDir = new File(settingsDir, '../node_modules/react-native-baidu-map/android')
3、在build.gradle中添加:
compile project(':react-native-baidu-map')
如下:
4、修改MainApplication.java 文件
添加:new BaiduMapPackage(getApplicationContext())
除此之外,别忘了将包导进来:不过一般都会自动导进来。
MainApplication
import org.lovebing.reactnative.baidumap.BaiduMapPackage;
5、修改AndroidMainifest.xml 文件
1)配置各种权限
2)添加com.baidu.lbsapi.API_KEY
完整文件如下:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"package="com.market"><!-- 这个权限用于进行网络定位--><uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"></uses-permission><!-- 这个权限用于访问GPS定位--><uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"></uses-permission><!-- 用于访问wifi网络信息,wifi信息会用于进行网络定位--><uses-permission android:name="android.permission.ACCESS_WIFI_STATE"></uses-permission><uses-permission android:name="android.permission.INTERNET" /><uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/><uses-permission android:name="com.android.launcher.permission.READ_SETTINGS" /><uses-permission android:name="android.permission.WAKE_LOCK"/><uses-permission android:name="android.permission.CHANGE_WIFI_STATE" /><uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /><uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/><uses-permission android:name="android.permission.WRITE_SETTINGS" /><uses-permission android:name="android.permission.INTERNET" /><applicationandroid:name=".MainApplication"android:label="@string/app_name"android:icon="@mipmap/ic_launcher"android:allowBackup="false"android:theme="@style/AppTheme"><meta-dataandroid:name="com.baidu.lbsapi.API_KEY"android:value="换成你自己的apikey"/><activityandroid:name=".MainActivity"android:label="@string/app_name"android:configChanges="keyboard|keyboardHidden|orientation|screenSize"android:windowSoftInputMode="adjustResize"><intent-filter><action android:name="android.intent.action.MAIN" /><category android:name="android.intent.category.LAUNCHER" /></intent-filter></activity><activity android:name="com.facebook.react.devsupport.DevSettingsActivity" /></application></manifest>
获得Android签名的sha1值:
第1步:运行进入控制台
第2步:定位到.android文件夹下,输入cd .android
第3步:输入keytool -list -v -keystore debug.keystore,会得到三种指纹证书,选取SHA1类型的证书(密钥口令是android),例如:
其中keytool为jdk自带工具;keystorefile为Android 签名证书文件
7、修改Demo程序
直接使用提供的Demo源文件
import BaiduMapDemo from './BaiduMapDemo';
遇到的问题:
修改BaiduMapPackage.js中的第49行 删除 @Override
在编译器目录中找不到、直接在文件中搜索该文件
然后又出现了图示的错误:
这是因为在新版React Native中proptype需要单独引入,
删除MapView.js中老版本定义的PropTypes
在MapView.js中加入:
import PropTypes from 'prop-types';
这样就完成了,分享一下运行结果:
打包成apk后,会出现地图无法显示的情况,这是因为配置的是开发版,必须要配置发布版,
配置时候运行如下命令:
keytool -v -list -keystore E:/XXX.jksXXX.jks (此处写你自己的key
配置后将生成的SHA1配置到百度地图的后台。
React native导入百度地图相关推荐
- React native 接入百度AI活体检测、人脸识别 iOS版本
前期准备工作参考:React native 接入百度AI活体检测.人脸识别 Android版本 iOS配置 1.将FaceSDK里面的文件导入到iOS项目 添加完之后是这样的 2.选择链接C++标准库 ...
- react项目使用百度地图API
文章目录 前言 一.接入API 1.登录百度地图 2.创建应用,获取密钥 3.引入API 4.当作模块导入BMap 二.使用 1.引入 2.展示地图 三.效果展示 总结 前言 最近在开发一款react ...
- 在react中使用百度地图
在react中使用百度地图 在react中使用百度地图有三种方式 1:首先使用window保存BMap 1): 在创建好的react项目中的public目录下的index.html中引入<scr ...
- React Native for Arcgis 地图开发 LocationCtrl (十五)
定位工具封装和使用 LocationCtrl import React, {useState, useEffect} from 'react'; import {View, Text, ScrollV ...
- React Native for Arcgis 地图开发 聚合图Cluster (十一)
ClusterLayerCtrl 聚合图层调用封装 import React, {useEffect, useState} from 'react'; import {ScrollView, Styl ...
- react如何使用百度地图
使用百度地图之前,我们需要提前做好准备工作:先注册好百度地图,然后就开始 找到并打开开发文档 进入React-BMapGL 打开后React-BMapGL的页面 在public中的index.html ...
- React中使用百度地图
1,找到百度地图首页 进入百度地图开放平台 ,地址如下 百度地图开放平台 | 百度地图API SDK | 地图开发 2.找到开发文档中react-BMapGL 如上图所示,我们进入React-BMap ...
- javaswing引入百度地图_【react】React怎么引用百度地图
前期准备:在百度地图开发文档中申请秘钥,申请流程按照网上的攻略走很简单的几个步骤 (如果项目紧急也可以私信找我要我的秘钥) 官网http://lbsyun.baidu.com/ index.html文 ...
- react 使用 leaflet 百度地图_【React】react项目中应用百度地图添加起始点绘制路线...
如图:项目中百度地图的应用添加起始点.终点并绘制路线 在展示代码的时候首先展示一下后台返回给我的接口 { 其中position_list参数代表的是用户的行驶点, area参数代表的是服务区的坐标点, ...
最新文章
- zabbix--监控MySQL主从状态
- verilog中的三目运算符
- nodejs中EventEmitter
- 如何利用css使PNG图片透明
- SAP Spartacus 电商云 UI Shipping Method 在单元测试环境下没有显示的问题
- Win10系统添加 Win10 LTSC2019闹钟
- 灵活使用DataView
- Ubuntu 通过apt安装VSCode
- 利用ros3djs接收pointcloud2在web端显示
- POJ 3671 DP or 乱搞
- URLClassLoader加载class到当前线程类加载器【zt】
- 使用 Cobbler 自动化和管理系统安装
- 金蝶oracle用鼎信诺取数,取数软件 审计取数软件?
- 加载行为:未加载用户已选择禁用宏
- 金蝶K3案例教程目录
- flash加载图片 代码_消失的人:Flash中的图片加载器和随机链接应用
- Python第五周作业之选择题
- 微带线特性阻抗计算公式_HFSS 计算 微带线 特征阻抗
- CAD关于图层隐藏图层操作(com接口c#语言)
- 怎样用两部手机同时登陆一个QQ(两部手机同时在线)
热门文章
- Android开发——实现一个拨号器(一)
- 华三交换机配置vrrp_H3C交换机设置简单主备备份模式的VRRP应用示例
- Windows系统用户名文件夹为中文,解决方案
- 数据恢复软件BadCopy ProV4.10
- VMWARE WORKSTATION 网络
- java实验报告第8章_java实验报告8.doc
- 土木工程转计算机科学,【土木转行·续集】土建类同学转行计算机,什么时间转最合适?...
- 运用css设计简单3D魔方
- Repository
- 鼠标无法唤醒计算机怎么办,win10鼠标无法唤醒睡眠电脑是怎么回事