react native高德地图使用

在高德地图的官网控制台上创建新的key

本例子选择的android平台
在terminal输入命令

获取发布版安全码SHA1：

keytool -v -list -keystore D:\Project\DemoReactNative\MyGit\ExpressRNative\android\app\key\MyExpress

获取结果

证书指纹:
MD5:  B1:C1:24:2B:A1:93:1D:6E:A6:0D:09:42:ED:05:4D:72
SHA1: BB:AE:E4:8A:F3:5C:81:A5:F5:CA:A1:F4:F2:02:98:B9:41:72:12:C2
SHA256: C5:B6:20:4F:5D:B0:5C:67:39:9B:83:14:42:54:28:5B:D8:E1:36:A2:58:43:9D:73:F4:6B:6B:D7:98:7A:83:A9

调试版安全码SHA1

keytool -list -v -keystore C:\Users\Administrator\.android\debug.keystore

获取结果

MD5:  6D:BD:8D:E3:6C:5B:DE:94:33:A5:7E:F3:8E:8B:1E:75
SHA1: 17:17:AC:19:62:CD:7C:88:32:68:3C:D5:6E:BC:FA:5A:BF:9F:C6:40
SHA256: 01:0D:2A:DA:86:0F:98:0A:1A:A7:F6:3A:AC:09:27:1F:49:0D:F0:C8:89:DC:63:38:E4:D6:A5:A9:4F:A5:1B:07

使用第三方插件

npm install react-native-amap-geolocation
react-native link react-native-amap-geolocation

android平台会自动配置
注意AndroidManifest.xml需要添加权限

    <!-- Normal Permissions 不需要运行时注册 -->
    <!--获取运营商信息，用于支持提供运营商信息相关的接口-->
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
    <!--用于访问wifi网络信息，wifi信息会用于进行网络定位-->
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
    <!--这个权限用于获取wifi的获取权限，wifi信息会用来进行网络定位-->
    <uses-permission android:name="android.permission.CHANGE_WIFI_STATE"/>
    <uses-permission android:name="android.permission.CHANGE_CONFIGURATION"/>

    <!-- 请求网络 -->
    <uses-permission android:name="android.permission.INTERNET"/>

    <!-- 不是SDK需要的权限，是示例中的后台唤醒定位需要的权限 -->
    <!--<uses-permission android:name="android.permission.WAKE_LOCK" />-->

    <!-- 需要运行时注册的权限 -->
    <!--用于进行网络定位-->
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
    <!--用于访问GPS定位-->
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
    <!--用于提高GPS定位速度-->
    <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS"/>
    <!--写入扩展存储，向扩展卡写入数据，用于写入缓存定位数据-->
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <!--读取缓存数据-->
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

    <!--用于读取手机当前的状态-->
    <uses-permission android:name="android.permission.READ_PHONE_STATE"/>

    <!-- 更改设置 -->
    <uses-permission android:name="android.permission.WRITE_SETTINGS"/>

11.png

父组件的使用

  componentWillMount() {
        Geolocation.init({
            //TODO ios的要改
            // ios: "9bd6c82e77583020a73ef1af59d0c759",
            android: "c4031dcbefac117fb5e4948bfd093439"
        })
    }

    async componentDidMount() {
        Geolocation.setOptions({
            interval: 10000,
            distanceFilter: 10,
            reGeocode: true
        })
        Geolocation.addLocationListener(location =>
            this.updateLocationState(location)
        )
    }

    componentWillUnmount() {
        Geolocation.stop()
    }

    render() {
        const {location} = this.state
        return (
            <View style={style.body}>
                <View style={style.controls}>
                    <Button
                        style={style.button}
                        onPress={() => Geolocation.start()}
                        title="开始定位"
                    />
                    <Button
                        style={style.button}
                        onPress={() => Geolocation.stop()}
                        title="停止定位"
                    />
                </View>
                {Object.keys(location).map(key => (
                    <View style={style.item} key={key}>
                        <Text style={style.label}>{key}</Text>
                        <Text>{location[key]}</Text>
                    </View>
                ))}
            </View>
        )
    }


    updateLocationState(location) {
        if (location) {
            location.timestamp = new Date(location.timestamp).toLocaleString();
            this.setState({location});
            console.log(location)
        }
    }

    startLocation = () => {
        Geolocation.start();
    };
    stopLocation = () => {
        Geolocation.stop();
    };
    getLastLocation = async () =>{
        this.updateLocationState(await Geolocation.getLastLocation())
    };

22.png