React Native - 使用Geolocation进行定位（获取当前位置、监听位置变化）

Dear 丶 2022-04-25 04:40 717阅读 0赞

React Native 提供了 Geolocation API，让我们可以很方便的获取当前的位置信息，或者监听位置的变化。下面通过样例演示如何使用。

## 一、获取当前的定位信息 ##

### 1，getCurrentPosition()方法介绍 ###

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>static</code>&nbsp;<code>getCurrentPosition(geo_success, geo_error?, geo_options?)</code> </td> 
 </tr> 
 </tbody> 
</table>

该方法用于获取当前的位置，其参数如下：

（1）geo\_success：成功回调函数

（2）geo\_error：失败回调函数

（3）geo\_options：传递的参数。其支持的属性有：

*  timeout：指定获取地理位置的超时时间，默认不限时。单位为毫秒。
 *  maximumAge：最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。默认为 0，表示浏览器需要立刻重新计算位置。
 *  enableHighAccuracy：指示浏览器获取高精度的位置，默认为 false。当开启后，可能没有任何影响，也可能使浏览器花费更长的时间获取更精确的位置数据。

### 2，效果图 ###

点击“获取位置”按钮后，获取当前设备地理位置信息，并弹出显示。

[![原文:React Native - 使用Geolocation进行定位（获取当前位置、监听位置变化）][React Native - _Geolocation]][React Native - _Geolocation_React Native - _Geolocation]      [![原文:React Native - 使用Geolocation进行定位（获取当前位置、监听位置变化）][React Native - _Geolocation 1]][React Native - _Geolocation_React Native - _Geolocation]

### 3，样例代码 ###

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 </td> 
 <td> <code>import React, { Component } from&nbsp;</code><code>'react'</code><code>;</code> <code>import { </code> <code>&nbsp;&nbsp;</code><code>AppRegistry,</code> <code>&nbsp;&nbsp;</code><code>StyleSheet,</code> <code>&nbsp;&nbsp;</code><code>Text,</code> <code>&nbsp;&nbsp;</code><code>View</code> <code>} from&nbsp;</code><code>'react-native'</code><code>;</code> &nbsp; <code>var</code>&nbsp;<code>Geolocation = require(</code><code>'Geolocation'</code><code>);</code> &nbsp; <code>//默认应用的容器组件</code> <code>class App extends Component { </code> <code>&nbsp;&nbsp;&nbsp;</code><code>//渲染</code> <code>&nbsp;&nbsp;&nbsp;</code><code>render() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>(</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;View style={styles.container}&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;Text style={styles.item} onPress={ </code><code>this</code><code>.getLocation.bind(</code><code>this</code><code>)}&gt;获取位置&lt;/Text&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/View&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;</code><code>}</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;</code><code>//获取位置</code> <code>&nbsp;&nbsp;&nbsp;</code><code>getLocation() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>Geolocation.getCurrentPosition(</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>location =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>result =&nbsp;</code><code>"速度："</code>&nbsp;<code>+ location.coords.speed +</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"\n经度："</code>&nbsp;<code>+ location.coords.longitude +</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"\n纬度："</code>&nbsp;<code>+ location.coords.latitude +</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"\n准确度："</code>&nbsp;<code>+ location.coords.accuracy +</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"\n行进方向："</code>&nbsp;<code>+ location.coords.heading +</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"\n海拔："</code>&nbsp;<code>+ location.coords.altitude +</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"\n海拔准确度："</code>&nbsp;<code>+ location.coords.altitudeAccuracy +</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"\n时间戳："</code>&nbsp;<code>+ location.timestamp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>alert(result);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>error =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>alert(</code><code>"获取位置失败："</code><code>+ error)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;</code><code>}</code> &nbsp; <code>//样式定义</code> <code>const styles = StyleSheet.create({ </code> <code>&nbsp;&nbsp;</code><code>container:{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>flex: 1,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>marginTop:25</code> <code>&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;</code><code>item:{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>margin:15,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height:30,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>borderWidth:1,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>padding:6,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>borderColor:</code><code>'#ddd'</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>textAlign:</code><code>'center'</code> <code>&nbsp;&nbsp;</code><code>},</code> <code>});</code> &nbsp; <code>AppRegistry.registerComponent(</code><code>'ReactDemo'</code><code>, () =&gt; App);</code> </td> 
 </tr> 
 </tbody> 
</table>

## 二、监视定位变化 ##

### 1，watchPosition()方法介绍 ###

如果我们需要设定一个回调函数来不断响应定位数据发生的变更（设备发生了移动，或获取到了更高精度的地理位置信息）。可以通过 watchPosition() 函数实现该功能。  
watchPosition() 与 getCurrentPosition() 接收的参数相同，但回调函数会被调用多次。  
我们可以直接调用 watchPosition() 函数，不需要先调用 getCurrentPosition() 函数。

### 2，clearWatch()方法介绍 ###

