如何在Google Maps中为每条路线随机设置折线颜色

First, let's fix a couple of key issues in your original code:

• The tripdata array has invalid syntax—you can't mix key-value pairs like id:1 directly in an array. We need to structure it to group each route (by id) with its own set of coordinates.
• There's a typo in mapTypeId: google.maps.MapTypeId.TERRAINr (extra 'r' at the end).

Here's the revised implementation that generates a unique random color for each route:

// Initialize the map
var mapOptions = {
  zoom: 6,
  center: new google.maps.LatLng(20.59, 78.96),
  mapTypeId: google.maps.MapTypeId.TERRAIN // Fixed typo here
};
$scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);

// Step 1: Fix the trip data structure to group routes by ID
// Each entry represents a unique route with its own coordinates
const tripData = [
  {
    id: 1,
    path: [
      { lat: 23.333, lng: 87.777 },
      { lat: 23.444, lng: 87.888 }, // Add more points to form a visible line
      { lat: 23.555, lng: 87.999 }
    ]
  },
  {
    id: 2,
    path: [
      { lat: 24.343, lng: 78.876 },
      { lat: 24.454, lng: 78.987 },
      { lat: 24.565, lng: 79.098 }
    ]
  }
];

// Step 2: Helper function to generate random hex colors
function getRandomColor() {
  const hexChars = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    // Pick a random character from the hexChars string
    color += hexChars[Math.floor(Math.random() * 16)];
  }
  return color;
}

// Step 3: Loop through each route and create a polyline with a random color
tripData.forEach(route => {
  const vehiclePath = new google.maps.Polyline({
    path: route.path, // Use the coordinates for this specific route
    geodesic: true,
    strokeColor: getRandomColor(), // Assign random color
    strokeOpacity: 1.0,
    strokeWeight: 2,
    map: $scope.map
  });
  
  // Optional: Store the polyline reference if you need to modify it later
  route.polyline = vehiclePath;
});

Key Improvements: #

• Structured Data: Each route is now an object with an id and path array, making it easy to handle multiple routes.
• Random Color Generation: The getRandomColor() function creates a unique hex color for each polyline.
• Loop Through Routes: We iterate over each route in tripData, creating a separate polyline for each with its own color.

If you want to ensure colors are consistent for the same route ID (instead of random every time), you could modify the helper function to generate a color based on the route ID (e.g., hash the ID to a hex value). But for purely random colors per route, the above code works perfectly.

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