在谷歌地图中显示许多已定义路线的路线答案

【问题标题】：Display many routes in google maps from already defined routes在谷歌地图中显示许多已定义路线的路线
【发布时间】：2019-05-28 15:43:46
【问题描述】：

我需要在谷歌地图中映射已在我的变量 testf 中定义的路线。我需要从点 Id 1 到点 Id 2 绘制一条路线，然后从点 Id 3 到点 Id 4 绘制另一条路线，即每对点的路线不同，怎么办？我无法通过包含所有这些点的变量让谷歌地图了解如何从起点读取到终点。这只是我无法工作的javascript部分：

var testef = [{
"Id": 1,
"Latitude": 38.726177,
"Longitude": -9.180716
},
{
"Id": 2,
"Latitude": 38.716177,
"Longitude": -9.170716
},
{
"Id": 3,
"Latitude": 38.736177,
"Longitude": -9.160716
},
 {
"Id": 4,
"Latitude": 38.729177,
"Longitude": -9.110716
 }];

 //traçando a rota
for(var k=0; k < testef.length; k++){
    var objk=testef[k];

    var mypath = new google.maps.LatLng(objk.Latitude,objk.Longitude);

    var teste = new google.maps.Polyline({
        path: mypath,
        geodesic: true,
        strokeColor: '#ff0000',
        strokeOpacity: 1.0,
        strokeWeight: 3
    });
} 

  teste.setMap(map);

我希望画出几条已经定义好的路线

【问题讨论】：

标签： javascript google-maps routes

【解决方案1】：

我在贴出的代码中收到一个 javascript 错误：InvalidValueError: not an Array，因为 mypath 的值不是数组。

从数组中成对创建点，用每组点创建一个数组（每个点段的路径）：

for (var k = 0; k < testef.length-1; k+=2) {
    // start of segment
    var objk = testef[k];
    var pt = new google.maps.LatLng(objk.Latitude, objk.Longitude);
    // end of segment 
    var objkp1 = testef[k+1];
    var pt1 = new google.maps.LatLng(objkp1.Latitude, objkp1.Longitude);
    // create the path for this segment
    var mypath = [pt, pt1];
    // create the polyline for this segment
    var teste = new google.maps.Polyline({
      path: mypath,
      geodesic: true,
      strokeColor: '#ff0000',
      strokeOpacity: 1.0,
      strokeWeight: 3
    });
    // add this segment to the map
    teste.setMap(map);
}

proof of concept fiddle

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

  //traçando a rota
  var bounds = new google.maps.LatLngBounds();
  for (var k = 0; k < testef.length - 1; k += 2) {
    var objk = testef[k];
    var pt = new google.maps.LatLng(objk.Latitude, objk.Longitude);
    bounds.extend(pt);
    var objkp1 = testef[k + 1];
    var pt1 = new google.maps.LatLng(objkp1.Latitude, objkp1.Longitude);
    bounds.extend(pt1);
    var mypath = [pt, pt1];
    var teste = new google.maps.Polyline({
      path: mypath,
      geodesic: true,
      strokeColor: '#ff0000',
      strokeOpacity: 1.0,
      strokeWeight: 3
    });
    teste.setMap(map);
  }
  map.fitBounds(bounds);
}
var testef = [{
    "Id": 1,
    "Latitude": 38.726177,
    "Longitude": -9.180716
  },
  {
    "Id": 2,
    "Latitude": 38.716177,
    "Longitude": -9.170716
  },
  {
    "Id": 3,
    "Latitude": 38.736177,
    "Longitude": -9.160716
  },
  {
    "Id": 4,
    "Latitude": 38.729177,
    "Longitude": -9.110716
  }
];

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>

【讨论】：