react-native經(jīng)緯度解決方案2019-03-26

問題描述

項目中暇咆,app設備要用到設備位置信息嫁审,然后保存當前用戶的經(jīng)緯度記錄特笋。但是搜索了一翻發(fā)現(xiàn)沒有太好的解決方案则剃。react-native自帶了Geolocation但是一直超時,查詢不到經(jīng)緯度虚循。因此我想著換一個辦法來解決由桌。于是我想到了,通過ip來獲取經(jīng)緯度的方式邮丰。同時我把經(jīng)緯度的查詢封裝在了server端行您,也就避免了ios和Android再去寫兩套獲取方式。(我記得獲取天氣數(shù)據(jù)我也是用的相同的套路)

方式1直接通過RN調(diào)用---未成功

   /** 獲取地理位置(經(jīng)緯度) */
    getPosition = (): void => {
    /** 獲取地理位置 */
    navigator.geolocation.getCurrentPosition(
        (position: any) => {
            // console.warn('成功:' + JSON.stringify(position));
            const positionData: any = position.coords;
            alert(positionData);
              // 經(jīng)度:positionData.longitude
              // 緯度:positionData.latitude

            // 最后一步 todo:高德 || 百度地圖逆地理編碼轉~~具體就是調(diào)個接口把經(jīng)緯度丟進去就行了

        },
        (error: any) => {
            console.warn('失敿袅:' + JSON.stringify(error.message))
        }, {
            // 提高精確度娃循,但是獲取的速度會慢一點
            enableHighAccuracy: true,
            // 設置獲取超時的時間20秒
            timeout: 20000,
            // 示應用程序的緩存時間,每次請求都是立即去獲取一個全新的對象內(nèi)容
            maximumAge: 1000
        }
    );
}

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


image.png

我也沒做太多深入調(diào)研斗蒋,因為搜了沒有什么有用的解決方案捌斧。

方式2封裝在Server端

我的server端采用java來實現(xiàn)笛质,但是大致思路都是一致的。
1.得到client端IP地址捞蚂。
2.根據(jù)ip地址解析出經(jīng)緯度妇押。
這里根據(jù)ip解析出經(jīng)緯度,我調(diào)研了兩個網(wǎng)站都可用姓迅。
https://www.ipip.net/ip.html(post方式調(diào)用敲霍,數(shù)據(jù)更精確)本文采用這種。
http://www.gpsspg.com/ip/?q=43.224.46.105(get方式調(diào)用丁存,數(shù)據(jù)不太準)肩杈,因為我
自己的ip給解析成日本的了(實際上是北京的地址),導致我拿不到經(jīng)緯度解寝。
主要是通過模擬請求扩然,然后抓取html指定節(jié)點的數(shù)據(jù)。本文中我采用了正則聋伦,是很快有效的手段夫偶。

1.得到client端IP地址

