navigator.geolocation.getCurrentPosition 不适用于 onClick

Posted 2023-02-23

【中文标题】navigator.geolocation.getCurrentPosition 不适用于 onClick

【英文标题】：navigator.geolocation.getCurrentPosition not working with onClick

【发布时间】：2017-06-08 06:19:34

【问题描述】：

我遇到了一个奇怪的问题，我可以（立即）在 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() 也在更高的组件中使用。

【参考方案1】：

发现问题。

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

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