Question

我正在尝试使用react-native-maps模块创建应用程序。我可以通过navigator.geolocation.watchPosition获取设备位置，我也使用showUserLocation属性中内置的地图。如何在加载时将地图转到用户位置。没有看到整个世界，也没有看到硬编码的初始位置。

编辑：这是我的react-native-map元素。该区域设置为硬编码的首字母位置，我想将其更改为始终在用户位置加载。

    <View style={styles.container}>
                    <MapView
                    style={styles.map}
                    region={this.state.initialPosition}
                    showsMyLocationButton={true}
                    loadingEnabled={true}
                    onRegionChange={(region)=> this.setState({ initialPosition:region })}
                    onLongPress={this.mapOnPress}
                    showsUserLocation={true}
                    >

我在应用中使用的位置来自此处，但它的加载时间非常晚，通常超过20秒，所以我想跳过这个20秒并立即加载到用户位置。

this.watchID= navigator.geolocation.watchPosition((position)=>{
    var lastRegion ={
                latitude: lat,
                longitude: lon,
                longitudeDelta: LON_D,
                latitudeDelta: LAT_D
            }
    this.setState({initialPosition:lastRegion})},(error)=>alert(error),{enableHighAccuracy:true,timeout:20,maximumAge:10})

这有什么解决方案吗？谢谢你的帮助：）

Answer 1

你可以试试这个，超时单位是ms.Tested in RN：44，

class Map extends Component {

constructor(props) {
    super(props);
    this.state = {
        permissionState: false,
        latitude: null,
        longitude: null,
        error: null,
    };
}

componentDidMount() {
    Platform.OS === 'android' && Platform.Version >= 23 ? this.requestMapPermission() : this.requestMap()
}

async requestMapPermission() {
    try {
        const granted = await PermissionsAndroid.request(
            PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION)
        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
            console.log('Granted');
            this.watchId = navigator.geolocation.getCurrentPosition(
                (position) => {
                    console.log('Position is watched');
                    this.setState({
                        permissionState: true,
                        latitude: position.coords.latitude,
                        longitude: position.coords.longitude,
                        error: null,
                    });
                },
                (error) => this.setState({error: error.message}),
                {enableHighAccuracy: false, timeout: 20000, maximumAge: 1000},
            );

        } else {
            console.log('not Granted');
            this.setState({
                permissionState: false,
            });
        }
    } catch (err) {
        console.warn(err)
    }
}

requestMap() {
    this.watchId = navigator.geolocation.watchPosition(
        (position) => {
            this.setState({
                permissionState: true,
                latitude: position.coords.latitude,
                longitude: position.coords.longitude,
                error: null,
            });
        },
        (error) => this.setState({error: error.message, permissionState: false,}),
        {enableHighAccuracy: false, timeout: 20000, maximumAge: 1000},
    );
}


componentWillUnmount() {
    navigator.geolocation.clearWatch(this.watchID);
}

render() {
    var {height, width} = Dimensions.get('window');
    return (
        <View style={{height: 150, justifyContent: 'center'}}>
            {
                this.state.permissionState === true ?
                    <MapView
                        minZoomLevel={16}
                        style={{height: 150, marginBottom: 5, marginTop: 5}}
                        region={{
                            latitude: this.state.latitude,
                            longitude: this.state.longitude,
                            latitudeDelta: 0.0922,
                            longitudeDelta: 0.0421
                        }}>
                        <MapView.Marker
                            coordinate={{
                                latitude: (this.state.latitude + 0.00000),
                                longitude: (this.state.longitude + 0.00000),
                            }}>
                            <View>
                                <Icon name="place" size={40} color="#038FC0"/>
                            </View>
                        </MapView.Marker>
                    </MapView> :
                    <View style={{
                        borderWidth: 1,
                        borderColor: '#6f6f6f',
                        height: 150,
                        justifyContent: 'center',
                        alignItems: 'center',
                    }}>
                        <Text>No Permission for location</Text>

                    </View>


            }

        </View>
    );
}
}

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

export default Map;

React Native Maps加载位置

1 个答案: