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

Posted 2023-02-23

【中文标题】在浏览器中测试地理位置时出错

【英文标题】：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里面的函数会在组件挂载到浏览器时运行。