移动Web应用地理位置获取功能失效问题求助（附实现代码）

嘿，刚仔细看了你的代码，发现几个关键问题导致功能没法正常运行，我给你一一拆解：

• 按钮点击事件的语法&拼写错误

  1. 第一个按钮的onclick="getGeolocation"少了括号，函数调用必须加()才能执行，应该改成onclick="getGeolocation()"。
  2. 第二个按钮的函数名拼写错啦！你写的getUserCoodinates里的coordinates少了一个o，正确的函数名是getUserCoordinates，同时也要加括号改成onclick="getUserCoordinates()"。

• 缺少目标输入元素
  你的getUserCoordinates函数里尝试给#LAT和#LONG这两个输入框赋值，但你的HTML里根本没有这两个元素！得在form里补上对应的输入框，比如：

  <input type="text" id="LAT" placeholder="纬度">
  <input type="text" id="LONG" placeholder="经度">
  

• 资源加载位置不符合规范
  你把jQuery的script标签放在了<html>标签外面，这是不符合HTML语法的，应该把它移到<html>内部的<head>或者<body>里，比如放在页面最顶部的<head>部分。

• 浏览器安全限制（必看）
  现代浏览器要求地理位置API只能在HTTPS环境下使用（本地localhost测试除外），如果你是在普通HTTP的服务器上运行，浏览器会直接拒绝地理位置请求，导致功能失效。建议用localhost或者部署到HTTPS服务器上测试。

修正后的完整代码示例： #

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form>
    <input type="button" value="获取位置" onclick="getGeolocation()" />
    <input type="button" value="获取坐标" onclick="getUserCoordinates()" />
    <input type="text" id="LAT" placeholder="纬度">
    <input type="text" id="LONG" placeholder="经度">
</form>
<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(function() {
    getGeolocation();
});

function getGeolocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(getUserCoordinates);
    } else {
        alert('你需要开启设备的定位服务才能使用这个应用哦。');
    }
}

function getUserCoordinates(position) {
    jQuery("#LAT").val(position.coords.latitude);
    jQuery("#LONG").val(position.coords.longitude);
}
// ]]>
</script>
</body>
</html>

内容的提问来源于stack exchange，提问作者tony lee