在折线上获得积分

Question

我使用Google Maps API as seen in this example在两点之间绘制了折线。现在我想在同一行生成附加点。有没有这样做的功能？

我不想在线上添加一些随机点;我希望这些点位于两个端点之间生成的曲线上。

Answer 1

您可以使用interpolate function of the spherical geometry library计算线条任何线段上某点的位置：

var marker2 = new google.maps.Marker({
  map: map,
  position: google.maps.geometry.spherical.interpolate(
    new google.maps.LatLng(flightPlanCoordinates[1].lat,flightPlanCoordinates[1].lng),
    new google.maps.LatLng(flightPlanCoordinates[2].lat,flightPlanCoordinates[2].lng),
    0.6)
});

（请注意，插值函数仅接受google.maps.LatLng个对象作为参数，而不是google.maps.LatLngLiterals，至少在此时

proof of concept fiddle

代码段

// This example creates a 2-pixel-wide red polyline showing the path of William
// Kingsford Smith's first trans-Pacific flight between Oakland, CA, and
// Brisbane, Australia.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {
      lat: 0,
      lng: -180
    },
    mapTypeId: 'terrain'
  });

  var flightPlanCoordinates = [{
    lat: 37.772,
    lng: -122.214
  }, {
    lat: 21.291,
    lng: -157.821
  }, {
    lat: -18.142,
    lng: 178.431
  }, {
    lat: -27.467,
    lng: 153.027
  }];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });
  var marker = new google.maps.Marker({
    map: map,
    position: google.maps.geometry.spherical.interpolate(new google.maps.LatLng(flightPlanCoordinates[0].lat, flightPlanCoordinates[0].lng), new google.maps.LatLng(flightPlanCoordinates[1].lat, flightPlanCoordinates[1].lng), 0.75)
  });
  var marker2 = new google.maps.Marker({
    map: map,
    position: google.maps.geometry.spherical.interpolate(new google.maps.LatLng(flightPlanCoordinates[1].lat, flightPlanCoordinates[1].lng), new google.maps.LatLng(flightPlanCoordinates[2].lat, flightPlanCoordinates[2].lng), 0.6)
  });
  var marker3 = new google.maps.Marker({
    map: map,
    position: google.maps.geometry.spherical.interpolate(new google.maps.LatLng(flightPlanCoordinates[2].lat, flightPlanCoordinates[2].lng), new google.maps.LatLng(flightPlanCoordinates[3].lat, flightPlanCoordinates[3].lng), 0.8)
  });


  flightPath.setMap(map);
}

/* 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>
<script async defer src="https://maps.googleapis.com/maps/api/js?libraries=geometry&callback=initMap">
</script>