react-native经纬度解决方案2019-03-26

作者: 超级小学生1 | 来源:发表于2019-03-26 12:55 被阅读27次

    问题描述

    项目中,app设备要用到设备位置信息,然后保存当前用户的经纬度记录。但是搜索了一翻发现没有太好的解决方案。react-native自带了Geolocation但是一直超时,查询不到经纬度。因此我想着换一个办法来解决。于是我想到了,通过ip来获取经纬度的方式。同时我把经纬度的查询封装在了server端,也就避免了ios和Android再去写两套获取方式。(我记得获取天气数据我也是用的相同的套路)

    方式1直接通过RN调用---未成功

       /** 获取地理位置(经纬度) */
        getPosition = (): void => {
        /** 获取地理位置 */
        navigator.geolocation.getCurrentPosition(
            (position: any) => {
                // console.warn('成功:' + JSON.stringify(position));
                const positionData: any = position.coords;
                alert(positionData);
                  // 经度:positionData.longitude
                  // 纬度:positionData.latitude
    
                // 最后一步 todo:高德 || 百度地图逆地理编码转~~具体就是调个接口把经纬度丢进去就行了
    
            },
            (error: any) => {
                console.warn('失败:' + JSON.stringify(error.message))
            }, {
                // 提高精确度,但是获取的速度会慢一点
                enableHighAccuracy: true,
                // 设置获取超时的时间20秒
                timeout: 20000,
                // 示应用程序的缓存时间,每次请求都是立即去获取一个全新的对象内容
                maximumAge: 1000
            }
        );
    }
    

    报错:{
    "TIMEOUT": 3,
    "POSITION_UNAVAILABLE": 2,
    "PERMISSION_DENIED": 1,
    "message": "Location request timed out",
    "code": 3
    }


    image.png

    我也没做太多深入调研,因为搜了没有什么有用的解决方案。

    方式2封装在Server端

    我的server端采用java来实现,但是大致思路都是一致的。
    1.得到client端IP地址。
    2.根据ip地址解析出经纬度。
    这里根据ip解析出经纬度,我调研了两个网站都可用。
    https://www.ipip.net/ip.html(post方式调用,数据更精确)本文采用这种。
    http://www.gpsspg.com/ip/?q=43.224.46.105(get方式调用,数据不太准),因为我
    自己的ip给解析成日本的了(实际上是北京的地址),导致我拿不到经纬度。
    主要是通过模拟请求,然后抓取html指定节点的数据。本文中我采用了正则,是很快有效的手段。

    1.得到client端IP地址

    通过 HttpServletRequest request对象。request怎么获取这里不过多阐述,网上一抓一大把。

     /**
     * 得到请求ip地址
     * @param request
     * @return
     */
    private String getIP(HttpServletRequest request){
            String ip=request.getHeader("x-forwarded-for");
            if(ip==null || ip.length()==0 || "unknown".equalsIgnoreCase(ip)){
                ip=request.getHeader("Proxy-Client-IP");
            }
            if(ip==null || ip.length()==0 || "unknown".equalsIgnoreCase(ip)){
            ip=request.getHeader("WL-Proxy-Client-IP");
        }
        if(ip==null || ip.length()==0 || "unknown".equalsIgnoreCase(ip)){
            ip=request.getHeader("X-Real-IP");
        }
        if(ip==null || ip.length()==0 || "unknown".equalsIgnoreCase(ip)){
            ip=request.getRemoteAddr();
        }
        log.info("IP=========="+ip );
        return ip;
    }
    

    2.根据ip地址解析出经纬度(重点)

    import org.apache.commons.logging.Log;
    import org.apache.commons.logging.LogFactory;
    import java.io.BufferedReader;
    import java.io.InputStreamReader;
    import java.io.PrintWriter;
    import java.net.URL;
    import java.net.URLConnection;
    import java.util.regex.Matcher;
    import java.util.regex.Pattern;
    
    /**
     * 根据IP查询经纬度
     * @author LinJingan
     */
    public class GetPositionUtil {
    private static final Log log = LogFactory.getLog(GetPositionUtil.class);
    
    private static String  url = "https://www.ipip.net/ip.html";
    //private static String  url  = "http://www.gpsspg.com/ip/?q=43.224.46.105"
    public static String getPosition(String ip){
        String requestUrl = url;
        String response = get(requestUrl,ip);
        //经纬度的正则表达式
        String pattern = "(\\d{1,2}\\.\\d{1,6}|1[0-7]?\\d{1}\\.\\d{1,6}),(0?\\d{1,2}\\.\\d{1,6}|1[0-7]?\\d{1}\\.\\d{1,6})";
        // 创建 Pattern 对象
        Pattern r = Pattern.compile(pattern);
        // 现在创建 matcher 对象
        Matcher m = r.matcher(response);
        log.info("response==="+response);
        if (m.find( )) {
            if(m.group()!=null){
                log.info("m.group==="+m.group(0));
                return  m.group(0);
            }else{
                return null;
            }
    
        }
        return null;
    }
    
    /**
     * 向指定URL发送GET方法的请求
     *
     */
    private static String get(String url,String ip) {
        BufferedReader in = null;
        try {
            URL realUrl = new URL(new String( url.getBytes("utf-8") , "utf-8"));
            // 打开和URL之间的连接
            URLConnection connection = realUrl.openConnection();
            // 设置通用的请求属性
            connection.setRequestProperty("accept", "*/*");
            connection.setRequestProperty("connection", "Keep-Alive");
            connection.setRequestProperty("user-agent", "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1;SV1)");
            connection.setConnectTimeout(5000);
            connection.setReadTimeout(5000);
            // 发送POST请求必须设置如下两行
            connection.setDoOutput(true);
            connection.setDoInput(true);
            PrintWriter printWriter = new PrintWriter(connection.getOutputStream());
    
            // 发送请求参数
            printWriter.write("ip="+ip);//post的参数 xx=xx&yy=yy
            // flush输出流的缓冲
            printWriter.flush();
            // 建立实际的连接
            connection.connect();
            // 定义 BufferedReader输入流来读取URL的响应
            in = new BufferedReader(new InputStreamReader(connection.getInputStream()));
            StringBuffer sb = new StringBuffer();
            String line;
            while ((line = in.readLine()) != null) {
                sb.append(line);
            }
            return sb.toString().replaceAll(" ","");
        } catch (Exception e) {
            e.printStackTrace();
        }
        // 使用finally块来关闭输入流
        finally {
            try {
                if (in != null) {
                    in.close();
                }
            } catch (Exception e2) {
                e2.printStackTrace();
            }
        }
        return null;
    }
    public static void main(String [] args){
        String response = getPosition("43.224.46.105");
        System.out.print(response);
      }
    
    }
    

    测试结果:
    39.904989,116.405285


    image.png

    总结:其实很简单的思路,可以通过封装成api的方式来调用,解决了ios和android双端各自去前端获取解析。我的QQ337241905,有相关问题可以联系我。

    相关文章

      网友评论

        本文标题:react-native经纬度解决方案2019-03-26

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