javascript - navigator.geolocation.getCurrentPosition不适用于onClick

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

任何人都有一个想法如何使navigator.geolocation.getCurrentPosition()与onClick触发器一起工作？

使用Chrome 59，我允许我的应用程序“跟踪您的位置”。

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

最佳答案

找到了问题。

在更高的组件中，我正在使用navigator.geolocation.watchPosition()，这似乎会阻塞navigator.geolocation.getCurrentPosition()。由于getCurrentPosition()内的第一个componentDidMount()比watchPosition()更快，因此可能已成功执行。

从较高的组件中删除watchPosition()使onClick函数geolocateMe()可以正常工作。

关于javascript - navigator.geolocation.getCurrentPosition不适用于onClick，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44428034/