使地图视图适合标记，使带有“挂钩”，“功能”的原始地图反应

问题描述

所以我有mapview：

myView.style(R.style.MyStyle)

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

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)

此视图正在从查询中呈现标记（带有餐厅或其他对象的视图） 我想适合mapview以查看所有可能的标记。

使用挂钩是否可行？ （几乎所有互联网解决方案都使用： { "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}

将所有标记Lat，Lng添加到数组，然后：

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

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

但是什么也没发生，我认为错误是在First Initial render上那些方法没有看到ref映射。 因为当我使用按钮调用方法时，它工作正常。

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

在带有钩子的函数中是否可行，还是需要将整个函数重新分配给类组件？

对不起，我的语言错误。

解决方法

followUserLocation会自动缩放到用户位置（太快了），以至于fitToElements和其他功能都不起作用（它们起作用但会立即缩放）。 所以我设置了超时时间。