Cree múltiples polilíneas apiladas en el mapa de Google con diferentes colores

3 minutos de lectura

Buscando crear múltiples rutas desde la ubicación a hasta la ubicación B usando polilíneas en el mapa de Google. Tengo problemas para dar colores a dos polilíneas apiladas una sobre la otra. El uso básico es mostrar el progreso en la ruta recorrida de A a B con la ruta ya cubierta en naranja y la ruta izquierda en color gris.

Solo puedo dar color a una polilínea. La otra polilínea superpuesta no se ve incluso cuando se reduce la opacidad de la polilínea superior.

Ver JSfiddle- https://jsfiddle.net/8yx3vLo6/3/

Solo puedo dar color a una polilínea. La otra polilínea superpuesta/apilada no se ve incluso cuando se reduce la opacidad de la polilínea superior.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: 0, lng: -180},
    mapTypeId: 'terrain'
  });

  var flightPlanCoordinates = [
    {lat: 37.772, lng: -122.220},
    {lat: 21.291, lng: -160.821},
    {lat: -18.142, lng: 178.431},
    {lat: -27.467, lng: 153.027}
  ];

  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: 'red',
    strokeOpacity: 1.0,
    strokeWeight: 1
  });


  flightPath.setMap(map);
  var map1 = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: 0, lng: -180},
    mapTypeId: 'terrain'
  });

  var flightPlanCoordinates1 = [
    {lat: 17.772, lng: -35.220},
    {lat: 21.291, lng: -160.821},
    {lat: -18.142, lng: 178.431},
    {lat: -27.467, lng: 153.027}
  ];

  var flightPath1 = new google.maps.Polyline({
    path: flightPlanCoordinates1,
    geodesic: true,
    strokeColor: '#000',
    strokeOpacity: 1,
    strokeWeight: 1
  });


  flightPath1.setMap(map1);

}

Actualmente tienes 2 mapas (map y map1). Una polilínea está activada map el otro en map1. Lo primero que debe hacer es colocar cada polilínea en el mismo mapa.

Para que puedas ver ambos, pon uno encima del otro, con el de arriba con un trazo más pequeño.

var flightPlanCoordinates = [
  {lat: 37.772, lng: -122.220},
  {lat: 21.291, lng: -160.821},
  {lat: -18.142, lng: 178.431},
  {lat: -27.467, lng: 153.027}
];  
var flightPath = new google.maps.Polyline({
  path: flightPlanCoordinates,
  geodesic: true,
  strokeColor: 'yellow',
  strokeOpacity: 1.0,
  strokeWeight: 6  // first polyline added is on bottom, make stroke bigger
});
flightPath.setMap(map);

var flightPlanCoordinates1 = [
  {lat: 37.772, lng: -122.220},
  {lat: 21.291, lng: -160.821},
  {lat: -18.142, lng: 178.431},
  {lat: -27.467, lng: 153.027}
];
var flightPath1 = new google.maps.Polyline({
  path: flightPlanCoordinates1,
  geodesic: true,
  strokeColor: 'blue',
  strokeOpacity: 1.0,
  strokeWeight: 2  // second polyline added is on top, make stroke smaller
});
flightPath1.setMap(map);

violín de prueba de concepto

captura de pantalla del mapa resultante

fragmento de código:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {
      lat: 0,
      lng: -180
    },
    mapTypeId: 'terrain'
  });

  var flightPlanCoordinates = [
    {lat: 37.772, lng: -122.220},
    {lat: 21.291, lng: -160.821},
    {lat: -18.142, lng: 178.431},
    {lat: -27.467, lng: 153.027}
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: 'yellow',
    strokeOpacity: 1.0,
    strokeWeight: 6  // first polyline added is on bottom, make stroke bigger
  });
  flightPath.setMap(map);

  var flightPlanCoordinates1 = [
    {lat: 37.772, lng: -122.220},
    {lat: 21.291, lng: -160.821},
    {lat: -18.142, lng: 178.431},
    {lat: -27.467, lng: 153.027}
  ];
  var flightPath1 = new google.maps.Polyline({
    path: flightPlanCoordinates1,
    geodesic: true,
    strokeColor: 'blue',
    strokeOpacity: 1.0,
    strokeWeight: 2  // second polyline added is on top, make stroke smaller
  });
  flightPath1.setMap(map);
  var bounds = new google.maps.LatLngBounds();
  bounds.extend(flightPlanCoordinates1[0]);
  bounds.extend(flightPlanCoordinates1[3]);
  map.fitBounds(bounds);
}
html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

  • Si esto respondió a su pregunta, por favor acéptela.

    – geocodezip

    2 de agosto de 2019 a las 13:56

¿Ha sido útil esta solución?