在 Polyline 上获得积分

Question

我使用 Google 地图 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 objects as arguments, not 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>

在 Polyline 上获得积分

Get points on Polyline

google-maps

google-api

google-api-js-client