Google在数组中绘制带有Lat Lng坐标的Polyline\Flight路径

Question

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

数组位置包含坐标Home和其他位置。我可以使用数组中的坐标删除标记，接下来我需要做的是在Home -> Location 1、Home -> Location 2...and等之间做多行。

--------------------------
<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、i到特定数组对象的位置可以工作，因此，使用变量可能无法处理数组对象的情况似乎是一样的。

变量端点= {"lat"：locations2，"long"：locations2}；

Answer 1

你们关系很好。您需要在标记创建循环中移动if i > 0测试。我发现使用标记来检索多行开始和结束的坐标比较简单。

概念小提琴的证明

代码片段：

​

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

对于任何使用这个伟大的反应-地图实现的用户，请使用：

    <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>