如何获取用户位置并通过Google API显示至取货门店的大致位置与英里距离？

Hey there! Let's walk through how to build out those three required features using your store pickup addresses and Google Maps API key. I'll break each part down with practical code examples and explanations:

1. 获取用户当前位置 #

First, we'll use the browser's built-in Geolocation API to get the user's current coordinates (this requires user permission, a standard browser security requirement). If the user denies access, you could fall back to IP-based geolocation (though it's less precise).

Here's a JavaScript snippet to handle this:

// 请求用户位置权限
navigator.geolocation.getCurrentPosition(
  (position) => {
    // 成功获取位置，拿到经纬度
    const userLat = position.coords.latitude;
    const userLng = position.coords.longitude;
    console.log(`用户位置：${userLat}, ${userLng}`);
    // 把坐标传给后续的距离计算和路线展示函数
    calculateDistance(userLat, userLng);
    displayRoute(userLat, userLng);
  },
  (error) => {
    // 处理错误情况（比如用户拒绝权限）
    switch(error.code) {
      case error.PERMISSION_DENIED:
        alert("需要获取您的位置权限才能使用此功能");
        break;
      case error.POSITION_UNAVAILABLE:
        alert("无法获取您的当前位置");
        break;
    }
  },
  { enableHighAccuracy: true, timeout: 10000 }
);

• enableHighAccuracy: true 会请求更精准的位置（比如GPS），适合户外场景；如果是室内，你可以设为false来节省电量。

2. 计算并以英里显示用户与门店的距离 #

For this, we'll use the Google Maps Distance Matrix API — it's perfect for calculating travel distances between multiple origins/destinations, and we can specify imperial units to get miles directly.

关键参数说明： #

• origins: 用户的经纬度（比如${userLat},${userLng}）
• destinations: 你的门店取货地址（可以是经纬度字符串，或者完整的地址如123 Main St, New York, NY）
• units=imperial: 强制返回英里（默认是公制，返回公里）
• key: 你的Google API密钥

Here's a fetch example to call the API:

async function calculateDistance(userLat, userLng) {
  const apiKey = "YOUR_GOOGLE_API_KEY";
  const storeAddresses = ["123 Pickup St, Chicago, IL", "456 Dropoff Ave, Detroit, MI"]; // 替换成你的门店地址
  const origins = `${userLat},${userLng}`;
  const destinations = storeAddresses.join("|");

  try {
    const response = await fetch(
      `https://maps.googleapis.com/maps/api/distancematrix/json?origins=${origins}&destinations=${destinations}&units=imperial&key=${apiKey}`
    );
    const data = await response.json();

    if (data.status === "OK") {
      // 遍历每个门店的距离结果
      data.rows[0].elements.forEach((element, index) => {
        if (element.status === "OK") {
          const distanceInMiles = element.distance.text; // 直接返回带英里的字符串，比如"2.5 mi"
          console.log(`到门店${index+1}的距离：${distanceInMiles}`);
          // 把距离渲染到页面上，比如更新DOM元素
          document.getElementById(`store-${index+1}-distance`).textContent = distanceInMiles;
        } else {
          console.log(`无法计算到门店${index+1}的距离`);
        }
      });
    } else {
      console.error("Distance Matrix API请求失败：", data.status);
    }
  } catch (error) {
    console.error("请求出错：", error);
  }
}

• 小提示：如果你的门店已经有经纬度，直接传经纬度比地址字符串更高效，避免额外的地理编码步骤。

3. 展示从用户位置到门店的大致路线 #

We'll use the Google Maps JavaScript API with the Directions Service and Directions Renderer to draw the route on an embedded map.

步骤1：在HTML中引入Google Maps JS API #

Add this script tag to your HTML (replace with your API key):

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_API_KEY&libraries=directions"></script>

步骤2：添加一个地图容器 #

<div id="map" style="width: 100%; height: 400px;"></div>

步骤3：JavaScript代码渲染路线 #

function displayRoute(userLat, userLng) {
  const storeLocation = { lat: 41.8781, lng: -87.6298 }; // 替换成目标门店的经纬度
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: userLat, lng: userLng }, // 以用户位置为地图中心
  });

  // 创建路线服务实例
  const directionsService = new google.maps.DirectionsService();
  // 创建路线渲染器实例
  const directionsRenderer = new google.maps.DirectionsRenderer();
  directionsRenderer.setMap(map);

  // 请求路线
  directionsService.route(
    {
      origin: { lat: userLat, lng: userLng },
      destination: storeLocation,
      travelMode: google.maps.TravelMode.DRIVING, // 可选：WALKING, TRANSIT, BICYCLING
    },
    (response, status) => {
      if (status === "OK") {
        directionsRenderer.setDirections(response);
      } else {
        alert(`无法获取路线：${status}`);
      }
    }
  );
}

• 你可以自定义路线的样式（比如颜色、宽度），或者添加标记点来突出用户位置和门店位置。

额外注意事项 #

• 确保你的Google API密钥已经启用了Distance Matrix API和Maps JavaScript API（在Google Cloud Console中配置）。
• 注意API配额和计费，避免超出免费额度导致服务中断。
• 处理用户拒绝位置权限的 fallback 方案，比如让用户手动输入地址来获取位置。

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