根据传入的 watchid 来对应的位置监听活动。

### 3，效果图 ###

（1）点击“开始监听”按钮后便开始监视设备的位置变化，每当定位信息有发生变化则会弹出显示。

（2）点击“停止监听”按钮则停止对设备位置变化的监视。

[![原文:React Native - 使用Geolocation进行定位（获取当前位置、监听位置变化）][React Native - _Geolocation 2]][React Native - _Geolocation_React Native - _Geolocation]      [![原文:React Native - 使用Geolocation进行定位（获取当前位置、监听位置变化）][React Native - _Geolocation 3]][React Native - _Geolocation_React Native - _Geolocation]

### 4，样例代码 ###

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 </td> 
 <td> <code>import React, { Component } from&nbsp;</code><code>'react'</code><code>;</code> <code>import { </code> <code>&nbsp;&nbsp;</code><code>AppRegistry,</code> <code>&nbsp;&nbsp;</code><code>StyleSheet,</code> <code>&nbsp;&nbsp;</code><code>Text,</code> <code>&nbsp;&nbsp;</code><code>View</code> <code>} from&nbsp;</code><code>'react-native'</code><code>;</code> &nbsp; <code>var</code>&nbsp;<code>Geolocation = require(</code><code>'Geolocation'</code><code>);</code> &nbsp; <code>//监听定位的id</code> <code>var</code>&nbsp;<code>watchID =&nbsp;</code><code>null</code> &nbsp; <code>//默认应用的容器组件</code> <code>class App extends Component { </code> <code>&nbsp;&nbsp;&nbsp;</code><code>//渲染</code> <code>&nbsp;&nbsp;&nbsp;</code><code>render() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>(</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;View style={styles.container}&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;Text style={styles.item} onPress={ </code><code>this</code><code>.beginWatch.bind(</code><code>this</code><code>)}&gt;开始监听&lt;/Text&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;Text style={styles.item} onPress={ </code><code>this</code><code>.stopWatch.bind(</code><code>this</code><code>)}&gt;停止监听&lt;/Text&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/View&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;</code><code>}</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;</code><code>//开始监听位置变化</code> <code>&nbsp;&nbsp;&nbsp;</code><code>beginWatch() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>watchID = Geolocation.watchPosition(</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>location =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>result =&nbsp;</code><code>"速度："</code>&nbsp;<code>+ location.coords.speed +</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"\n经度："</code>&nbsp;<code>+ location.coords.longitude +</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"\n纬度："</code>&nbsp;<code>+ location.coords.latitude +</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"\n准确度："</code>&nbsp;<code>+ location.coords.accuracy +</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"\n行进方向："</code>&nbsp;<code>+ location.coords.heading +</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"\n海拔："</code>&nbsp;<code>+ location.coords.altitude +</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"\n海拔准确度："</code>&nbsp;<code>+ location.coords.altitudeAccuracy +</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"\n时间戳："</code>&nbsp;<code>+ location.timestamp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>alert(result);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>error =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>alert(</code><code>"获取位置失败："</code><code>+ error)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;</code><code>}</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;</code><code>//停止监听位置变化</code> <code>&nbsp;&nbsp;&nbsp;</code><code>stopWatch() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>Geolocation.clearWatch(watchID);</code> <code>&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;</code><code>}</code> &nbsp; <code>//样式定义</code> <code>const styles = StyleSheet.create({ </code> <code>&nbsp;&nbsp;</code><code>container:{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>flex: 1,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>marginTop:25</code> <code>&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;</code><code>item:{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>margin:15,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height:30,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>borderWidth:1,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>padding:6,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>borderColor:</code><code>'#ddd'</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>textAlign:</code><code>'center'</code> <code>&nbsp;&nbsp;</code><code>},</code> <code>});</code> &nbsp; <code>AppRegistry.registerComponent(</code><code>'ReactDemo'</code><code>, () =&gt; App);</code> </td> 
 </tr> 
 </tbody> 
</table>

原文出自：[www.hangge.com][]  转载请保留原文链接：[http://www.hangge.com/blog/cache/detail\_1620.html][http_www.hangge.com_blog_cache_detail_1620.html]

[React Native - _Geolocation]: http://www.hangge.com/blog_uploads/201703/201703240926578462.png
[React Native - _Geolocation_React Native - _Geolocation]: /images/20220210/b88f425284c6493bac40b50eb1d5030d.png
[React Native - _Geolocation 1]: http://www.hangge.com/blog_uploads/201703/2017032409270648376.png
[React Native - _Geolocation 2]: http://www.hangge.com/blog_uploads/201703/2017032409430586879.png
[React Native - _Geolocation 3]: http://www.hangge.com/blog_uploads/201703/2017032409432622484.png
[www.hangge.com]: http://www.hangge.com/
[http_www.hangge.com_blog_cache_detail_1620.html]: http://www.hangge.com/blog/cache/detail_1620.html