Google Maps添加点击事件：标记地图并计算路线与距离

看起来你已经迈出了第一步——实现了点击地图添加标记的基础功能，接下来我们一步步把获取用户位置、路线计算和距离显示的完整逻辑补全，让整个流程跑通。

先把你现有的代码片段整理出来（方便后续修改完善）：

map.addListener('click', function(e) {
  // 允许用户点击放置标记
  placeMarker(e.latLng, map);
});

var marker;
function placeMarker(location, map) {
  // 当前位置标记函数，用于路线服务起点
  if (marker) {
    // 这里可以补全移除旧标记的逻辑
    marker.setMap(null);
  }
  marker = new google.maps.Marker({
    position: location,
    map: map
  });
}

接下来分模块完善功能：

1. 获取用户当前位置作为路线起点 #

首先利用浏览器的Geolocation API获取用户实时位置，将其设为地图初始中心，并添加专属的起点标记：

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: -34.397, lng: 150.644 }, // 位置获取失败时的 fallback
  });

  // 获取用户当前位置
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        const userLocation = new google.maps.LatLng(
          position.coords.latitude,
          position.coords.longitude
        );
        map.setCenter(userLocation);
        // 添加用户位置标记（用蓝色图标区分起点）
        const startMarker = new google.maps.Marker({
          position: userLocation,
          map: map,
          title: "你的位置",
          icon: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"
        });
        // 全局存储起点位置，供后续路线计算使用
        window.startLocation = userLocation;
      },
      () => {
        alert("无法获取你的位置，将使用默认地图中心");
      }
    );
  } else {
    alert("你的浏览器不支持地理定位功能");
  }

  // 保留你原来的点击添加终点标记的逻辑
  map.addListener('click', function(e) {
    placeMarker(e.latLng, map);
  });
}

2. 完善placeMarker函数，支持点击标记触发路线计算 #

修改标记函数，让新添加的终点标记可点击，点击时自动调用路线服务计算路径：

var endMarker; // 单独存储终点标记，确保同一时间只有一个终点
function placeMarker(location, map) {
  // 移除之前的终点标记
  if (endMarker) {
    endMarker.setMap(null);
  }
  // 创建新的终点标记（用红色图标区分）
  endMarker = new google.maps.Marker({
    position: location,
    map: map,
    title: "目的地",
    icon: "http://maps.google.com/mapfiles/ms/icons/red-dot.png"
  });

  // 给终点标记绑定点击事件，触发路线计算
  endMarker.addListener("click", () => {
    calculateRoute(window.startLocation, location, map);
  });
}

3. 实现路线计算与距离显示功能 #

添加专门的路线计算函数，使用Google Maps的DirectionsService获取路线数据，DirectionsRenderer在地图上绘制路线，同时提取距离信息展示给用户：

function calculateRoute(start, end, map) {
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer();
  directionsRenderer.setMap(map);

  directionsService.route(
    {
      origin: start,
      destination: end,
      travelMode: google.maps.TravelMode.DRIVING, // 可替换为WALKING/TRANSIT/BICYCLING
    },
    (response, status) => {
      if (status === "OK") {
        directionsRenderer.setDirections(response);
        // 提取并显示路线距离（可自定义展示位置）
        const distance = response.routes[0].legs[0].distance.text;
        document.getElementById("distance-info").textContent = `全程距离：${distance}`;
      } else {
        alert(`路线计算失败：${status}`);
      }
    }
  );
}

配套HTML结构示例 #

别忘了在页面中添加地图容器和距离显示区域：

<!DOCTYPE html>
<html>
<head>
  <title>自定义路线计算工具</title>
  <!-- 替换YOUR_API_KEY为你的Google Maps API密钥 -->
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
  <style>
    #map {
      height: 400px;
      width: 100%;
    }
    #distance-info {
      margin-top: 10px;
      font-size: 18px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <div id="distance-info"></div>
</body>
</html>

关键注意事项 #

• 务必替换代码中的YOUR_API_KEY为你自己的Google Maps API密钥，同时在Google Cloud控制台启用Maps JavaScript API和Directions API。
• 地理定位功能需要在HTTPS环境下才能正常工作（本地开发使用localhost除外）。
• 你可以根据需求调整旅行模式，或扩展更多交互逻辑（比如允许用户手动修改起点）。

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