navigator.geolocation.getCurrentPosition不能与onClick一起使用

Question

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

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

使用Chrome 59和我允许我的应用程序“＃34;跟踪您的位置＆＃34;。

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()在更高的组件中使用。

Answer 1

发现了问题。

在更高的组件中，我使用的是navigator.geolocation.watchPosition()，这似乎阻止了navigator.geolocation.getCurrentPosition()。 getCurrentPosition()内的第一个componentDidMount()可能因为速度超过watchPosition()而成功执行。

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