Google Maps API - 在数组中使用 Lat Lng 坐标绘制折线\飞行路径

Question

关于如何在标记之间绘制折线的任何想法，其中 lat lng 坐标在数组中。

数组位置包含坐标 Home 和其他位置。我可以使用数组中的坐标来放置标记，接下来我需要做的是在 Home -> Location 1、Home -> Location 2 之间做折线……等等。

--------------------------
<script
var locations =[
            //Starting Point is "Home", and links to other locations"//
            ['Home', 37.774930, -122.419416],
            ['Location-1', 35.689487, 139.691706],
            ['Location-2', 48.856614, 2.352222],
            ['Location-3', -33.867487, 151.206990]
            ]   
function initMap() {
    var myLatLng = {lat: 12.363, lng: -131.044};
    var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: {lat:0,lng:0}
    }); 
    var markers = new Array();
    // Add the markers and infowindows to the map
    for (var i = 0; i < locations.length; i++) {  
        var marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        title:locations[i][0],
        map: map
        })
    }
    if (i > 0){
    var startpoint = {"lat": locations[0][1], "long": locations[0][2]};
    var endpoint = {"lat": locations[i][1], "long": locations[i][2]};
    var locationlinks = [   
        new google.maps.LatLng(startpoint.lat, startpoint.long),
        new google.maps.LatLng(endpoint.lat, endpoint.long)
    ];
    var sitepath = new google.maps.Polyline({
        path: locationlinks,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
    };
    sitepath.setMap(map);
}   
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBX8Q6FDpU0K9nkVCN7PpxSFybF-2FQem0&callback=initMap"></script>    

---

作为测试更改，特定数组对象的位置 [i][1]、[i][2] 有效，因此看起来可能不适用于数组对象的变量。

var endpoint = {"lat":locations[2][1], "long":locations[2][2]};

---

Answer 1

你很接近。您需要在标记创建循环内移动 if i > 0 测试。 我发现使用标记来检索折线起点和终点的坐标更简单。

proof of concept fiddle

代码 sn-p：

var locations = [
  //Starting Point is "Home", and links to other locations"//
  ['Home', 37.774930, -122.419416],
  ['Location-1', 35.689487, 139.691706],
  ['Location-2', 48.856614, 2.352222],
  ['Location-3', -33.867487, 151.206990]
]

function initMap() {
  var myLatLng = {
    lat: 12.363,
    lng: -131.044
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: {
      lat: 0,
      lng: 0
    }
  });
  var markers = [];
  var bounds = new google.maps.LatLngBounds();
  // Add the markers and infowindows to the map
  for (var i = 0; i < locations.length; i++) {
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      title: locations[i][0],
      map: map
    })
    markers.push(marker); // push the marker onto the array
    bounds.extend(marker.getPosition());
    if (i > 0) { // move this inside the marker creation loop
      var sitepath = new google.maps.Polyline({
        // use the markers in for the coordinates
        path: [markers[0].getPosition(), marker.getPosition()],
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2,
        map: map
      });
    }
  }
  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initMap);

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>

Answer 2

对于任何使用this great react-maps的实现使用：

    <GoogleMap
        ...props, markers, etc...
        <Polyline
            path = {[{ lat: lat, lng: lng },{ lat: lat, lng: lng }]}
            options={{
                geodesic: true,
                strokeColor: '#0c3351',
                strokeOpacity: 1.0,
                strokeWeight: 2
            }}
        />
   </GoogleMap>