在Google地图中显示来自已定义路线的许多路线

时间:2019-05-28 15:43:46

标签: javascript google-maps routes

我需要在Google地图中映射我的变量testf中已经定义的路线。我需要跟踪从点1到点2的路线,然后绘制从点3到点4的另一条路线,即每对点的路线不同,怎么办?我无法通过传递包含所有这些点的变量来使Google Maps了解如何从起点到终点进行读取。这只是JavaScript中我无法完成的部分:

a = ['', 'word', 'three', '', 'five']
b = []

for x in a:
    if len(x) > 1:
        b.append(a)

我希望画出一些已经定义的路线

1 个答案:

答案 0 :(得分:0)

由于发布的代码InvalidValueError: not an Array,我收到了一个JavaScript错误,因为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

screenshot of resulting map

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>