1. 程式人生 > >(簡單詳細)React Native獲取手機當前經緯度,(通過高德地圖介面)獲取當前地理位置

(簡單詳細)React Native獲取手機當前經緯度,(通過高德地圖介面)獲取當前地理位置

要獲取手機的當前地理位置,首先要獲得經緯度,然後通過逆地理編碼獲得位置資訊

地理編碼/逆地理編碼 API 是通過 HTTP/HTTPS 協議訪問遠端服務的介面,提供結構化地址與經緯度之間的相互轉化的能力。

1.AndroidManifest.xml加入許可權

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

2.這裡呼叫getCurrentPosition 方法得到經緯度,這裡我把得到的經緯度儲存到state中對應的longitude和latitude裡面。

再呼叫高德地圖的介面,通過逆地理介面返回位置資訊(下面放了完整程式碼,直接複製全部然後覆蓋app.js啟動就能看到效果了)

(這裡有個我遇到的很大的坑:react native版本為0.57.4的時候(也就是我現在的版本),

我用import Geolocation from 'Geolocation';匯入會執行報錯的,具體錯誤有好幾個。

比如:

1.module:metro-react-native-babel-preset 找不到,但是這個東西已經淘汰被babel-preset-react-native替代了,但是我兩個都npm install還是要說con't not find module:metro-react-native-babel-preset,把metro-react-native-babel-preset刪除了也還是抱這個錯誤,真是氣死人了。

2.還有就是謎之500錯誤,真的難受。

3.另外我在版本為0.55.4的專案中使用import Geolocation from 'Geolocation';方式匯入是能用的,也能獲取經緯度。但我新建一個專案為版本是0.57.4,我把版本改為0.55.4也報錯con't not find module:metro-react-native-babel-preset,陰魂不散啊,對新手太不友好了,難受+10086!!!

var Geolocation = require('Geolocation');

這種方式匯入也會執行報錯。錯誤都跟import Geolocation from 'Geolocation';這種方式匯入出現的錯誤差不多。)

app.js:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import { StyleSheet, Text, View} from 'react-native';

export default class App extends Component {

   state = {
        longitude:'',//經度
        latitude:'',//緯度
        position:'',//位置名稱
    };

    componentWillMount = () => {
        this.getPositions();
    };

    getPositions=()=>{
        return new Promise(() => {
            /** 獲取當前位置資訊 */
            navigator.geolocation.getCurrentPosition(
                location => {
                    this.setState({
                        longitude: location.coords.longitude,//經度
                        latitude: location.coords.latitude,//緯度
                    });
                    //通過呼叫高德地圖逆地理介面,傳入經緯度獲取位置資訊
                    fetch(`http://restapi.amap.com/v3/geocode/regeo?key=97c933e33025b3843b40016900074704&location=${this.state.longitude},${this.state.latitude}&radius=1000&extensions=all&batch=false&roadlevel=0`, {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/x-www-form-urlencoded"
                        },
                        body: ``
                    })
                        .then((response) => response.json())
                        .then((jsonData) => {
                            try {
                                this.setState({
                                    position:jsonData.regeocode.formatted_address,
                                });
                                alert(jsonData.regeocode.formatted_address)
                            }catch (e) {

                            }
                        })
                        .catch((error) => {
                            console.error(error);
                        });
                    //訪問網路結束
                },
                error => {
                    console.error(error);
                }
            );

        })
    }


  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.instructions}>經度:{this.state.longitude}</Text>
        <Text style={styles.instructions}>緯度:{this.state.latitude}</Text>
        <Text style={styles.instructions}>當前位置:{this.state.position}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});


3.拼接的引數含義可檢視https://lbs.amap.com/api/webservice/guide/api/georegeo

另外key=97c933e33025b3843b40016900074704是需要自己新增的,

開啟應用管理 http://lbs.amap.com/dev/key/app ,新增新key即可(新增的key時候注意key的型別)

