要在React Native Maps中保持自定义标记居中,可以使用region
属性来控制地图的显示区域,并使用Camera
组件来设置地图的中心点。
下面是一个示例代码,展示了如何实现这个功能:
import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';
import MapView, { Marker, Camera } from 'react-native-maps';
const App = () => {
const [mapRegion, setMapRegion] = useState({
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
});
const markerCoordinate = {
latitude: 37.78825,
longitude: -122.4324,
};
return (
{/* 添加自定义标记的内容 */}
{/* 在标记中心添加自定义内容 */}
{/* 通过Camera组件设置地图中心点 */}
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
map: {
flex: 1,
},
customMarker: {
width: 50,
height: 50,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'red',
},
markerContent: {
width: 10,
height: 10,
borderRadius: 5,
backgroundColor: 'white',
},
});
export default App;
在这个示例中,我们首先使用useState
hook来设置地图的初始显示区域。然后,我们定义了一个markerCoordinate
对象,表示自定义标记的坐标。
在MapView
组件中,我们使用region
属性将地图的显示区域设置为mapRegion
。然后,我们在Marker
组件中添加自定义标记的内容,这里使用了一个红色的圆形视图作为标记的背景,并在中心位置添加了一个白色小圆点。
最后,我们使用Camera
组件将地图的中心点设置为markerCoordinate
,并设置了一个适当的缩放级别。
你可以根据需要修改自定义标记的样式和地图的显示区域,以满足你的需求。