google api Geolocation定位（还未完成，等待）

• Geolocation

1.ios

你需要在 Info.plist 中增加NSLocationWhenInUseUsageDescription字段来启用定位功能。如果你是用react-native init命令来创建项目，则定位会被默认启用。

2.android

要请求访问地理位置的权限，你需要在AndroidManifest.xml文件中加入如下一行：

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

• google api:https://developers.google.com/maps/documentation/geocoding/start

https://developers.google.com/maps/documentation/directions/get-api-key

• 在上面那个链接上申请一个api key

点击GET STARTED之后，按照要求选择

http://www.yilingsj.com/xwzj/2018-07-22/google-maps-key.html

• 百度api获取

1.http://lbsyun.baidu.com/apiconsole/key输入信息后，邮箱点击提供的验证链接

申请完成后，点击“创建应用”，“应用名称”随便填写一个，“应用类型”根据你的需求选择，在“Referer白名单”框内填写*（图3），点击“提交”完成设置。

2.ios配置方式见链接：http://lbsyun.baidu.com/index.php?title=iossdk/guide/create-project/ak

获取 Bundle Identifier，Xcode打开项目， 切换到 General 标签，查看 Bundle Identifier，如下图所示：

点击提交创建成功

3.android配置方式见链接：http://lbsyun.baidu.com/index.php?title=androidsdk/guide/create-project/ak

获取包名：

在app目录下的build.gradle文件中找到applicationId，并确保其值与AndroidManifest.xml中定义的package相同

获取SHA1
调试版本（debug）和发布版本（release）下的 SHA1 值是不同的，发布 apk 时需要根据发布 apk 对应的 keystore 重新配置 Key。(注意：我们这里使用的是调试版本,在开发时请使用调试版本) 。

按照链接完成

完成后点击“查看应用”，就可以看到刚才设置的应用对应的AK，复制，填写在下载器内即可下载。

"http://api.map.baidu.com/geocoder?output=json&location=30.9399368185,%20121.7724702817&key=你的Api Key"




完整点就是下方这种
fetch("http://api.map.baidu.com/geocoder?output=json&location=30.9399368185,%20121.7724702817&key=你的Api Key")
                    .then((response) => {
                        if (response.ok) {
                            const ret =  JSON.parse(response._bodyInit);
                            alert(ret.result.addressComponent.city);
                            return response.json();
                        }
                    })

• geolocation获取当前经纬度（发现经纬度不准确呀）

学习地址：https://reactnative.cn/docs/geolocation/

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View
} from 'react-native';
//无需导入
// As a browser polyfill, this API is available through the navigator.geolocation global - you do not need to import it.
class position extends Component {
    constructor(props) {
        super(props)
        this.state = {
            initialPosition: 'Unknow',
            lastPosition: 'Unknow',
        }
    }
    componentDidMount() {
        navigator.geolocation.getCurrentPosition(
            (position) => {
                var initialPosition = JSON.stringify(position.coords);
                // 经度：positionData.longitude
                const longitude = position.coords.longitude
                // 纬度：positionData.latitude
                const latitude = position.coords.latitude
                this.setState({ initialPosition });
            },
            (error) => alert(error.message),
            { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
        );
        this.watchID = navigator.geolocation.watchPosition((position) => {
            var lastPosition = JSON.stringify(position.coords);
            this.setState({ lastPosition });
        });
    }
    componentWillUnmount() {
        navigator.geolocation.clearWatch(this.watchID);
    }
    //渲染
    render() {
        return (
            <View>
                <Text>
                    <Text style={styles.title}>Initial position: </Text>
                    {this.state.initialPosition}
                </Text>
                <Text>
                    <Text style={styles.title}>Current position: </Text>
                    {this.state.lastPosition}
                </Text>
            </View>
        );
    }
}
export default position
const styles = StyleSheet.create({
    title: {
        fontWeight: '500',
    },
});

• 最后的代码

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View
} from 'react-native';
//无需导入
// As a browser polyfill, this API is available through the navigator.geolocation global - you do not need to import it.
class position extends Component {
    constructor(props) {
        super(props)
        this.state = {
            initialPosition: 'Unknow',
            lastPosition: 'Unknow',
        }
    }
    componentDidMount() {
        navigator.geolocation.getCurrentPosition(
            (position) => {
                var initialPosition = JSON.stringify(position.coords);
                // 经度：positionData.longitude
                const longitude = position.coords.longitude
                // 纬度：positionData.latitude
                const latitude = position.coords.latitude
                // fetch("http://maps.googleapis.com/maps/api/geocode/json?latlng=" + latitude + ","+ longitude + "&sensor=true")
                fetch("https://maps.googleapis.com/maps/api/geocode/json?latlng=40.714224,-73.961452&key=YOUR_API_KEY")
                .then((response)=>{
                    if(response.ok){
                        alert(JSON.stringify(response))
                        return response.json();
                    }
                })
                this.setState({ initialPosition });
            },
            (error) => alert(error.message),
            { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
        );
        this.watchID = navigator.geolocation.watchPosition((position) => {
            var lastPosition = JSON.stringify(position.coords);
            this.setState({ lastPosition });
        });
    }
    componentWillUnmount() {
        navigator.geolocation.clearWatch(this.watchID);
    }
    //渲染
    render() {
        return (
            <View>
                <Text>
                    <Text style={styles.title}>Initial position: </Text>
                    {this.state.initialPosition}
                </Text>
                <Text>
                    <Text style={styles.title}>Current position: </Text>
                    {this.state.lastPosition}
                </Text>
            </View>
        );
    }
}
export default position
const styles = StyleSheet.create({
    title: {
      fontWeight: '500',
    },
  });