如何在 ReactJS 中使用地理位置调用

2020-11-12 08:00:00 · 飞浪

介绍有时，应用程序可能需要用户当前的位置属性，例如纬度和经度，以便启用与位置相关的功能。位置属性允许您访问当前用户的地理位置或某一特定时刻的位置，并根据其特定区域提供特定服务。通过

介绍

有时，应用程序可能需要用户当前的位置属性，例如纬度和经度，以便启用与位置相关的功能。

位置属性允许您访问当前用户的地理位置或某一特定时刻的位置，并根据其特定区域提供特定服务。

通过地理定位，您可以访问用户详细信息，包括：

当前位置
高度
速度
行进方向
速度精度
时间戳

在本指南中，您将学习如何在地图上显示和更新用户的地理位置。

访问地理位置

您可以使用 JavaScript API navigator.geolocation访问用户的地理位置，该 API 允许您请求位置权限。如果用户授予权限，则可以访问位置属性。

有两种方法可以获取用户的位置：

地理位置.获取当前位置()
geolocation.watchPosition()

第一步是查明用户的地理位置是否可用。

      componentDidMount() {
    if ("geolocation" in navigator) {
      console.log("Available");
    } else {
      console.log("Not Available");
    }
  }
    

如果上述代码返回true，则您可以访问各种地理位置属性。如果不是，则用户已禁用位置访问。

获取当前位置

使用navigator.getCurrentPosition()方法获取用户的当前位置。

      import React, { Component } from "react";
import { render } from "react-dom";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  componentDidMount() {
    navigator.geolocation.getCurrentPosition(function(position) {
      console.log("Latitude is :", position.coords.latitude);
      console.log("Longitude is :", position.coords.longitude);
    });
  }

  render() {
    return (
      <div>
        <h4>Using geolocation JavaScript API in React</h4>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));
    

打开控制台，输出应该是这样的。

      Latitude is : xx.xxxxxx
Longitude is : xx.xxxxxx
    

根据位置，xxx 可以是根据任意数字。

尝试以下代码来获取用户的完整位置。

      componentDidMount() {
    navigator.geolocation.getCurrentPosition(function(position) {
      console.log(position)
    });
  }
    

控制台中的输出将如下所示。

      GeolocationPosition {
    coords: GeolocationCoordinates, 
    timestamp: 1583849180132
    }
    coords: { 
        GeolocationCoordinateslatitude: 19.xxxxxxx
        longitude: 73.xxxxxx
        altitude: 
            nullaccuracy: 1158
            altitudeAccuracy: null
            heading: null
            speed: null
            __proto__: GeolocationCoordinates
        timestamp: 1583849180132
    }
__proto__: GeolocationPosition
    

getCurrentPosition将成功对象作为 position 属性返回，但除了成功回调之外，还有错误回调。可以使用以下代码实现。

      componentDidMount() {
    navigator.geolocation.getCurrentPosition(
      function(position) {
        console.log(position);
      },
      function(error) {
        console.error("Error Code = " + error.code + " - " + error.message);
      }
    );
  }
    

错误回调用于获取与位置相关的错误，例如禁止定位等。当你打开控制台并禁止定位时，你会得到一个类似这样的错误。

错误代码 = 1 - 本文档中的地理定位已被功能策略禁用

观察用户动向

getCurrentPosition允许您访问当前位置，但如果用户改变了他们的位置怎么办？watchPosition附加处理程序函数并在用户改变其当前位置时立即执行，返回用户新位置的更新位置属性。

以下代码将获取基本的位置属性。

      import React, { Component } from "react";
import { render } from "react-dom";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    if (navigator.geolocation) {
      navigator.geolocation.watchPosition(function(position) {
        console.log("Latitude is :", position.coords.latitude);
        console.log("Longitude is :", position.coords.longitude);
      });
    }
  }

  render() {
    return (
      <div>
        <h4>Using geolocation JavaScript API in React</h4>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));
    

打开控制台，您将看到，只要用户改变其位置，新的位置属性就会更新。

获取位置后显示地图

