Создание нескольких составных полилиний на карте Google с разными цветами

Хотите создать несколько маршрутов из пункта A в пункт B с помощью полилиний на карте Google. У меня возникла проблема с присвоением цвета двум полилиниям, наложенным друг на друга. Основное использование - показать прогресс в маршруте, пройденном от A до B, при этом тот, который уже был покрыт оранжевым, а левый маршрут - серым.

Я могу придать цвет только одной ломаной линии. Другая наложенная полилиния не видна даже при уменьшении непрозрачности верхней полилинии.

См. JSfiddle- https://jsfiddle.net/8yx3vLo6/3/

Я могу придать цвет только одной ломаной линии. Другая наложенная / сложенная полилиния не видна, даже если непрозрачность верхней полилинии уменьшена.

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);

}

google-maps google-polyline
person Developer Togglers    schedule 01.08.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В настоящее время у вас есть 2 карты (map и map1). Одна ломаная линия находится на map, другая на map1. Первое, что вам нужно сделать, это нанести каждую полилинию на одну и ту же карту.

Чтобы вы могли видеть оба, поместите один поверх другого, так чтобы у того, что было сверху, было меньше обводки.

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);

проверка концепции, скрипка

снимок экрана полученной карты

фрагмент кода:

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>

person geocodezip    schedule 01.08.2019
comment
Если это ответило на ваш вопрос, пожалуйста, примите его - person geocodezip; 02.08.2019