react-native地图组件--react-native-amap3d

react-native-amap3d 是 react-native 高德地图组件，使用最新 3D SDK，支持 Android + iOS

参考github：https://github.com/qiuxiang/react-native-amap3d

---

1.功能

该组件提供的功能可以满足一般的react-native开发需求

• 地图模式切换（常规、卫星、导航、夜间）
• 3D 建筑、路况、室内地图
• 内置地图控件的显示隐藏（指南针、比例尺、定位按钮、缩放按钮）
• 手势交互控制（平移、缩放、旋转、倾斜）
• 中心坐标、缩放级别、倾斜度的设置，支持动画过渡
• 地图事件（onPress、onLongPress、onLocation、onStatusChange）
• 地图标记（Marker）
• 自定义信息窗体
• 自定义图标
• 折线绘制（Polyline）
• 多边形绘制（Polygon）
• 圆形绘制（Circle）
• 热力图（HeatMap）
• 海量点（MultiPoint）
• 离线地图

2. 安装

npm i react-native-amap3d

#ios项目需要更新pods
cd ios
pop install

本项目从 v2.0.0 开始支持 RN 的 autolinking，不再需要手动配置

添加高德Key

Android

1. 获取高德Key
2. 编辑 Android 项目的 AndroidManifest.xml（一般在android\app\src\main\AndroidManifest.xml），添加如下代码：

<application>
  <meta-data
    android:name="com.amap.api.v2.apikey"
    android:value="你的高德 Key" />
</application>

ios

1. 获取高德Key
2. 在AppDelegate.m 里引入SDK头文件 #import <AMapFoundationKit/AMapFoundationKit.h> ，并设置高德Key [AMapServices sharedServices].apiKey = @"你的高德 Key";

3. 使用

导入地图模块

import {MapView} from "react-native-amap3d";
class MapPage extends Component {
	render() {
	return(
	//MapView 还支持onClick ,onLongClick,onLocation 事件
	<MapView
  	coordinate={{latitude: 39.91095,longitude: 116.37296}}
  	locationEnabled={false} //是否启用定位 boolean
  	mapType={"standard"} //五种可选 standard,bus,navigation,night,satellite
  	rotateEnabled={true} //是否启用旋转手势，用于调整方向
  	scrollEnabled={true} //是否启用滑动手势，用于平移
  	showsCampass={false} //是否显示指南针
  	showsLocationButton={true} //是否显示定位按钮 (该功能只支持android)
	> 
	
	//地图上的标记点
	<Marker 
	active={true} //是否选中，选中时将显示信息窗体，一个地图只能有一个正在选中的 marker
	clickDisabled={false} //是否禁用点击，默认不禁用
	coordinate={{
	latitude:39.91095,
	longitude:116.37296
	}}
	title={"目标点"}
	/>
	
	//画多边形
	<Polygon
	coordinates = {[  //顶点坐标 参数为数组
	{
      latitude: 40.006901,
      longitude: 116.097972,
    },
    {
       latitude: 40.006901,
       longitude: 116.597972,
     },
     {
        latitude: 39.706901,
        longitude: 116.597972,
     }
	]}
	fillColor={"rgba(97,217,242,0.1)"} //多边形填充颜色
	strokeColor = {"rgba(97,217,242,1)"} //边线颜色
	strokeWidth = {4} //边线宽度
	/>

	//画多段线
	<Polyline
		coordinates={[
		{
      	latitude: 40.006901,
      	longitude: 116.097972,
    	},
    	{
       latitude: 40.006901,
       longitude: 116.597972,
     	},
     	{
        latitude: 39.706901,
        longitude: 116.597972,
     	}
		]}
		color={"rgba(97,217,242,1)"} //线段颜色
		dashed={false} //是否绘制虚线
		width={4}
	/>
	</MapView>
	

	
	)
	}
}

export default MapPage;

Marker自定义样式

<Marker 
	active={true}
	clickDisabled={false}
	coordinate={{
	latitude:39.91095,
	longitude:116.37296
	}}
	icon={() => <Image source={require('../Point.png')} style={{width:15,height:20}}/>}
	title={"自定义样式点"}
	/>

4. 坑点

可能会遇到的坑
1、react-native-amap3d MapView不显示
2、自定义 Marker 有可能会出现闪退的情况，github上作者建议不使用自定义Marker