如何用多个标记和多条折线绘制折线？答案

【问题标题】：How to draw poly-line with multiple marker and multiple poly-line?如何用多个标记和多条折线绘制折线？
【发布时间】：2018-03-08 12:50:31
【问题描述】：

我想从一个标记绘制多段线到多个标记，并绑定到它们的标记。类似于此example。在此示例中，所有多段线都相互连接。我想将所有折线分开。我有一组纬度和经度数组。我想用不同的折线绘制每个数组并将它们与受尊重的标记绑定。

{
    "polyline1": [
        [25.774252, -80.190262],
        [18.466465, -66.118292],
        [32.321384, -64.75737]
    ],
    "polyline2": [

        [32.321384, -64.75737],
        [36.321384, -88.75737]
    ],
    "polyline3": [

        [20.466465, -68.118292],
        [34.321384, -66.75737],
        [27.774252, -82.190262]
    ]
}

【问题讨论】：

标签： javascript google-maps google-maps-api-3 google-maps-markers google-polyline

【解决方案1】：

希望这会有所帮助：

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 1,
    center: {lat: 24.886, lng: -70.268},
    mapTypeId: 'terrain'
  });

  var polyline1 = [
    {lat: 25.774252, lng: -80.190262},
    {lat: 18.466465, lng: -66.118292},
    {lat: 32.321384, lng: -64.75737}
  ];

  var polyline2 = [
    {lat: 32.321384, lng: -64.75737},
    {lat: 36.321384, lng: -88.75737}
  ];
  
  var polyline3 = [
    {lat:20.466465 , lng: -68.118292},
    {lat: 34.321384, lng:-66.75737 },
    {lat: 27.774252, lng: -82.190262}
  ];

 
  new google.maps.Polygon({
    map: map,
    paths: polyline1,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    geodesic: true
  });

  new google.maps.Polygon({
    map: map,
    paths: polyline2,
    strokeColor: '#0000FF',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#0000FF',
    fillOpacity: 0.35,
    geodesic: false
  });
  
  new google.maps.Polygon({
    map: map,
    paths: polyline3,
    strokeColor: '#0000FF',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#0000FF',
    fillOpacity: 0.35,
    geodesic: false
  });
}

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  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?callback=initMap">
</script>

【讨论】：