我来帮你一步步拆解需求，用具体的代码示例和说明来实现你的目标：

1. 获取用户当前位置并初始化地图 #

首先得请求用户的位置权限，拿到经纬度后以此为中心加载地图，同时把这个位置设为导航的起点（Origin）：

// 先请求用户位置，再初始化地图
navigator.geolocation.getCurrentPosition(
  (position) => {
    const userLat = position.coords.latitude;
    const userLng = position.coords.longitude;
    const userLocation = { lat: userLat, lng: userLng };

    // 初始化地图，把用户当前位置设为中心
    const map = new google.maps.Map(document.getElementById("map"), {
      center: userLocation,
      zoom: 15, // 可根据需求调整缩放级别
    });

    // 在地图上标记用户当前位置
    new google.maps.Marker({
      position: userLocation,
      map: map,
      title: "你的位置",
    });

    // 把用户位置存为导航起点
    let origin = userLocation;

    // 接下来绑定地图点击事件设置终点...
  },
  (error) => {
    console.error("获取位置失败:", error.message);
    // 权限拒绝或获取失败时，设置一个默认中心（比如示例中的纽约）
    const defaultCenter = { lat: 40.7128, lng: -74.0060 };
    const map = new google.maps.Map(document.getElementById("map"), {
      center: defaultCenter,
      zoom: 12,
    });
  }
);

2. 监听地图点击事件，动态设置导航终点 #

给地图绑定点击事件，用户点击的位置直接作为导航的终点（Destination）：

// 接上面的代码，在地图初始化后添加点击监听
map.addListener("click", (event) => {
  const destination = event.latLng; // 获取点击位置的经纬度

  // 在点击位置标记终点（用蓝色图标区分起点）
  new google.maps.Marker({
    position: destination,
    map: map,
    title: "目的地",
    icon: {
      url: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png",
    },
  });

  // 调用路线计算函数
  calculateRoute(origin, destination, map);
});

3. 实现路线计算（忽略途经点） #

专门写一个函数来调用Directions API，只传入起点和终点，途经点留空即可：

function calculateRoute(origin, destination, map) {
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer();
  directionsRenderer.setMap(map); // 把路线渲染到地图上

  directionsService.route(
    {
      origin: origin,
      destination: destination,
      travelMode: google.maps.TravelMode.DRIVING, // 可替换为WALKING/TRANSIT等
      waypoints: [], // 空数组表示完全忽略途经点
    },
    (response, status) => {
      if (status === google.maps.DirectionsStatus.OK) {
        directionsRenderer.setDirections(response);
      } else {
        console.error("路线计算失败:", status);
      }
    }
  );
}

额外注意事项 #

• 确保你已正确引入Google Maps JS API并带上有效密钥：

  <script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&libraries=directions"></script>
  

• 记得处理用户拒绝位置权限的情况，避免地图加载失败；
• 如果需要优化体验，可以在获取位置时添加加载提示，减少用户等待的困惑。

这样就能完全实现你的需求：加载地图时以当前位置为中心、将其设为导航起点，用户点击地图任意位置作为终点，并且全程忽略途经点啦！

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