反应本地地图onPress标记掉落问题

问题描述

我一直试图在触摸地图时在地图上放一个大头针，但我不断出错： 更新由airmap空纬度管理的视图的属性“区域”时发生错误

我已经创建了常量markerPress并将其添加到MapView onPress中，然后更新了MapView.Marker

我试图将标记useState从null更改为空对象，但没有任何运气。请帮忙。

import React,{useState,useEffect} from 'react';
import {StyleSheet} from 'react-native';
import MapView,{ PROVIDER_GOOGLE } from 'react-native-maps';
import * as Location from "expo-location";




function HomeScreen({navigation}) {
    const [location,setLocation] = useState(null);
    const [mapRegion,setMapRegion] = useState(null);
    const [errorMsg,setErrorMsg] = useState(null);
    const [marker,setMarker] = useState(null)

    const markerPress = (event) => {
        setMarker({ marker: event.nativeEvent.coordinate })
    }






    useEffect(() => {
        (async () => {
            let { status } = await Location.requestPermissionsAsync();
            if (status !== "granted") {
                setErrorMsg("Permission to access location was denied");
            }

            let coordinates = await Location.getCurrentPositionAsync({});
            setLocation(location);

            setMapRegion({
                longitude: coordinates.coords.longitude,latitude: coordinates.coords.latitude,longitudeDelta: 0.0922,latitudeDelta: 0.0421
            });
        })();
    },[]);


    return  (
        <MapView
            provider={PROVIDER_GOOGLE}
            onPress={markerPress}
            style={{flex:1}}
            customMapStyle = { generatedMapStyle }
            showsUserLocation={true}
            followsUserLocation={true}
            showsMyLocationButton={true}
            initialRegion={mapRegion}>
            {
                marker &&
                <MapView.Marker coordinate={marker} />

            }
        </MapView>
    )
}

const styles = StyleSheet.create({
    map: {
        ...StyleSheet.absoluteFillObject
    }
})

解决方法

您应将您的setMarker呼叫更改为：

setMarker(event.nativeEvent.coordinate);

event.nativeEvent.coordinate已经是coordinate道具的有效值。

---

因此要传递给coordinate的正确对象看起来像这样：

{
  latitude: ...,longitude: ...
}

您通过了此操作

{
  marker: {
    latitude: ...,longitude: ...
  }  
}