0.0.35 • Published 8 months ago
@xlbjs/react-native-amap3d v0.0.35
react-native-amap3d

注意:该项目处于消极维护状态,随缘更新。
react-native 高德地图组件,使用最新 3D SDK,支持 Android + iOS,受 react-native-maps 启发,提供功能丰富且易用的接口。
相关项目推荐:
功能
- 地图模式切换(常规、卫星、导航、夜间)
- 3D 建筑、路况、室内地图
- 内置地图控件的显示隐藏(指南针、比例尺、定位按钮、缩放按钮)
- 手势交互控制(平移、缩放、旋转、倾斜)
- 中心坐标、缩放级别、倾斜度的设置,支持动画过渡
- 地图事件(onPress、onLongPress、onLocation、onCameraMove、onCameraIdle 等)
- 地图标记(Marker)
- 折线绘制(Polyline)
- 多边形绘制(Polygon)
- 圆形绘制(Circle)
- 热力图(HeatMap)
- 海量点(MultiPoint)
- 点聚合(Cluster)
安装
npm i react-native-amap3d
添加高德 API Key
首先你需要获取高德地图 API Key:
然后你需要在显示地图前调用接口设置 API key:
import { AMapSdk } from "react-native-amap3d";
import { Platform } from 'react-native';
AMapSdk.init(
Platform.select({
android: "c52c7169e6df23490e3114330098aaac",
ios: "186d3464209b74effa4d8391f441f14d",
})
);
用法
显示地图
import { MapView, MapType } from "react-native-amap3d";
<MapView
mapType={MapType.Satellite}
initialCameraPosition={{
target: {
latitude: 39.91095,
longitude: 116.37296,
},
zoom: 8,
}}
/>;
监听地图事件
import { MapView } from "react-native-amap3d";
<MapView
onLoad={() => console.log("onLoad")}
onPress={({ nativeEvent }) => console.log(nativeEvent)}
onCameraIdle={({ nativeEvent }) => console.log(nativeEvent)}
/>;
添加标记
其中 icon
支持 ImageSource。
同时支持 children
作为标记图标。
import { MapView, Marker } from "react-native-amap3d";
<MapView>
<Marker
position={{ latitude: 39.806901, longitude: 116.397972 }}
icon={require("../images/flag.png")}
onPress={() => alert("onPress")}
/>
<Marker
position={{ latitude: 39.806901, longitude: 116.297972 }}
icon={{
uri: "https://reactnative.dev/img/pwa/manifest-icon-512.png",
width: 64,
height: 64,
}}
/>
<Marker position={{ latitude: 39.906901, longitude: 116.397972 }}>
<Text
style={{
color: "#fff",
backgroundColor: "#009688",
alignItems: "center",
borderRadius: 5,
padding: 5,
}}
>
{new Date().toLocaleString()}
</Text>
</Marker>
</MapView>;
点聚合
Marker 数量过多(尤其是使用自定义 View 的情况下)会导致性能问题,而且显示过于密集,这时候可以用点聚合改善。
import { Cluster, MapView, Marker } from "react-native-amap3d";
const markers = Array(1000)
.fill(0)
.map((_, i) => ({
position: { latitude: 39.5 + Math.random(), longitude: 116 + Math.random() },
properties: { key: `Marker${i}` },
}));
<MapView
ref={(ref) => (this.mapView = ref)}
onLoad={() => this.mapView?.moveCamera({ zoom: 8 }, 100)}
onCameraIdle={({ nativeEvent }) => {
this.status = nativeEvent;
this.cluster?.update(nativeEvent);
}}
>
<Cluster
ref={(ref) => (this.cluster = ref)}
points={markers}
renderMarker={(item) => (
<Marker
key={item.properties.key}
icon={require("../images/flag.png")}
position={item.position}
/>
)}
/>
</MapView>;
更多示例
参考 example。
Android
npm run android
iOS
cd ios && pod install && cd ..
npm run ios
常见问题
- 尽量使用真实设备进行测试,在模拟器可能存在一些问题(常见的是 Android 模拟器因为缺少 GPU 加速而导致闪退)。
- onLocation 没有返回定位数据通常是因为 key 不正确,或没有申请 PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION 权限
0.0.35
8 months ago
0.0.34
9 months ago
0.0.20
11 months ago
0.0.21
11 months ago
0.0.22
11 months ago
0.0.23
11 months ago
0.0.24
11 months ago
0.0.25
10 months ago
0.0.17
11 months ago
0.0.19
11 months ago
0.0.30
10 months ago
0.0.31
10 months ago
0.0.32
10 months ago
0.0.33
10 months ago
0.0.26
10 months ago
0.0.27
10 months ago
0.0.28
10 months ago
0.0.29
10 months ago
0.0.16
11 months ago
0.0.12
11 months ago
0.0.13
11 months ago
0.0.14
11 months ago
0.0.15
11 months ago
0.0.11
1 year ago
0.0.10
1 year ago
0.0.9
1 year ago
0.0.8
2 years ago
0.0.7
2 years ago
0.0.6
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago
0.0.3
2 years ago
0.0.2
2 years ago
0.0.1
2 years ago