如何使 Geolocation API 函数在 localhost file://上工作

问题描述

我有这个基本代码来使用 Geolocation API 检索纬度和经度:

I have this basic code to retrieve latitude and longitude with Geolocation API :

showmap.html

<button  onclick="getLocation()">Find me </button>

<script type="text/javascript" src="js/geolocation.js"></script>

js/geolocation.js

function getLocation() {

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else { 
    alert("Geolocation is not supported by your browser. Please update your browser. Visit Help Center.");
  }
}

function showPosition(position) {
  var latitude = position.coords.latitude;
  var longitude =  position.coords.longitude;

  console.log("Latitude : " + latitude + "<br> Longitude :" + longitude);
}

当我单击按钮时，我在控制台中收到此错误

When I click on the button I receive this error in the console

SyntaxError: An invalid or illegal string was specified showmap.html:72
    _sendMessage file:///home/user/Desktop/Projects/showmap.html:72
    call file:///home/user/Desktop/Projects/showmap.html:64
    getCurrentPosition file:///home/user/Desktop/Projects/showmap.html:16
    getLocation file:///home/user/Desktop/Projects/js/geolocation.js:4
    onclick file:///home/user/Desktop/Projects/showmap.html:1
    fireMouseEvent resource://devtools/server/actors/emulation/touch-simulator.js:290
    dispatchMouseEvents resource://devtools/server/actors/emulation/touch-simulator.js:264

我正在尝试找出解决此问题的方法.这不工作，因为我在 file:// ?

I'm trying to figure out how to solve this issue. Is this not working because I'm in file:// ?

推荐答案

要让 file: 使用 Geolocation Api，运行 ngrok 并使用 https 网址来托管您的 HTML 应用程序.无需 PHP 或 Python 等后端语言，您可以使用您的凭据生成本地隧道.

To get file: to work with Geolocation Api, run ngrok and use the https url to host your HTML app. No need for PHP or backend language like Python, you can generate a local tunnel using your credentials.

这假设您已安装 ngrok 并且您正在运行 Ubuntu.

This assumes you have ngrok installed and that you are running Ubuntu.

打开终端并运行:

ngrok http -auth="user:password" file:///path/to/your/HTML/project

参考:使用 ngrok 的内置文件服务器服务本地目录https://ngrok.com/docs

Reference : Serving local directories with ngrok's built-in fileserver https://ngrok.com/docs

这篇关于如何使 Geolocation API 函数在 localhost file://上工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！