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

左手的ㄟ右手 2023-07-13 10:54 16阅读 0赞

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

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

### 目录 ###

*   *  1.功能
     *  2. 安装
     *  3. 使用
     *  4. 坑点

--------------------

## 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），添加如下代码：

**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不显示][react-native-amap3d MapView]  
2、自定义 Marker 有可能会出现闪退的情况，github上作者建议不使用自定义Marker

[react-native-amap3d MapView]: https://blog.csdn.net/qq_33466661/article/details/105140393