在浏览器中测试地理位置时出错

Posted

技术标签:

【中文标题】在浏览器中测试地理位置时出错【英文标题】:Getting error while testing for geolocation in the browser 【发布时间】:2021-04-17 08:35:36 【问题描述】:

我正在尝试在我的应用中使用地理定位 API。幸运的是,我在MDN website 找到了我想使用的一个,但是当我尝试测试地理定位对象(如果它存在于浏览器中)时,我收到了这个错误:

服务器错误 ReferenceError: 导航器未定义

生成页面时发生此错误。任何控制台日志都将显示在终端窗口中。 源页面/index.js (24:20) @eval

  22 | 
  23 | 
> 24 | if('geolocation' in navigator) 
     |                    ^
  25 |   console.log('It does exist')
  26 |  else 
  27 |   console.log('doesn't exist')

这是我尝试实现的代码(来自 MDN 文档网站):

if('geolocation' in navigator) 
  /* geolocation is available */
 else 
  /* geolocation IS NOT available */

你能告诉我我做错了什么,以及如何解决它吗?

【问题讨论】:

你在使用 React 吗? 这是否在服务器上执行(Server Error“任何控制台日志都将显示在终端窗口中”)? @showdev 是的,先生。准确地说是下一个JS。这会是问题吗? @ChrisBBB 你在本地测试吗? (如 localhost:port 因为它在HTTP 连接中不起作用,只能在HTTPS 协议中起作用。This feature is available only in secure contexts (HTTPS). 这些和类似的帖子似乎相关:How can I use geolocation in my node.js to get user device lat/long 和 Navigator not Found 和 navigator is not defined 【参考方案1】:

服务器上没有window 对象。当您想使用 window 对象时,您需要在 client 端进行。所以在你的 react 组件中,你需要使用useEffect,因为这个函数只在浏览器中运行。

useEffect(()=>
  if('geolocation' in navigator) 
    /* geolocation is available */
   else 
    /* geolocation IS NOT available */
  
,[])

useEffect里面的函数会在组件挂载到浏览器时运行。

【讨论】:

以上是关于在浏览器中测试地理位置时出错的主要内容,如果未能解决你的问题,请参考以下文章

在android中获取位置地址时出错

地理定位移动测试,无需 https 即可进行网络地理定位

在 IBM MobileFirst Platform 上获取位置时出错

使用 .between() 检查从字典中拉出的长/纬度位置时出错

使用地理(Python)从文本中提取城市时出错

地理定位离子在浏览器测试中工作但不在android上