使地图视图适合标记使用Hooks、Function对本地地图进行反应

Question

所以我有地图视图：

import * as React from 'react';
import {
StyleSheet,
View,
Text,
ScrollView,
Animated,
Dimensions,
Image,
} from "react-native";
import MapView, {Callout, Marker, PROVIDER_GOOGLE} from "react-native-maps";
import * as Location from 'expo-location';
QueryResult from '../../assets/Data.json'; //JSON FILE in desc
import {AppLoading} from "expo";
const styles = StyleSheet.create({
page: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF"
},
container: {
flex:1,
backgroundColor: "tomato"
},
map: {
flex: 1
},
bubble:{
backgroundColor: Colors.WHITE1,
borderRadius: 20,
flexDirection: "column",
},
name:{
},
icon:{
width: 30,
height:30,
},
});
const { width, height } = Dimensions.get("window");
function GoogleMapItem() {
const initialRegion = {
latitude: 53.3661,
longitude: 14.5943,
}
const navigation = useNavigation();
const [location, setLocation] = React.useState(initialRegion);
const [errorMsg, setErrorMsg] = React.useState(null);
const mapRef = React.useRef()
const [QueryResult, SetQueryResult] = React.useState(null);
let iz ={
latDelta: 0.015,
longDelta: 0.08,
}
let ZOOMS = {
_latitudeDeltaZOOM_OUT1 : iz.latDelta,
_longitudeDeltaZOOM_OUT1: iz.longDelta,
_latitudeDeltaZOOM_INITIAL : iz.latDelta*0.2,
_longitudeDeltaZOOM_INITIAL: iz.longDelta*0.2,
_latitudeDeltaZOOM_IN1 :  iz.latDelta*0.1,
_longitudeDeltaZOOM_IN1:  iz.longDelta*0.1,
}
React.useEffect(() => {
(async () => {
let { status } = await Location.requestPermissionsAsync();
if (status !== 'granted') {
setErrorMsg('Permission to access location was denied');
}
let location = await Location.getCurrentPositionAsync({});
const {longitude, latitude} = location.coords
setLocation({
...location,
longitude: longitude,
latitude: latitude,
})
})();
}, []);
return(
<View style={styles.map}>
<MapView style={styles.map}
provider={PROVIDER_GOOGLE}
loadingEnabled={true}
region={{
latitude: location.latitude,
longitude: location.longitude,
latitudeDelta:  ZOOMS._latitudeDeltaZOOM_OUT1,
longitudeDelta: ZOOMS._latitudeDeltaZOOM_OUT1,
}}
showsUserLocation
followsUserLocation
userLocationUpdateInterval
ref={mapRef}
>
{QueryResult.results.map((element,index)=>
<Marker key={index} identifier={element.place_id} coordinate={{
latitude: element.geometry.location.lat,
longitude: element.geometry.location.lng,
}}
>
<View>
<Image source={{uri: element.icon}} style={{width:25,height:25,}}></Image>
</View>
</Marker>
)}
</MapView>
</View>
)
}


export default React.memo(GoogleMapItem)

并缩短为两个条目json文件：

{
"results" : [
{
"business_status" : "OPERATIONAL",
"geometry" : {
"location" : {
"lat" : 53.368006,
"lng" : 14.6198066
},
},
"icon" : "https://maps.gstatic.com/mapfiles/place_api/icons/v1/png_71/generic_recreational-71.png",
"name" : "Park Leśny Zdroje",
"place_id" : "ChIJ7adAEfunAEcRUlmcp_1ReY8",
},
{
"business_status" : "OPERATIONAL",
"geometry" : {
"location" : {
"lat" : 53.3789812,
"lng" : 14.6186994
},
},
"icon" : "https://maps.gstatic.com/mapfiles/place_api/icons/v1/png_71/generic_business-71.png",
"name" : "Usługi Ogrodnicze Szczecin Miłorząb M.",
"place_id" : "ChIJxwSQa_SnAEcRsgtHuw_eeuE",
},
],
"status" : "OK"
}

此视图正在渲染查询中的标记(带有餐厅或其他对象的视图(我想调整地图视图以查看所有可能的标记。

用钩子可以这样做吗？(几乎所有关于互联网的解决方案都使用：{mapRef=> this.mapRef= mapRef}，所以它需要类组件。

尝试过不同的东西，比如：

OnMapReady or onLayout={ mapRef.current.fitToSuppliedMarkers(markerArray)}
OnMapReady or onLayout={ mapRef.current.fitToElements(true)}

将所有标记Lat、Lng添加到阵列中，然后：

OnMapReady or onLayout={ mapRef.current.fitToCoordinates(markerArrayLatLng}

在useEffect中也尝试过使用这些方法，但根本看不到mapRef(mapRef未定义(。

但什么都没发生，我认为错误是在第一次初始渲染时，这些方法看不到ref到map。因为当我使用按钮调用方法时，它工作得很好。

<Button title={"test"} onPress={mapRef.current.fitToElements(true)}/>

这在带钩子的函数中可能吗？或者我需要将整个函数重新设置为类组件

抱歉我的语言有错误。

Answer 1

followUserLocation正在自动缩放到用户位置(如此之快(，以至于fitToElements和其他元素无法工作(它们可以工作，但会立即缩放(。所以我在下面设置了超时。