如何通过HTML/JavaScript将经纬度变量写入window.location的URL中？

我之前试过好几种方法来实现把经纬度参数添加到浏览器URL里，都没成功，后来终于打磨出了下面这段可行的代码。它能完成两个核心功能：

• 获取用户当前地理位置并显示在页面上
• 自动更新浏览器地址栏的URL，添加longitude和latitude两个参数

完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Geolocation URL Update</title>
</head>
<body>
<div id="result">
<!-- 位置信息会显示在这里 -->
</div>
<button type="button" onclick="showPosition();">Show Position</button>

<script>
function showPosition() {
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      // 显示位置信息到页面
      const positionInfo = `Your current position is (Latitude: ${position.coords.latitude}, Longitude: ${position.coords.longitude})`;
      document.getElementById("result").innerHTML = positionInfo;
      
      // 处理URL参数并更新地址栏
      const currentURL = new URL(window.location.href);
      currentURL.searchParams.set('longitude', position.coords.longitude);
      currentURL.searchParams.set('latitude', position.coords.latitude);
      window.location.href = currentURL;
    });
  } else {
    alert("Sorry, your browser does not support HTML5 geolocation.");
  }
}
</script>
</body>
</html>

关键代码说明 #

• 地理定位获取：使用navigator.geolocation.getCurrentPosition API获取用户的经纬度，这个API需要用户授权访问位置信息才能正常工作。
• URL参数处理：我特意用了原生的URL对象来操作搜索参数，这比手动拼接URL字符串更安全，能自动处理参数的编码问题，避免出现无效URL的情况。
• URL更新：通过window.location.href将更新后的URL赋值给地址栏，页面会重新加载并带上经纬度参数。

注意事项 #

• 该功能需要在HTTPS环境下运行（本地开发的localhost除外），因为现代浏览器会限制非安全环境下的地理定位API调用。
• 用户需要允许浏览器访问其位置信息，否则无法获取经纬度。

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