[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

轉載請著名出處！謝謝~~