navigator.geolocation.getCurrentPosition 不适用于 onClick

Posted

技术标签:

【中文标题】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() 按预期工作。

【讨论】:

以上是关于navigator.geolocation.getCurrentPosition 不适用于 onClick的主要内容,如果未能解决你的问题,请参考以下文章