react-native-amap3d
react-native高德地图组件,使用最新的3D SDK,支持Android + iOS,受 react-native-maps 启发,提供功能丰富且易用的接口。
功能
- 地图模式切换(常规,卫星,导航,夜间)
- 3D建筑,路况,室内地图
- 内置地图控件的显示隐藏(指南针,比例尺,定位按钮,缩放按钮)
- 手势交互控制(平移,缩放,旋转,倾斜)
- 中心坐标,缩放级别,倾斜度的设置,支持动画过渡
- 地图事件函数(onPress,onLongPress,onLocation,onStatusChange)
- 地图标记(标记)
- 自定义信息窗体
- 自定义图标
- 折线绘制(折线)
- 多边形绘制(多边形)
- 圆形绘制(圆)
- 热力图(热图)
- 海量点(多点)
- 离线地图
安装
安装依赖
npm i react-native-amap3d
或
$ yarn add react-native-amap3d
项目配置
Android
$ react-native link react-native-amap3d
iOS
推荐使用CocoaPods,需要注意iOS项目不要 react-native link react-native-amap3d ,不然会引入错误的依赖,导致编译失败。在 ios 目录下新建文件 Podfile :
platform :ios, '8.0' # The target name is most likely the name of your project. target 'Your Target' do # Your 'node_modules' directory is probably in the root of your project, # but if not, adjust the `:path` accordingly pod 'React', :path => '../node_modules/react-native', :subspecs => [ 'Core', 'CxxBridge', # Include this for RN >= 0.47 'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43 'RCTText', 'RCTNetwork', 'RCTWebSocket', # needed for debugging # Add any other subspecs you want to use in your project ] # Explicitly include Yoga if you are using RN >= 0.42.0 pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga' # Third party deps podspec link 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 post_install do |installer| installer.pods_project.targets.each do |target| if target.name == "React" target.remove_from_project end end end
注意:不同的 RN 版本,Podfile
可能需要稍作调整,具体参考 https://facebook.github.io/react-native/docs/0.52/integration-with-existing-apps.html 。
然后运行:
$ pod install
添加高德key
Android
- 获取高德key。
- 编辑Android项目的 AndroidManifest.xml (一般在 android\app\src\main\AndroidManifest.xml ),添加如下代码:
<application> <meta-data android:name="com.amap.api.v2.apikey" android:value="你的高德 Key" /> </application>
iOS
- 获取高德key。
- 在 AppDelegate.m 里引入SDK头文件 #import
, 并设置高德key [AMapServices sharedServices].apiKey = @"你的高德 Key";。