我正在尝试制作一个显示位置的移动网络应用程序，但它不起作用？答案

【问题标题】：I'm trying to make a mobile web app that displays the location , but it ain't working?我正在尝试制作一个显示位置的移动网络应用程序，但它不起作用？
【发布时间】：2021-12-22 00:33:42
【问题描述】：

我是堆栈溢出的新手，因为遇到错误而注册。这是为我即将到来的高中项目准备的！

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body>
  <form>
    <input type="button" value="Result" onclick="getGeolocation" />
    <input type="button" value="Result" onclick="getUserCoodinates" />
  </form>
  <script type="text/javascript">
    // <![CDATA[
    //run this code when the page loads
    jQuery(document).ready(function() {
      getGeolocation();
    });
    //determine if the user's browser has location services enabled. If not, show a message
    function getGeolocation() {
      if (navigator.geolocation) {
        //if location services are turned on, continue and call the getUserCoordinates function below
        navigator.geolocation.getCurrentPosition(getUserCoodinates);
      } else {
        alert('You must enable your device\'s location services in order to run this application.');
      }
    }
    //function is passed a position object which contains the lat and long value
    function getUserCoodinates(position) {
      //set the application's text inputs LAT and LONG = to the user's lat and long position
      jQuery("#LAT").val(position.coords.latitude);
      jQuery("#LONG").val(position.coords.longitude);
    }
  </script>
</body>

</html>

我哪里出错了？ ? ?

我正在尝试将其用于移动网络应用程序。

【问题讨论】：

地理位置 API 仅在网络服务器/域上激活 SSL 证书时可用
getUserCoodinates 需要 position 作为唯一提供的参数 - 在这里使用 onclick 会失败，因为 position 是通过地理位置回调获得的，所以基本上 <input type="button" value="Result" onclick="getUserCoodinates"/> 是不正确

标签： javascript html jquery css html5-canvas

【解决方案1】：

在您的代码中，getUserCoodinates 是一个回调函数，因此不应使用单击按钮直接调用它，以便可以删除 HTML 的一部分。根据@Darkbee 的评论 - 网络服务器应该通过 SSL/https 运行页面，否则这将失败。

您可以提供给getCurrentPosition 的第二个参数用于处理错误 - 在这里使用它来尝试识别问题似乎很有意义。以下内容在我的测试系统上完美运行，该系统使用self-signed 证书运行 ssl。

document.querySelector('[type="button"]').addEventListener('click',(e)=>{
  if( navigator.geolocation ){

    const getUserCoodinates=(pos)=>{
      $('#LAT').val(pos.coords.latitude);
      $('#LONG').val(pos.coords.longitude);
    };

    const showError=(error)=>{
      let msg='An unknown error occurred.';
      switch( error.code ) {
      case error.PERMISSION_DENIED:
        msg='User denied the request for Geolocation.'
      break;
      case error.POSITION_UNAVAILABLE:
        msg='Location information is unavailable.'
      break;
      case error.TIMEOUT:
        msg='The request to get user location timed out.'
      break;
      default:break;
      }
      alert(msg);
    };


    navigator.geolocation.getCurrentPosition(getUserCoodinates,showError);
  }
});

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<form>
  <input id='LAT' />
  <input id='LONG' />
  <input type='button' value='Result' />
</form>

【讨论】：