如何将JavaScript获取的经纬度值传递给PHP变量

你首先要搞清楚PHP和JavaScript的运行时机差，别想着直接把JS变量赋值给PHP变量——这俩根本不在一个环境跑：

• PHP是服务端语言，代码在服务器上执行，页面完整输出到用户浏览器的时候，PHP的本次执行流程已经完全结束了。
• 地理定位是JS在用户浏览器里跑的客户端逻辑，等JS拿到经纬度的时候，PHP早就跑完了，不可能直接给同一次请求里的PHP变量赋值。

要把JS拿到的经纬度传给PHP用，必须通过HTTP请求把数据发回服务端，常用的实现方式有两种。

方案1：URL传参+自动跳转 #

适合拿到位置后需要PHP直接渲染全页内容的场景，逻辑简单不需要额外写接口，拿到经纬度后拼到URL参数里跳转当前页，PHP直接从$_GET里取值即可。
完整可运行代码如下：

<?php
// 先判断是否已经接收到经纬度参数
if (isset($_GET['lat']) && isset($_GET['lng'])) {
    $lat = $_GET['lat'];
    $lng = $_GET['lng'];
    // 后续所有需要用经纬度的PHP逻辑都可以写在这里，比如存库、计算距离、匹配周边点位
    echo "PHP端获取到的纬度：".$lat."，经度：".$lng;
    echo '<script>alert("Welcome to Geeks for Geeks")</script>';
}
?>
<!DOCTYPE html>
<html>
<!-- 没拿到经纬度参数时才触发定位逻辑，避免无限跳转 -->
<body <?php if (!isset($_GET['lat'])) echo 'onload="getLocation()"'; ?>>
<p id="demo"></p>

<script>
var x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    // 加错误处理回调，避免用户拒绝授权后页面无响应
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else { 
    x.innerHTML = "当前浏览器不支持地理定位功能";
  }
}

function showPosition(position) {
  const lat = position.coords.latitude;
  const lng = position.coords.longitude;
  x.innerHTML = "Latitude: " + lat + "<br>Longitude: " + lng;
  // 拼参数跳转当前页，把经纬度传给PHP
  window.location.href = `?lat=${lat}&lng=${lng}`;
}

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "用户拒绝了定位授权";
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "当前位置信息不可用";
      break;
    case error.TIMEOUT:
      x.innerHTML = "定位请求超时，请重试";
      break;
  }
}
</script>
</body>
</html>

• 优点：实现简单，无额外依赖，刷新后PHP可直接处理全页逻辑
• 缺点：会触发一次页面刷新，体验流畅度一般

方案2：AJAX异步传值 #

适合不想刷新页面的场景，JS拿到经纬度后异步把数据发给后端PHP接口，PHP处理完把结果返回前端即可，全程页面无刷新。

前端页面（index.php） #

<!DOCTYPE html>
<html>
<body onload="getLocation()">
<p id="demo"></p>
<p id="php-result"></p>

<script>
var x = document.getElementById("demo");
var resultBox = document.getElementById("php-result");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else { 
    x.innerHTML = "当前浏览器不支持地理定位功能";
  }
}

function showPosition(position) {
  const lat = position.coords.latitude;
  const lng = position.coords.longitude;
  x.innerHTML = "Latitude: " + lat + "<br>Longitude: " + lng;
  // 异步发POST请求给后端接口
  fetch('save_location.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: `lat=${lat}&lng=${lng}`
  })
  .then(res => res.text())
  .then(data => {
    // 把PHP返回的处理结果渲染到页面
    resultBox.innerHTML = data;
  })
}

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "用户拒绝了定位授权";
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "当前位置信息不可用";
      break;
    case error.TIMEOUT:
      x.innerHTML = "定位请求超时，请重试";
      break;
  }
}
</script>
</body>
</html>

后端处理接口（save_location.php） #

<?php
// 生产环境一定要加参数合法性校验，不要直接用前端传入的参数拼SQL，避免注入风险
if (isset($_POST['lat']) && isset($_POST['lng'])) {
    $lat = $_POST['lat'];
    $lng = $_POST['lng'];
    
    // 这里写你的业务逻辑，比如存session、入库、计算周边信息都可以
    session_start();
    $_SESSION['user_lat'] = $lat;
    $_SESSION['user_lng'] = $lng;

    // 返回处理结果给前端
    echo "PHP端已成功接收位置，纬度：".$lat."，经度：".$lng;
    echo '<script>alert("Welcome to Geeks for Geeks")</script>';
} else {
    echo "参数缺失，获取位置失败";
}
?>

• 优点：无页面刷新，用户体验流畅
• 缺点：需要单独写后端处理接口，要处理异步请求逻辑

注意：地理定位API仅支持HTTPS环境、localhost本地开发环境调用，普通HTTP环境下大部分浏览器会直接禁用该接口。

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