Question

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

数组位置包含坐标Home和其他位置。我能够使用数组中的坐标来删除标记，接下来我需要做的是在Home - ＆gt;之间做折线。位置1，首页 - ＆gt;位置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 = {＆＃34; lat＆＃34 ;: locations [2] [1]，＆＃34; long＆＃34 ;: locations [2] [2]};

Answer 1

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

proof of concept fiddle

代码段

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>

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

2 个答案: