(簡單詳細)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”。詳情可以參考
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的距離