android–React Native Maps加载位置

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

我正在尝试使用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})

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

解决方法:

你可以试试这个,超时单位是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;

总结

以上是内存溢出为你收集整理的android – React Native Maps加载位置全部内容，希望文章能够帮你解决android – React Native Maps加载位置所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。