react-native-amap3d 
react-native 高德地图组件，使用最新 3D SDK，支持 Android + iOS，受 react-native-maps 启发，提供功能丰富且易用的接口。
功能
- 地图模式切换（常规、卫星、导航、夜间）
- 3D 建筑、路况、室内地图
- 内置地图控件的显示隐藏（指南针、比例尺、定位按钮、缩放按钮）
- 手势交互控制（平移、缩放、旋转、倾斜）
- 中心坐标、缩放级别、倾斜度的设置，支持动画过渡
- 地图事件（onPress、onLongPress、onLocation、onStatusChange）
- 地图标记（Marker）
- 自定义信息窗体
- 自定义图标
- 折线绘制（Polyline）
- 多边形绘制（Polygon）
- 圆形绘制（Circle）
- 热力图（HeatMap）
- 海量点（MultiPoint）
- 导航（驾车、步行、骑行）（待完善 🚧）
安装
安装依赖
$ npm i react-native-amap3d
项目配置
Android
$ react-native link react-native-amap3d
iOS
推荐使用 CocoaPods，在 ios 目录下新建文件 Podfile：
platform :ios, '8.0'
target 'Your Target' do
pod 'yoga', path: '../node_modules/react-native/ReactCommon/yoga/'
pod 'React', path: '../node_modules/react-native/'
pod 'react-native-amap3d', path: '../node_modules/react-native-amap3d/'
end然后运行：
$ pod install
需要注意的是，使用 CocoaPods 的 iOS 项目不需要也不能 react-native link react-native-amap3d。
如果你不想使用 CocoaPods，手动配置请参考：手动部署。
添加高德 Key
Android
-
编辑 Android 项目的
AndroidManifest.xml（一般在android\app\src\main\AndroidManifest.xml），添加如下代码：<application> <!-- 确保 meta-data 是直属 application 的子标签 --> <meta-data android:name="com.amap.api.v2.apikey" android:value="你的高德 Key"/> </application>
iOS
-
在
AppDelegate.m里引入 SDK 头文件#import <AMapFoundationKit/AMapFoundationKit.h>， 并设置高德 Key[AMapServices sharedServices].apiKey = @"你的高德 Key";。
用法
导入地图模块
import {MapView, Marker, Polyline} from 'react-native-amap3d'
<MapView>
<Marker .../>
<MapView/>或者
import MapView from 'react-native-amap3d'
<MapView>
<MapView.Marker .../>
</MapView>基本用法
<MapView coordinate={{
latitude: 39.91095,
longitude: 116.37296,
}}/>启用定位并监听定位事件
<MapView
locationEnabled
onLocation={({nativeEvent}) =>
console.log(`${nativeEvent.latitude}, ${nativeEvent.longitude}`)}
/>添加可拖拽的地图标记
<MapView>
<Marker
draggable
title='这是一个可拖拽的标记'
onDragEnd={({nativeEvent}) =>
console.log(`${nativeEvent.latitude}, ${nativeEvent.longitude}`)}
coordinate={{
latitude: 39.91095,
longitude: 116.37296,
}}/>
</MapView>自定义标记图片及信息窗体
<Marker
image='flag'
coordinate={{
latitude: 39.706901,
longitude: 116.397972,
}}
>
<View style={styles.customInfoWindow}>
<Text>自定义信息窗体</Text>
</View>
</Marker>更多示例请参考示例项目。
接口
请参考注释文档：
常见问题
- 由于 RN 经常改接口，该项目只能保证在最新 RN 下测试通过
- 由于 3D 地图渲染需要硬件加速，部分 Android 模拟器会因为缺少硬件加速而导致运行崩溃
如何进行问题反馈
进行问题反馈之前：
- 提供你正在使用的版本，以及 RN 版本
- 提供详细的错误信息，也许你需要 android studio 或 xcode
- 编译相关的问题（尤其是 iOS）需要你对编译过程有足够的了解
以下情况 issue 会被 close：
- 确定是环境配置的问题，且没有提供足够的信息
- 问题不具备普遍性，且缺乏讨论
问题被关闭，仍然可以继续反馈，我会尽量回复。