通過 HttpServletRequest request對象。request怎么獲取這里不過多闡述觉增,網(wǎng)上一抓一大把兵拢。

 /**
 * 得到請求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.根據(jù)ip地址解析出經(jīng)緯度(重點)

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;

/**
 * 根據(jù)IP查詢經(jīng)緯度
 * @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);
    //經(jīng)緯度的正則表達式
    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})";
    // 創(chuàng)建 Pattern 對象
    Pattern r = Pattern.compile(pattern);
    // 現(xiàn)在創(chuàng)建 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發(fā)送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);
        // 發(fā)送POST請求必須設置如下兩行
        connection.setDoOutput(true);
        connection.setDoInput(true);
        PrintWriter printWriter = new PrintWriter(connection.getOutputStream());

        // 發(fā)送請求參數(shù)
        printWriter.write("ip="+ip);//post的參數(shù) 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的方式來調(diào)用抑片,解決了ios和android雙端各自去前端獲取解析卵佛。我的QQ337241905杨赤,有相關問題可以聯(lián)系我敞斋。

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市疾牲,隨后出現(xiàn)的幾起案子植捎,更是在濱河造成了極大的恐慌,老刑警劉巖阳柔,帶你破解...
    沈念sama閱讀 216,692評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件焰枢,死亡現(xiàn)場離奇詭異,居然都是意外死亡舌剂,警方通過查閱死者的電腦和手機济锄,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,482評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來霍转,“玉大人荐绝,你說我怎么就攤上這事”芟” “怎么了低滩?”我有些...
    開封第一講書人閱讀 162,995評論 0 353
  • 文/不壞的土叔 我叫張陵召夹,是天一觀的道長。 經(jīng)常有香客問我恕沫,道長监憎,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,223評論 1 292
  • 正文 為了忘掉前任婶溯,我火速辦了婚禮鲸阔,結果婚禮上,老公的妹妹穿的比我還像新娘爬虱。我一直安慰自己隶债,他們只是感情好,可當我...
    茶點故事閱讀 67,245評論 6 388
  • 文/花漫 我一把揭開白布跑筝。 她就那樣靜靜地躺著死讹,像睡著了一般。 火紅的嫁衣襯著肌膚如雪曲梗。 梳的紋絲不亂的頭發(fā)上赞警,一...
    開封第一講書人閱讀 51,208評論 1 299
  • 那天,我揣著相機與錄音虏两,去河邊找鬼愧旦。 笑死,一個胖子當著我的面吹牛定罢,可吹牛的內(nèi)容都是我干的笤虫。 我是一名探鬼主播,決...
    沈念sama閱讀 40,091評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼祖凫,長吁一口氣:“原來是場噩夢啊……” “哼琼蚯!你這毒婦竟也來了?” 一聲冷哼從身側響起惠况,我...
    開封第一講書人閱讀 38,929評論 0 274
  • 序言:老撾萬榮一對情侶失蹤遭庶,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后稠屠,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體峦睡,經(jīng)...
    沈念sama閱讀 45,346評論 1 311
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,570評論 2 333
  • 正文 我和宋清朗相戀三年权埠,在試婚紗的時候發(fā)現(xiàn)自己被綠了榨了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,739評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡攘蔽,死狀恐怖龙屉,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情秩彤,我是刑警寧澤叔扼,帶...
    沈念sama閱讀 35,437評論 5 344
  • 正文 年R本政府宣布事哭,位于F島的核電站,受9級特大地震影響瓜富,放射性物質(zhì)發(fā)生泄漏鳍咱。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,037評論 3 326
  • 文/蒙蒙 一与柑、第九天 我趴在偏房一處隱蔽的房頂上張望谤辜。 院中可真熱鬧,春花似錦价捧、人聲如沸丑念。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,677評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽脯倚。三九已至,卻和暖如春嵌屎,著一層夾襖步出監(jiān)牢的瞬間推正,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,833評論 1 269
  • 我被黑心中介騙來泰國打工宝惰, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留植榕,地道東北人。 一個月前我還...
    沈念sama閱讀 47,760評論 2 369
  • 正文 我出身青樓尼夺,卻偏偏與公主長得像尊残,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子淤堵,可洞房花燭夜當晚...
    茶點故事閱讀 44,647評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 國家電網(wǎng)公司企業(yè)標準(Q/GDW)- 面向?qū)ο蟮挠秒娦畔?shù)據(jù)交換協(xié)議 - 報批稿:20170802 前言: 排版 ...
    庭說閱讀 10,961評論 6 13
  • 一寝衫、簡歷準備 1、個人技能 (1)自定義控件粘勒、UI設計竞端、常用動畫特效 自定義控件 ①為什么要自定義控件屎即? Andr...
    lucas777閱讀 5,202評論 2 54
  • Swift1> Swift和OC的區(qū)別1.1> Swift沒有地址/指針的概念1.2> 泛型1.3> 類型嚴謹 對...
    cosWriter閱讀 11,097評論 1 32
  • 今天小姐姐不分享代碼庙睡,來談談我對前后臺交互的認知。 在web開發(fā)中技俐,前后臺交互是一個至關重要的環(huán)節(jié)乘陪,前后臺需要及時...
    馬大哈tt閱讀 2,394評論 5 11
  • MiniC閱讀 388評論 0 0