http://restapi.amap.com/v3/geocode/regeo
?key=97c933e33025b3843b40016900074704
&location=${this.state.longitude},${this.state.latitude}
&radius=1000
&extensions=all
&batch=false
&roadlevel=0`

這是我複製過來的高德地圖逆地理的介面請求引數表和返回型別表

  • 逆地理編碼API服務地址->
    https://restapi.amap.com/v3/geocode/regeo?
  • 請求引數:
  • 引數名

    含義

    規則說明

    是否必須

    預設值

    key

    高德Key

    使用者在高德地圖官網申請Web服務API型別Key

    必填

    location

    經緯度座標

    傳入內容規則:經度在前,緯度在後,經緯度間以“,”分割,經緯度小數點後不要超過 6 位。如果需要解析多個經緯度的話,請用"|"進行間隔,並且將 batch 引數設定為 true,最多支援傳入 20 對座標點。每對點座標之間用"|"分割。

    必填

    poitype

    返回附近POI型別

    以下內容需要 extensions 引數為 all 時才生效。

    逆地理編碼在進行座標解析之後不僅可以返回地址描述,也可以返回經緯度附近符合限定要求的POI內容(在 extensions 欄位值為 all 時才會返回POI內容)。設定 POI 型別引數相當於為上述操作限定要求。引數僅支援傳入POI TYPECODE,可以傳入多個POI TYPECODE,相互之間用“|”分隔。該引數在 batch 取值為 true 時不生效。獲取 POI TYPECODE 可以參考POI分類碼錶

    可選

    radius

    搜尋半徑

    radius取值範圍在0~3000,預設是1000。單位:米

    可選

    1000

    extensions

    返回結果控制

    extensions 引數預設取值是 base,也就是返回基本地址資訊;

    extensions 引數取值為 all 時會返回基本地址資訊、附近 POI 內容、道路資訊以及道路交叉口資訊。

    可選

    base

    batch

    批量查詢控制

    batch 引數設定為 true 時進行批量查詢操作,最多支援 20 個經緯度點進行批量地址查詢操作。

    batch 引數設定為 false 時進行單點查詢,此時即使傳入多個經緯度也只返回第一個經緯度的地址解析查詢結果。

    可選

    false

    roadlevel

    道路等級

    以下內容需要 extensions 引數為 all 時才生效。

    可選值:0,1 
    當roadlevel=0時,顯示所有道路 
    當roadlevel=1時,過濾非主幹道路,僅輸出主幹道路資料 

    可選

    sig

    數字簽名

    請參考數字簽名獲取和使用方法

    可選

    output

    返回資料格式型別

    可選輸入內容包括:JSON,XML。設定 JSON 返回結果資料將會以JSON結構構成;如果設定 XML 返回結果資料將以 XML 結構構成。

    可選

    JSON

    callback

    回撥函式

    callback 值是使用者定義的函式名稱,此引數只在 output 引數設定為 JSON 時有效。

    可選

    homeorcorp

    是否優化POI返回順序

    以下內容需要 extensions 引數為 all 時才生效。

    homeorcorp 引數的設定可以影響召回 POI 內容的排序策略,目前提供三個可選引數:

    0:不對召回的排序策略進行干擾。

    1:綜合大資料分析將居家相關的 POI 內容優先返回,即優化返回結果中 pois 欄位的poi順序。

    2:綜合大資料分析將公司相關的 POI 內容優先返回,即優化返回結果中 pois 欄位的poi順序。

    可選

    0

    返回型別:
  • 名稱

    含義

    規則說明

    status

    返回結果狀態值

    返回值為 0 或 1,0 表示請求失敗;1 表示請求成功。

    info

    返回狀態說明

    當 status 為 0 時,info 會返回具體錯誤原因,否則返回“OK”。詳情可以參考

    info狀態表

    regeocodes

    逆地理編碼列表

    batch 欄位設定為 true 時為批量請求,此時 regeocodes 標籤返回,標籤下為 regeocode 物件列表;batch 為false 時為單個請求,會返回 regeocode 物件;regeocode 物件包含的資料如下:

     

    formatted_address

    結構化地址資訊

    結構化地址資訊包括:省份+城市+區縣+城鎮+鄉村+街道+門牌號碼

    如果座標點處於海域範圍內,則結構化地址資訊為:省份+城市+區縣+海域資訊

    addressComponent

    地址元素列表

     

     

    province

    座標點所在省名稱

    例如:北京市

    city

    座標點所在城市名稱

    當所在城市為北京、上海、天津、重慶四個直轄市時,該欄位返回為空

    當所在城市屬於縣級市的時候,此欄位為空

    citycode

    城市編碼

    例如:010

    district

    座標點所在區

    例如:海淀區

    adcode

    行政區編碼

    例如:110108

    township

    座標點所在鄉鎮/街道(此街道為社群街道,不是道路資訊)

    例如:燕園街道

    towncode

    鄉鎮街道編碼

    例如:110101001000

    neighborhood

    社群資訊列表

     

     

    name

    社群名稱

    例如:北京大學

    type

    POI型別

    例如:科教文化服務;學校;高等院校

     

    building

    樓資訊列表

     

     

    name

    建築名稱

    例如:北京大學

    type

    型別

    例如:科教文化服務;學校;高等院校

    streetNumber

    門牌資訊列表

     

     

    street

    街道名稱

    例如:中關村北二條

    number

    門牌號

    例如:3號

    location

    座標點

    經緯度座標點:經度,緯度

    direction

    方向

    座標點所處街道方位

    distance

    門牌地址到請求座標的距離

    單位:米

    seaArea

    所屬海域資訊

    例如:渤海

    businessAreas

    經緯度所屬商圈列表

     

     

    businessArea

    商圈資訊

     

    location

    商圈中心點經緯度

     

    name

     商圈名稱 

     例如:頤和園 

    id

     商圈所在區域的adcode 

     例如:朝陽區/海淀區 

    roads

    道路資訊列表

    請求引數 extensions 為 all 時返回如下內容

     

    road

    道路資訊

     

     

    id

    道路id

     

    name

    道路名稱

     

    distance

    道路到請求座標的距離

    單位:米

    direction

    方位

    輸入點和此路的相對方位

    location

    座標點

     

    roadinters

    道路交叉口列表

    請求引數 extensions 為 all 時返回如下內容

     

    roadinter

    道路交叉口

     

     

    distance

    交叉路口到請求座標的距離

    單位:米

    direction

    方位

    輸入點相對路口的方位

    location

    路口經緯度

     

    first_id

    第一條道路id

     

    first_name

    第一條道路名稱

     

    second_id

    第二條道路id

     

    second_name

    第二條道路名稱

     

    pois

    poi資訊列表

    請求引數 extensions 為 all 時返回如下內容

     

    poi

    poi資訊列表

     

     

    id

    poi的id

     

    name

    poi點名稱

     

    type

    poi型別

     

    tel

    電話

     

    distance

    該POI到請求座標的距離

    單位:米

    direction

    方向

    為輸入點相對建築物的方位

    address

    poi地址資訊

     

    location

    座標點

     

    businessarea

    poi所在商圈名稱

     

    aois

    aoi資訊列表

    請求引數 extensions 為 all 時返回如下內容

     

    aoi

    aoi資訊

     

     

    id

    所屬 aoi的id

     

    name

    所屬 aoi 名稱

     

    adcode

    所屬 aoi 所在區域編碼

     

    location

    所屬 aoi 中心點座標

     

    area

    所屬aoi點面積

    單位:平方米

    distance

    輸入經緯度是否在aoi面之中

     0,代表在aoi內

    其餘整數代表距離AOI的距離