google-maps - 在谷歌地图上创建多条不同颜色的堆叠折线

问题描述

希望使用谷歌地图上的折线创建从位置 a 到位置 B 的多条路线。我在为两条相互堆叠的折线赋予颜色时遇到问题。基本用途是显示从 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-mapsgoogle-polyline

您目前有 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>

google-maps - 在谷歌地图上创建多条不同颜色的堆叠折线

问题描述

解决方案

推荐阅读