谷歌地图 - 绘制多条单独的折线答案

【问题标题】：Google maps - draw multiple separate polylines谷歌地图 - 绘制多条单独的折线
【发布时间】：2015-10-10 11:47:48
【问题描述】：

所以我试图在谷歌地图上绘制多条分离的折线。到目前为止我还没有这么多：

<script>
var center = new google.maps.LatLng(51.97559, 4.12565);
var map = new google.maps.Map(document.getElementById('map'), {
   center: center,
   zoom: 12,
   mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow({
    map: map
});  

var bounds = new google.maps.LatLngBounds();

// start coordinates
var start = ['51.97559, 4.12565', 
             '55.46242, 8.43872', 
             '49.49259, 0.1065',
             '50.36862, -4.13412']

// end coordinates
var end = ['51.94784, 1.2539', 
           '51.74784, 1.2539', 
           '50.79726, -1.11048',
           '43.45846, -3.80685']

function initialize() {
    for (var i=0; i < end.length; i++){
      calcRoute(start[i], end [i]);
    }
}

function calcRoute(source,destination){
  var polyline = new google.maps.Polyline({
     path: [],
     strokeColor: 'red',
     strokeWeight: 2,
     strokeOpacity: 1
  });

  polyline.setMap(map);          
}
</script>

我发现here 是一个有趣的例子，但它有DirectionsTravelMode，我只想要两点之间的直线。因此，在我的示例中，我希望在地图上绘制 4 条未连接的直线。

【问题讨论】：

你没有填充折线的路径
我不知道我应该用什么填充它：/
例如与source 和destination（尚不清楚预期结果应该是什么）path: [source,destination]

标签： google-maps google-polyline

【解决方案1】：

google.maps.LatLng 对象是两个数字；或者 google.maps.LatLngLiteral 是具有 lat 和 lng 属性的 javascript 对象，也不是字符串。

for (var i=0; i < end.length; i++){
  var startCoords = start[i].split(",");
  var startPt = new google.maps.LatLng(startCoords[0],startCoords[1]);
  var endCoords = end[i].split(",");
  var endPt = new google.maps.LatLng(endCoords[0],endCoords[1]);
  calcRoute(startPt, endPt);
  bounds.extend(startPt);
  bounds.extend(endPt);
}
map.fitBounds(bounds);

您需要将它们添加到折线的路径中：

function calcRoute(source,destination){
  var polyline = new google.maps.Polyline({
     path: [source, destination],
     strokeColor: 'red',
     strokeWeight: 2,
     strokeOpacity: 1
  });

  polyline.setMap(map);          
}

proof of concept fiddle

代码 sn-p：

var map;

function initialize() {

  var center = new google.maps.LatLng(51.97559, 4.12565);
  map = new google.maps.Map(document.getElementById('map'), {
    center: center,
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var infowindow = new google.maps.InfoWindow({});

  var bounds = new google.maps.LatLngBounds();

  // start coordinates
  var start = ['51.97559, 4.12565',
    '55.46242, 8.43872',
    '49.49259, 0.1065',
    '50.36862, -4.13412'
  ]

  // end coordinates
  var end = ['51.94784, 1.2539',
    '51.74784, 1.2539',
    '50.79726, -1.11048',
    '43.45846, -3.80685'
  ]

  for (var i = 0; i < end.length; i++) {
    var startCoords = start[i].split(",");
    var startPt = new google.maps.LatLng(startCoords[0], startCoords[1]);
    var endCoords = end[i].split(",");
    var endPt = new google.maps.LatLng(endCoords[0], endCoords[1]);
    calcRoute(startPt, endPt);
    bounds.extend(startPt);
    bounds.extend(endPt);
  }
  map.fitBounds(bounds);
}

function calcRoute(source, destination) {
  var polyline = new google.maps.Polyline({
    path: [source, destination],
    strokeColor: 'red',
    strokeWeight: 2,
    strokeOpacity: 1
  });

  polyline.setMap(map);
}

google.maps.event.addDomListener(window, "load", initialize);

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

【讨论】：

【解决方案2】：

geocodezip 的回答很好！

一个小的改进，您可以将所有路径放在一个多边形中，而不是在地图中添加许多折线元素（以后可能需要您跟踪它们并遍历所有元素以删除或更改它们）目的。

工作小提琴：http://jsfiddle.net/syoels/hyh81jfz/1/ （我拿了 geocodezip 的小提琴并做了一些小改动）

var geocoder;
var map;

function initialize() {

  var center = new google.maps.LatLng(51.97559, 4.12565);
  map = new google.maps.Map(document.getElementById('map'), {
    center: center,
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var bounds = new google.maps.LatLngBounds();

  // start coordinates
  var start = ['51.97559, 4.12565',
    '55.46242, 8.43872',
    '49.49259, 0.1065',
    '50.36862, -4.13412'
  ];

  // end coordinates
  var end = ['51.94784, 1.2539',
    '51.74784, 1.2539',
    '50.79726, -1.11048',
    '43.45846, -3.80685'
  ];

  var paths = [];

  for (var i = 0; i < end.length; i++) {
    var startCoords = start[i].split(",");
    var startPt = new google.maps.LatLng(startCoords[0], startCoords[1]);
    var endCoords = end[i].split(",");
    var endPt = new google.maps.LatLng(endCoords[0], endCoords[1]);
    paths.push([startPt, endPt]);

    bounds.extend(startPt);
    bounds.extend(endPt);
  }
  map.fitBounds(bounds);

  var polyline = new google.maps.Polygon({
    paths: paths,
    strokeColor: 'red',
    strokeWeight: 2,
    strokeOpacity: 1
  });

  polyline.setMap(map);

}


google.maps.event.addDomListener(window, "load", initialize);

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

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"></script>
<div id="map"></div>

【讨论】：