[RN] React Native 获取地理位置

 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,
    },
});

 

附：

高德 接口文档： 

https://lbs.amap.com/api/webservice/summary

 

本博客地址： wukong1688

本文原文地址：https://www.cnblogs.com/wukong1688/p/11062409.html

转载请著名出处！谢谢~~