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需要添加权限

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 (
            
                
                     Geolocation.start()}
                        title="开始定位"
                    />
                     Geolocation.stop()}
                        title="停止定位"
                    />
                
                {Object.keys(location).map(key => (
                    
                        {key}
                        {location[key]}
                    
                ))}
            
        )
    }


    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