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

栏目: 服务器 · 发布时间: 6年前

内容简介:使用组件:地址:

使用组件:

react-native-baidu-map

获取百度地图API_KEY

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

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

安装

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>

效果,上图

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

我的网站: https://wayne214.github.io


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

注意力经济: 如何把大众的注意力变成生意

注意力经济: 如何把大众的注意力变成生意

吴修铭 / 中信出版集团股份有限公司 / 2018-4-1 / 69

编辑推荐 这本书由万维钢作序,并在《得到》日课中多次推荐!中文版未上市之前,中文前沿媒体就在力推这本书!关于注意力争夺战的历史和现在,作者给了权威的梳理和定位! 百年来,在争夺注意力的战场上,媒体、广告、商人、企业和大众成为博弈的主角。商人是如何在注意力争夺战中获利的?媒体是如何在改变报道形式的?广告是如何进化的?以及,营销是如何变得随处可见、无孔不入的呢?这本书讲述了令商人或企业从吸......一起来看看 《注意力经济: 如何把大众的注意力变成生意》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试