[RN] React Native 获取地理位置

Z时代
2024-01-10
分类：综合

react

React Native 获取地理位置

实现原理：

1、用 navigator.geolocation.getCurrentPosition 获取到坐标信息

2、调用高德地图接口，解析位置数据

本文所用RN 版本为 0.57.8

实现代码如下：

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
export default class TestGeo extends Component {
    state = {
        longitude: '',//经度
        latitude: '',//纬度
        city: '',
        district: '',
        street: '',
        position: '',//位置名称
    };
    componentWillMount = () => {
        this.getPositions();
    };
    getPositions = () => {
        return new Promise(() => {
            /** 获取当前位置信息 */
            navigator.geolocation.getCurrentPosition(
                location => {
                    this.setState({
                        longitude: location.coords.longitude,//经度
                        latitude: location.coords.latitude,//纬度
                    });
                    //通过调用高德地图逆地理接口，传入经纬度获取位置信息
                    fetch(`http://restapi.amap.com/v3/geocode/regeo?key=97c933e33025b3843b40016900074704&location=${this.state.longitude},${this.state.latitude}&radius=1000&extensions=all&batch=false&roadlevel=0`, {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/x-www-form-urlencoded"
                        },
                        body: ``
                    })
                        .then((response) => response.json())
                        .then((jsonData) => {
                            // console.log(jsonData)
                            try {
                                this.setState({
                                    city: jsonData.regeocode.addressComponent.city,
                                    district: jsonData.regeocode.addressComponent.district,
                                    street: jsonData.regeocode.addressComponent.township,
                                    position: jsonData.regeocode.formatted_address,
                                });
                            } catch (e) {
                            }
                        })
                        .catch((error) => {
                            console.error(error);
                        });
                },
                error => {
                    console.error(error);
                }
            );
        })
    }
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.instructions}>经度：{this.state.longitude}</Text>
                <Text style={styles.instructions}>纬度：{this.state.latitude}</Text>
                <Text style={styles.instructions}>城市：{this.state.city}</Text>
                <Text style={styles.instructions}>区域：{this.state.district}</Text>
                <Text style={styles.instructions}>街道：{this.state.street}</Text>
                <Text style={styles.instructions}>详细位置：{this.state.position}</Text>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});