基于Google Maps API的实时用户追踪及路线保存问题咨询

Hey there, let's tackle your two Google Maps API issues one by one with practical, actionable solutions:

1. Fix: Selected route resets to first option on page refresh #

The root cause here is that your app doesn't persist the user's route selection between page loads. We can solve this by saving the selected route's identifier to either localStorage or a URL query parameter, then loading that value on page initialization.

Option 1: Use localStorage for persistent selection #

This keeps the selection tied to the user's browser:

// When fetching directions from the API
directionsService.route(request, (result, status) => {
  if (status === 'OK') {
    // Render all route options for the user to pick
    const routeOptionsContainer = document.getElementById('route-options');
    result.routes.forEach((route, index) => {
      const routeBtn = document.createElement('button');
      routeBtn.textContent = `Route ${index + 1}: ${route.summary}`;
      routeBtn.addEventListener('click', () => {
        // Save the selected route index to localStorage
        localStorage.setItem('selectedRouteIndex', index);
        // Render only the chosen route
        directionsRenderer.setDirections({ routes: [route] });
      });
      routeOptionsContainer.appendChild(routeBtn);
    });

    // On page load, check for saved selection
    const savedIndex = localStorage.getItem('selectedRouteIndex');
    if (savedIndex !== null) {
      const selectedRoute = result.routes[parseInt(savedIndex)];
      directionsRenderer.setDirections({ routes: [selectedRoute] });
    } else {
      // Fallback to first route if no selection exists
      directionsRenderer.setDirections(result);
    }
  }
});

Option 2: Use URL query parameters for shareable selections #

This is useful if you want users to share their selected route via a link:

// When user selects a route
routeBtn.addEventListener('click', () => {
  // Update URL with selected route index
  const url = new URL(window.location);
  url.searchParams.set('routeIndex', index);
  window.history.pushState({}, '', url);
  
  // Render the chosen route
  directionsRenderer.setDirections({ routes: [route] });
});

// On page load, read from URL parameters
window.addEventListener('load', () => {
  const urlParams = new URLSearchParams(window.location.search);
  const routeIndex = urlParams.get('routeIndex');
  
  if (routeIndex !== null && result) {
    const selectedRoute = result.routes[parseInt(routeIndex)];
    directionsRenderer.setDirections({ routes: [selectedRoute] });
  }
});

2. Implement admin user tracking by user ID #

This requires a full stack approach (client → backend → admin dashboard) to securely track and retrieve user locations:

Step 1: User-side position reporting #

Use navigator.geolocation.watchPosition (more efficient than setInterval) to send location updates to your backend:

// User-side: Start tracking and sending location
const watchId = navigator.geolocation.watchPosition(
  (position) => {
    // Send location to your backend API
    fetch('/api/user/location', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${userAuthToken}` // Validate user identity
      },
      body: JSON.stringify({
        userId: currentLoggedInUserId,
        lat: position.coords.latitude,
        lng: position.coords.longitude,
        timestamp: new Date().toISOString()
      })
    });
  },
  (error) => console.error('Location fetch failed:', error),
  { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }
);

// Stop tracking when needed (e.g., user logs out)
// navigator.geolocation.clearWatch(watchId);

Step 2: Backend setup #

• Store user location data in a database (e.g., a table with userId, lat, lng, timestamp).
• Create an admin-only API endpoint to fetch a user's latest location (or location history) by userId.
• Add strict permission checks to ensure only authenticated admins can access this endpoint.

Step 3: Admin dashboard tracking #

Fetch and display the user's location on Google Maps:

// Admin-side: Fetch and render a user's location
function trackUser(userId) {
  fetch(`/api/admin/user/${userId}/location`, {
    method: 'GET',
    headers: { 'Authorization': `Bearer ${adminAuthToken}` } // Validate admin identity
  })
  .then(res => res.json())
  .then(data => {
    const userLatLng = new google.maps.LatLng(data.lat, data.lng);
    
    // Add a marker for the user's current location
    new google.maps.Marker({
      position: userLatLng,
      map: adminMap,
      title: `User ${userId} - Last updated: ${data.timestamp}`
    });
    
    // Optional: Draw a path of the user's location history
    if (data.history) {
      const path = data.history.map(point => new google.maps.LatLng(point.lat, point.lng));
      new google.maps.Polyline({
        path: path,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
      }).setMap(adminMap);
    }
    
    // Center the map on the user's location
    adminMap.setCenter(userLatLng);
  })
  .catch(err => console.error('Failed to fetch user location:', err));
}

// Refresh location every 30 seconds for real-time tracking
setInterval(() => {
  if (currentTrackedUserId) trackUser(currentTrackedUserId);
}, 30000);

Key Notes: #

• Privacy & Compliance: Ensure you have user consent for tracking, and comply with regulations like GDPR or CCPA.
• Security: Never expose sensitive user data publicly—always validate admin permissions on the backend.
• Efficiency: Adjust location update frequency based on your use case (e.g., every 10-60 seconds) to avoid excessive API calls or data usage.

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