javascript - 如何拥有多色折线谷歌地图

Question

我正在尝试在谷歌地图 API V3 上使用多色折线。我在 Stack Overflow 上遵循了一些示例，但它们不起作用。线条保持一种颜色。我尝试过的解决方案:Use Google maps API to draw a polyline that changes color

我所做的另一次尝试如下。如何根据数组的每 4 个对象使其具有多种颜色。

代码:

var poly = [];
p.Cot= [-37.0128,174.783465,250.0,0.0,-37.015091,174.775124,250.0,0.0,-37.015503,174.773488,250.0,500.0,-37.016876,174.768229,250.0,500.0,-37.017315,174.766627,250.0,1000.0,-37.021365,174.751222,250.0,1000.0,-37.022576,174.748057,240.0,1500.0,-37.023331,174.746665,235.0,1500.0,-37.024531,174.744833,230.0,1500.0,-37.024717,174.744535,230.0,1500.0,-37.025648,174.74352,225.0,1500.0,-37.027954,174.741464,210.0,1500.0,-37.030746,174.739828,205.0,1500.0,-37.034088,174.738309,200.0,2000.0,-37.036102,174.737432,200.0,2000.0,-37.037612,174.736832,195.0,2000.0,-37.046402,174.733926,195.0,2000.0,-37.049111,174.73313,190.0,2000.0,-37.050647,174.732772,190.0,2000.0,-37.054092,174.731939,190.0,2500.0,-37.065125,174.729548,190.0,2500.0,-37.068237,174.728958,190.0,3000.0,-37.07309,174.728023,190.0,3000.0,-37.074921,174.727673,190.0,3500.0,-37.081696,174.726387,190.0,3500.0,-37.083047,174.726145,190.0,4000.0,-37.090542,174.724652,190.0,4000.0]}];

for (var j = 0; j < p.Cot.length; j += 4) {
  var pos = new google.maps.LatLng(p.Cot[j], p.Cot[j + 1]);
  poly.push(pos);
  var alt = p.Cot[j + 3];
  console.log(alt);
  var isground = (alt < 1);
  var is1000 = (alt > 2 && alt < 1000);
  var is5000 = (alt > 1000 && alt < 5000);
  var is30000 = (alt > 30000);
  polyline = new google.maps.Polyline({
    path: poly,
    geodesic: true,
    strokeColor: (isground ? '#ffffff' : is1000 ? '#ffff00' : is5000 ? '#00FF00' : is30000 ? '#ff0000' : '#000000'),
    strokeOpacity: 1.0,
    strokeWeight: 2,
    map: Map
  });
}

Answer 1

为需要不同颜色的每个线段创建单独的折线:

for (var j = 0; j < p.Cot.length-4; j += 4) {
  var pos = new google.maps.LatLng(p.Cot[j], p.Cot[j + 1]);
  var pos2 = new google.maps.LatLng(p.Cot[j+4], p.Cot[j + 5]);
  poly.push(pos);
  var alt = p.Cot[j + 3];
  console.log(alt);
  var isground = (alt < 1);
  var is1000 = (alt > 2 && alt < 1000);
  var is5000 = (alt > 1000 && alt < 5000);
  var is30000 = (alt > 30000);
  var color = (isground ? '#ffffff' : is1000 ? '#ffff00' : is5000 ? '#00FF00' : is30000 ? '#ff0000' : '#000000');
  console.log(color);
  polyline = new google.maps.Polyline({
    path: [pos, pos2],
    geodesic: true,
    strokeColor: color,
    strokeOpacity: 1.0,
    strokeWeight: 2,
    map: Map
  });
}

proof of concept fiddle

代码片段:

function initialize() {
  var Map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var bounds = new google.maps.LatLngBounds();

  var poly = [];
  var p = {};
  p.Cot = [-37.0128, 174.783465, 250.0, 0.0, -37.015091, 174.775124, 250.0, 0.0, -37.015503, 174.773488, 250.0, 500.0, -37.016876, 174.768229, 250.0, 500.0, -37.017315, 174.766627, 250.0, 1000.0, -37.021365, 174.751222, 250.0, 1000.0, -37.022576, 174.748057, 240.0, 1500.0, -37.023331, 174.746665, 235.0, 1500.0, -37.024531, 174.744833, 230.0, 1500.0, -37.024717, 174.744535, 230.0, 1500.0, -37.025648, 174.74352, 225.0, 1500.0, -37.027954, 174.741464, 210.0, 1500.0, -37.030746, 174.739828, 205.0, 1500.0, -37.034088, 174.738309, 200.0, 2000.0, -37.036102, 174.737432, 200.0, 2000.0, -37.037612, 174.736832, 195.0, 2000.0, -37.046402, 174.733926, 195.0, 2000.0, -37.049111, 174.73313, 190.0, 2000.0, -37.050647, 174.732772, 190.0, 2000.0, -37.054092, 174.731939, 190.0, 2500.0, -37.065125, 174.729548, 190.0, 2500.0, -37.068237, 174.728958, 190.0, 3000.0, -37.07309, 174.728023, 190.0, 3000.0, -37.074921, 174.727673, 190.0, 3500.0, -37.081696, 174.726387, 190.0, 3500.0, -37.083047, 174.726145, 190.0, 4000.0, -37.090542, 174.724652, 190.0, 4000.0];

  for (var j = 0; j < p.Cot.length - 4; j += 4) {
    var pos = new google.maps.LatLng(p.Cot[j], p.Cot[j + 1]);
    var pos2 = new google.maps.LatLng(p.Cot[j + 4], p.Cot[j + 5]);
    bounds.extend(pos);
    poly.push(pos);
    var alt = p.Cot[j + 3];
    console.log(alt);
    var isground = (alt < 1);
    var is1000 = (alt > 2 && alt < 1000);
    var is5000 = (alt > 1000 && alt < 5000);
    var is30000 = (alt > 30000);
    var color = (isground ? '#ffffff' : is1000 ? '#ffff00' : is5000 ? '#00FF00' : is30000 ? '#ff0000' : '#000000');
    console.log(color);
    polyline = new google.maps.Polyline({
      path: [pos, pos2],
      geodesic: true,
      strokeColor: color,
      strokeOpacity: 1.0,
      strokeWeight: 2,
      map: Map
    });
  }
  Map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>