地图是显示用户当前位置的主要方式。您需要一些位置参数（例如纬度和经度）来呈现当前位置。

注意：使用地图前，您必须拥有 Google Map API 密钥。否则，地图将无法使用并显示错误。

安装此地图库，可以让您快速开始使用地图。

      npm install google-maps-react

使用这个库，您可以传递位置数据，并基于该数据，用户的具体位置将在地图上突出显示。

打开新组件并写入以下代码片段。

      import React, { Component } from "react";
import { Map, GoogleApiWrapper, Marker  } from 'google-maps-react';

const mapStyles = {
  width: '100%',
  height: '100%'
};

class Demo1 extends Component {
  constructor() {
    super();
    this.state = {
      name: "React"
    };
  }

  render() {
    return (
      <div>
        <Map
          google={this.props.google}
          zoom={14}
          style={mapStyles}
          initialCenter={{
            lat: YOUR_LATITUDE,
            lng: YOUR_LONGITUDE
          }}
        >
         <Marker
          onClick={this.onMarkerClick}
          name={'This is test name'}
        />
        </Map>
      </div>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: 'API_KEY'
})(Demo1);
    

注意：您需要用API_KEY替换您的 Google 地图 API 密钥。否则，地图将无法呈现与位置相关的属性。

根据经纬度，地图将能够加载准确位置。该位置将作为地图上的标记进行标识。

其他接口

JavaScript 提供了许多其他接口，根据不同的功能需求与位置属性紧密配合。

地理位置
地理位置坐标
地理位置位置
Navigator.geolocation
地理位置错误

结论

在本指南中，您学习了如何使用 JavaScript 的地理定位 API 来处理用户位置和相关属性。您可以尝试所有内置 API，这些 API 允许您读取用户位置并进行相应的处理。如果您有任何疑问，请随时联系Codealphabet。

了解更多

探索 Pluralsight 的这些 React 课程以继续学习：

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

如何在 ReactJS 中使用地理位置调用

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import React, { Component } from "react"; import { render } from "react-dom"; class App extends Component { constructor(props) { super(props); this.state = { }; } componentDidMount() { navigator.geolocation.getCurrentPosition(function(position) { console.log("Latitude is :", position.coords.latitude); console.log("Longitude is :", position.coords.longitude); }); } render() { return ( <div> <h4>Using geolocation JavaScript API in React</h4> </div> ); } } render(<App />, document.getElementById("root"));

GeolocationPosition { coords: GeolocationCoordinates, timestamp: 1583849180132 } coords: { GeolocationCoordinateslatitude: 19.xxxxxxx longitude: 73.xxxxxx altitude: nullaccuracy: 1158 altitudeAccuracy: null heading: null speed: null __proto__: GeolocationCoordinates timestamp: 1583849180132 } __proto__: GeolocationPosition

componentDidMount() { navigator.geolocation.getCurrentPosition( function(position) { console.log(position); }, function(error) { console.error("Error Code = " + error.code + " - " + error.message); } ); }

import React, { Component } from "react"; import { render } from "react-dom"; class App extends Component { constructor(props) { super(props); this.state = {}; } componentDidMount() { if (navigator.geolocation) { navigator.geolocation.watchPosition(function(position) { console.log("Latitude is :", position.coords.latitude); console.log("Longitude is :", position.coords.longitude); }); } } render() { return ( <div> <h4>Using geolocation JavaScript API in React</h4> </div> ); } } render(<App />, document.getElementById("root"));

import React, { Component } from "react"; import { Map, GoogleApiWrapper, Marker } from 'google-maps-react'; const mapStyles = { width: '100%', height: '100%' }; class Demo1 extends Component { constructor() { super(); this.state = { name: "React" }; } render() { return ( <div> <Map google={this.props.google} zoom={14} style={mapStyles} initialCenter={{ lat: YOUR_LATITUDE, lng: YOUR_LONGITUDE }} > <Marker onClick={this.onMarkerClick} name={'This is test name'} /> </Map> </div> ); } } export default GoogleApiWrapper({ apiKey: 'API_KEY' })(Demo1);