navigator.geolocation.getCurrentPosition 无法使用 onClick

Question

我遇到一个奇怪的问题，我可以在 componentDidMount() 函数中（立即）获取地理位置，但是当我单击按钮并执行 geolocateMe() 时，我得到一个 PositionError 5 秒后。

有人知道如何让 navigator.geolocation.getCurrentPosition() 使用 onClick 触发器吗？

使用 Chrome 59，我允许我的申请 "Track your location"。

import React, { Component } from 'react';

export default class GetGeolocation extends Component {

  componentDidMount() {
    navigator.geolocation.getCurrentPosition((pos) => { console.log(pos); },
                                        (error) => { console.log(error); },
                                        { timeout: 5000 });
  }

  geolocateMe() {
    navigator.geolocation.getCurrentPosition((pos) => { console.log(pos); },
                                        (error) => { console.log(error); },
                                        { timeout: 5000 });
  }

  render() {
    return (
      <button onClick={() => this.geolocateMe()}>Geolocate me</button>
    );
  }
}

第一次访问

控制台日志

Position {coords: Coordinates, timestamp: 1496902322562}

点击按钮

控制台日志（5 秒后）

PositionError {code: 3, message: "Timeout expired"}

编辑

navigator.geolocation.watchPosition() aso 被用在更高的组件中。

Answer 1

找到问题。

在我使用 navigator.geolocation.watchPosition() 的更高组件中，这似乎阻止了 navigator.geolocation.getCurrentPosition()。 componentDidMount() 中的第一个 getCurrentPosition() 可能已成功执行，因为它比 watchPosition().

快

从较高的组件中删除 watchPosition() 使 onClick 函数 geolocateMe() 按预期工作。

navigator.geolocation.getCurrentPosition 无法使用 onClick

navigator.geolocation.getCurrentPosition not working with onClick

javascript

geolocation

navigator

reactjs

第一次访问

点击按钮

编辑