Web应用开发：用户输入地点的Google Maps距离显示功能代码缺失问询

Hey ClarkeFL, based on what you've described, your current code is likely missing a few key components to enable dynamic, user-driven route rendering like the example you referenced. Let's break down each piece you need to add:

1. 地点自动补全（Autocomplete）组件 #

Right now, if users are manually typing locations, there's no guarantee those inputs will be valid, geocodable addresses. Adding Google Places Autocomplete will let users select valid locations as they type, ensuring you get proper geographic coordinates for routing.

Here's how to implement it:

// Initialize Autocomplete for origin and destination input fields
function initAutocomplete() {
  const originInput = document.getElementById('origin-input');
  const destinationInput = document.getElementById('destination-input');
  
  new google.maps.places.Autocomplete(originInput);
  new google.maps.places.Autocomplete(destinationInput);
}

Make sure to include the Places Library in your API script tag (add &libraries=places to the URL).

2. 动态路线计算的触发逻辑 #

You need to listen for changes to the user's input (either when they select an autocomplete option or finish typing) and trigger a route recalculation. Replace your static Distance Matrix call with a Directions Service request, which returns full route details instead of just distance.

Add event listeners to your input fields:

// Inside initMap()
const originInput = document.getElementById('origin-input');
const destinationInput = document.getElementById('destination-input');

// Listen for place selection or input change
originInput.addEventListener('change', calculateAndDisplayRoute);
destinationInput.addEventListener('change', calculateAndDisplayRoute);

// Or listen specifically for Autocomplete's place_changed event
originInput.addEventListener('place_changed', calculateAndDisplayRoute);
destinationInput.addEventListener('place_changed', calculateAndDisplayRoute);

3. Directions Service & Renderer Integration #

This is the core piece you're missing. The Directions Service fetches route data, and the DirectionsRenderer draws the route on your map.

Implement the route calculation function:

let map;
let directionsRenderer;
let directionsService;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: { lat: 37.7749, lng: -122.4194 }, // Default location
    zoom: 10,
  });
  
  directionsService = new google.maps.DirectionsService();
  directionsRenderer = new google.maps.DirectionsRenderer({
    map: map,
    draggable: true, // Allow users to drag and adjust the route
  });
  
  // Initialize autocomplete and event listeners here...
}

function calculateAndDisplayRoute() {
  const origin = document.getElementById('origin-input').value;
  const destination = document.getElementById('destination-input').value;

  if (!origin || !destination) return;

  directionsService.route({
    origin: origin,
    destination: destination,
    travelMode: google.maps.TravelMode.DRIVING, // Or WALKING, TRANSIT, etc.
  }, (response, status) => {
    if (status === 'OK') {
      directionsRenderer.setDirections(response);
      // Optional: Display route details (distance, duration)
      const route = response.routes[0];
      const summaryPanel = document.getElementById('route-summary');
      summaryPanel.innerHTML = `<p>Distance: ${route.legs[0].distance.text}</p><p>Duration: ${route.legs[0].duration.text}</p>`;
    } else {
      window.alert('Could not retrieve route: ' + status);
    }
  });
}

4. 交互式路线调整（可选） #

If your target UI allows users to drag the route to modify it, the draggable: true option in DirectionsRenderer enables this. You can also listen for the directions_changed event to update route details when the user adjusts the path:

directionsRenderer.addListener('directions_changed', () => {
  const directions = directionsRenderer.getDirections();
  const route = directions.routes[0];
  // Update your summary panel here with new distance/duration
});

5. 输入验证与错误处理 #

Add checks to ensure users have entered valid locations before making API calls, and handle errors gracefully (like invalid addresses, API quota limits, or network issues) to improve user experience.

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