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的主要内容,如果未能解决你的问题,请参考以下文章