计算距开始 Lat/Long 坐标和结束 Lat/Long 坐标给定距离的点的坐标

Question

目前我使用 Google 地图和融合表利用 Jquery 和 AJAX

在地图上绘制了线条

我需要的是沿着一条线绘制一个点。我有的是

一个。起始坐标样本 39.793147，-86.238922

乙。完成坐标示例 39.799276，-86.238922

C。从 Start 到 plot Point 样本的距离 500 米

D. (计算坐标) 39.797797,-86.238922

所以我的问题是什么是最好的或者我必须有什么选项才能计算 D。...示例是一条具有相同经度的直线，但实际上纬度和经度会有所不同。

替代场景示例例如 Start 39.793147, -86.238922 End 39.801703,-86.237062 或者该线可能有多个点

例如

<LineString><coordinates>-86.238922,39.793147 -86.238922,39.797797 -86.238829,39.800122 -86.237062,39.801703</coordinates></LineString>

我希望我已经解释了我想要实现的目标。这是否有可能在这两点之间绘制点和距离？

期待关于此的任何想法或示例。一如既往的感谢

Answer 1

一个选择是使用 Mike Williams' epoly library

中的 .GetPointAtDistance 函数

代码片段：

var map;

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

  var lineString = [
    [-86.238922, 39.793147],
    [-86.238922, 39.797797],
    [-86.238829, 39.800122],
    [-86.237062, 39.801703]
  ];
  var path = [];
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < lineString.length; i++) {
    var pt = new google.maps.LatLng(lineString[i][1], lineString[i][0]);
    bounds.extend(pt);
    path.push(pt);
  }
  var polyline = new google.maps.Polyline({
    map: map,
    path: path
  });
  map.fitBounds(bounds);
  var sMark = new google.maps.Marker({
    position: {
      lat: lineString[0][1],
      lng: lineString[0][0]
    },
    map: map,
    title: "Start",
    icon: "http://www.google.com/mapfiles/markerS.png"
  });
  var mark = new google.maps.Marker({
    position: polyline.GetPointAtDistance(500),
    map: map,
    title: "500m"
  });

}
google.maps.event.addDomListener(window, "load", initialize);

/*********************************************************************\
*                                                                     *
* epolys.js                                          by Mike Williams *
* updated to API v3                                  by Larry Ross    *
*                                                                     *
* A Google Maps API Extension                                         *
*                                                                     *
* Adds various Methods to google.maps.Polygon and google.maps.Polyline *
* .GetPointAtDistance() returns a GLatLng at the specified distance   *
*                   along the path.                                   *
*                   The distance is specified in metres               *
*                   Reurns null if the path is shorter than that      *
*                                                                     *
***********************************************************************
*                                                                     *
*   This Javascript is provided by Mike Williams                      *
*   Blackpool Community Church Javascript Team                        *
*   http://www.blackpoolchurch.org/                                   *
*   http://econym.org.uk/gmap/                                        *
*                                                                     *
*   This work is licenced under a Creative Commons Licence            *
*   http://creativecommons.org/licenses/by/2.0/uk/                    *
*                                                                     *
***********************************************************************
*                                                                     *
* Version 1.1       6-Jun-2007                                        *
* Version 1.2       1-Jul-2007 - fix: Bounds was omitting vertex zero *
*                                add: Bearing                         *
* Version 1.3       28-Nov-2008  add: GetPointsAtDistance()           *
* Version 1.4       12-Jan-2009  fix: GetPointsAtDistance()           *
* Version 3.0       11-Aug-2010  update to v3                         *
*                                                                     *
\*********************************************************************/

// === A method which returns a GLatLng of a point a given distance along the path ===
// === Returns null if the path is shorter than the specified distance ===
google.maps.Polygon.prototype.GetPointAtDistance = function(metres) {
  // some awkward special cases
  if (metres == 0) return this.getPath().getAt(0);
  if (metres < 0) return null;
  if (this.getPath().getLength() < 2) return null;
  var dist = 0;
  var olddist = 0;
  for (var i = 1;
    (i < this.getPath().getLength() && dist < metres); i++) {
    olddist = dist;
    dist += google.maps.geometry.spherical.computeDistanceBetween(this.getPath().getAt(i), this.getPath().getAt(i - 1));
  }
  if (dist < metres) {
    return null;
  }
  var p1 = this.getPath().getAt(i - 2);
  var p2 = this.getPath().getAt(i - 1);
  var m = (metres - olddist) / (dist - olddist);
  return new google.maps.LatLng(p1.lat() + (p2.lat() - p1.lat()) * m, p1.lng() + (p2.lng() - p1.lng()) * m);
}

// === Copy all the above functions to GPolyline ===
google.maps.Polyline.prototype.GetPointAtDistance = google.maps.Polygon.prototype.GetPointAtDistance;

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places"></script>
<div id="map_canvas"></div>

计算距开始 Lat/Long 坐标和结束 Lat/Long 坐标给定距离的点的坐标

Calculate coordinates of a point at a given distances from Start Lat/Long Coordinate and Finish Lat/Long Coordinate

jquery

ajax

google-maps

google-maps-api-3

google-fusion-tables