react-native-amap3d
react-native 高德地图组件,使用最新 3D SDK,支持 Android + iOS。
该项目很大一定程度参考了 react-native-maps, 目前正在开发中,欢迎各种 Issue。
功能
- 地图模式切换(常规、卫星、导航、夜间)
- 3D 建筑、路况、室内地图
- 内置地图控件的显示隐藏(指南针、比例尺、定位按钮、缩放按钮)
- 手势交互控制(平移、缩放、旋转、倾斜)
- 中心坐标、缩放级别、倾斜度的设置,支持动画过渡
- 地图事件(onPress、onLongPress、onLocation)
- 地图标记(Marker)
- 自定义信息窗体
- 自定义图标
- 折线绘制(Polyline)
- 多边形绘制(Polygon)
- 圆形绘制(Circle)
安装
安装依赖
$ npm i react-native-amap3d --save
项目配置
Android
推荐使用 react-native link
$ react-native link react-native-amap3d
iOS
在 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/', :subspaces => [
'jschelpers_legacy',
]
pod 'react-native-amap3d', path: '../node_modules/react-native-amap3d/'
end
然后运行:
$ pod install
添加高德 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>
-
同时,配置必要的权限:
<uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /> <uses-permission android:name="android.permission.CHANGE_WIFI_STATE" /> <uses-permission android:name="android.permission.READ_PHONE_STATE" /> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
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
icon={() =>
<View style={styles.customMarker}>
<Image style={styles.customIcon} source={require('marker.png')}/>
</View>
}
coordinate={{
latitude: 39.706901,
longitude: 116.397972,
}}
>
<View style={styles.customInfoWindow}>
<Text>自定义信息窗体</Text>
</View>
</Marker>