reactnative 集成高德地图(react-native-amap3d)
react-native-amap3d三方库安装
2018-10-09
1,react-native init --version="0.55.4" AmapDemo,//新建项目
然后用AS打开配置一下,配置一下gradle,如果在已有的RN项目上添加高德地图插件,不需此步.
2,进入你的项目的根目录下:如果是AmapDemo,
cd AmapDemo;
npm i react-native-amap3d 或者 npm install react-native-amap3d //安装高德地图插件
我的项目名称是是BaiduMapDemo:
3, react-native link react-native-amap3d //将高德地图插件关联你的项目
4,配置秘钥:
5,在js 文件中导入地图模块
6,设置地图状态
所谓的地图状态包括:中心坐标(coordinate)、缩放级别(zoomLevel)、倾斜度(titl)、旋转角度(rotation)、显示区域(region)、地图模式(mapType)。目前高德地图支持5种地图模式:
标准(standard)
卫星(satellite)
导航(navigation)
公交(bus)
夜间(night)
7,定位
以下是关于IOS的配置
8,安装pod 推荐:http://www.code4app.com/article/cocoapods-install-usage 或者自己百度去安装也行
9,在项目文件夹中的IOS文件夹中配置pod文件
生成pod文件:http://lbsyun.baidu.com/index.php?title=iossdk/guide/create-project/cocoapods
配置如下:
platform :ios, '8.0'
target 'yourObjectName' do
pod 'yoga', path: '../node_modules/react-native/ReactCommon/yoga/'
pod 'React', path: '../node_modules/react-native/', :subspecs => [
'DevSupport',
'CxxBridge',
'RCTNetwork',
]
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-amap3d', path: '../node_modules/react-native-amap3d/lib/ios/'
end
PS: 为什么加这两个? 'CxxBridge','RCTNetwork',
CxxBridge 好像因为版本的问题 之前RN版本升级过程中导致的,RCTNetwork 好像xcode7 之后的bug 相关具体原因
10, 执行pod命令
pod install --verbose --no-repo-update(后面的参数:省略升级CocoaPods的spec仓库,加速安装而已)
可能会遇到错误:
1. 本地ReactCommon中是Yoga 而这里是yoga 跟自己本地不一致以及其他相似问题
2. 路径错误: 之前react-native-amap3d有的版本中 ios/android文件夹直接在react-native- amap3d文件夹中 不在lib中 根据本地实际情况安装。
11,打开Xcode进行IOS配置(打开的是你项目中IOS文件夹下一个后缀名为xcworkspace的文件, 之后运行项目也是运行这个文件,不要在运行之前项目的xcodeproj文件的了。)
1. 删除Libraries中的Amap3D.xcodeproj文件
2. 选中项目名称->选择Build Phases->Link Binary With Libraries中生成的amap3d.a文件 没有不删除
3. 可能Search Path 或 Header 里面还有相关配置也干掉,不过我的没有。
这样就能把之前link的内容干掉了。
12. Xcode中找到Info.plist文件
在App Transport Security Settings中 添加 Allow Arbitrary Loads 对应值 YES
13. 获取IOS和Android SDK Key: http://lbs.amap.com/api/android-sdk/guide/create-project/get-key
14. IOSAppDelegate.m中配置
添加 #import <AMapFoundationKit/AMapFoundationKit.h>
以及配置你的key: [AMapServices sharedServices].apiKey = @"your key";
15. 配置android的key
在android/app/src/main/AndroidManifest.xml中application标签内添加
<meta-data android:name="com.amap.api.v2.apikey" android:value="your key" />
16. 根据react-native-amap3d库的文档添加一个地图页面 注意样式
17. 在Xcode中开始运行模拟器吧,可能会碰到以下问题:
1.debugger模式下没有提示错误但是不显示地图: sdk key 没有配置对 或者 你的样式有问题
2.Xcode Build的时候报错 或者 直接运行的时候报错
哪个Libraries中的库报错 删除哪个库里面的 类似 *-tvOs.a文件
3. folly/folly-config.h file not found