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