美文网首页
react-native 获取经纬度工具类 通过高德SDK

react-native 获取经纬度工具类 通过高德SDK

作者: 日不落000 | 来源:发表于2017-10-10 13:56 被阅读484次

安装依赖:

package.json:

  "dependencies": {
    "react-native-smart-amap-location": "git+https://github.com/ribuluo000/react-native-smart-amap-location.git"
  },

re.

https://github.com/ribuluo000/react-native-smart-amap-location


工具类:

AMapLocationUtil.js

/**
 * Created by nick on 2017/6/27.
 */
import React from "react";
import { Alert, NativeAppEventEmitter } from "react-native";

import AMapLocation from "react-native-smart-amap-location";

/**
 *  how to use:
 * this.amapLocationUtil = new AMapLocationUtil({_onRequestLocationOk:()=>{alert(22)}});
 this.amapLocationUtil._showLocation();
 */
export default class AMapLocationUtil {


    // 构造
    constructor(props) {
        this.props = props;
    }

    static propTypes = {
        _onRequestLocationOk: React.PropTypes.func,
    };

    static defaultProps = {
        _onRequestLocationOk: () => {
        },
    };

    componentDidMount() {
        let amapOptions = null;
        amapOptions = {
            onceLocation: true,
        };

        AMapLocation.init(amapOptions); //使用默认定位配置
        this.listenerAMap = NativeAppEventEmitter.addListener('amap.location.onLocationResult',
            (result) => this._onLocationResult(result)
        );
    }

    componentWillUnmount() {
        //停止并销毁定位服务
        AMapLocation.cleanUp();
        this.listenerAMap && this.listenerAMap.remove();
    }

    _onLocationResult(result) {
        this.componentWillUnmount();
        console.log(result);
        if (result.error) {
            Alert.alert(`错误代码: ${result.error.code}, 错误信息: ${result.error.localizedDescription}`);
            TmpDataUtil.curLatitude = 0;
            TmpDataUtil.curLongitude = 0;
        }
        else {
            if (result.formattedAddress) {
                // Alert.alert(`格式化地址 = ${result.formattedAddress}`);
            }
            else {
                // Alert.alert(`纬度 = ${result.coordinate.latitude}, 经度 = ${result.coordinate.longitude}`);
            }

            TmpDataUtil.curLatitude = result.coordinate.latitude;
            TmpDataUtil.curLongitude = result.coordinate.longitude;


        }

        if (TmpDataUtil.isRequestLocation) {
            TmpDataUtil.isRequestLocation = false;
            this.props._onRequestLocationOk && this.props._onRequestLocationOk();
        }


    }

    //单次定位并返回逆地理编码信息
    _showReGeocode() {
        AMapLocation.getReGeocode();
    }

    //单次定位并返回地理编码信息
    _showLocation() {
        this.componentWillUnmount();
        this.componentDidMount();

        if (false == TmpDataUtil.isRequestLocation) {
            TmpDataUtil.isRequestLocation = true;
            setTimeout(() => {
                this.componentWillUnmount();
                TmpDataUtil.isRequestLocation = false;
            }, 15000);
            AMapLocation.getLocation();
        }

    }

}

TmpDataUtil.js


var TmpDataUtil = {

    isRequestLocation: false,
    curLatitude: '',
    curLongitude: '',

};

module.exports = TmpDataUtil;

相关文章

网友评论

      本文标题:react-native 获取经纬度工具类 通过高德SDK

      本文链接:https://www.haomeiwen.com/subject/uwrvyxtx.html