onUserLocation更改更改React Native Maps区域

Question

我正在使用来自'react-native-maps'的MapView。

我无法显示"showMyLocationButton"，所以我正在实现自己的。

我想在不使用 React Native 的地理位置的情况下执行此操作，因为我发现它比 react-native-maps prop showUserLocation 慢。我使用返回坐标的 onUserLocationChange 事件。但是，当触发onUserLocationChange事件并设置包含userLocation的状态时，它会自动更新区域，而无需我明确要求它。

这是我的代码：

display_my_location(coordinate){
alert("region changed")
this.setState({
region: {
latitude: coordinate.latitude,
longitude: coordinate.longitude,
latitudeDelta: 0.004,
longitudeDelta: 0.004
},
});
}
setUserLocation(coordinate){
//alert("User location changed MAP SHOULDNT MOVE")
this.setState({
userLocation: {
latitude: coordinate.latitude,
longitude: coordinate.longitude,
latitudeDelta: 0.004,
longitudeDelta: 0.004
}
})
}
<MapView
style={styles.map}
showsMyLocationButton={true}
onUserLocationChange={locationChangedResult => this.setUserLocation(locationChangedResult.nativeEvent.coordinate)}
initialRegion={this.state.region_amon}
showsUserLocation={true}
region={this.state.region}
mapType={this.state.map_style}
showsCompass = {true}
showsMyLocationButton={true}
chacheEnabled={false}
zoomEnabled={true}

Answer 1

我相信您可以通过从MapView中完全删除region道具来解决此问题。如果需要以编程方式更改地图的边界框，则可以将引用附加到地图，并使用此处的相应 MapView 方法在componentDidUpdate中更新：

https://github.com/react-community/react-native-maps/blob/master/docs/mapview.md#methods

Answer 2

我有上述问题的解决方法，我们可以在地图上有一个自定义图标。单击自定义图标后触发方法。在该方法中，使用地理位置获取当前位置坐标，并火种动画到区域并传递坐标。

第 1 步：声明 mapRef

const mapRef = useRef(null);

第 2 步：将 mapRef 连接到 MapView

<View style={{flex: 1}>
<MapView
ref={mapRef}
...........
/>
<TouchableOpacity
onPress={currentLocationHandler}>
<MaterialIcons
name="my-location"
size={24}
color="black"
/>
</TouchableOpacity>
</View>

第 3 步：当前位置处理程序方法

const currentLocationHandler = () => {
<!-- Get location coordinates using GeoLocation npm package -->
let currentRegion = {
latitude: latitude from geolocation,
longitude: longitude from geolocation,
latitudeDelta: 0.001,
longitudeDelta: 0.001,
};
mapRef.current.animateToRegion(currentRegion, 3 * 1000);
}

希望以上步骤能帮助您解决问题