Javascript 使用jQuery在谷歌地图上的两点之间画一条线？

如何使用jQuery或Javascript使用GoogleMapAPI在两点（纬度和经度）之间画一条线？我需要两点之间的最短路径。它可以是任何类型的线。

仅适用于API v2

以下代码段在两点之间创建一条10像素宽的红色多段线：

var polyline = new GPolyline([
  new GLatLng(37.4419, -122.1419),
  new GLatLng(37.4519, -122.1519)],
  "#ff0000", 10);
map.addOverlay(polyline);

---

您可以找到文档

这里有一个API v3绘制线条的方法

var line = new google.maps.Polyline({
    path: [
        new google.maps.LatLng(37.4419, -122.1419), 
        new google.maps.LatLng(37.4519, -122.1519)
    ],
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 10,
    map: map
});

这只是在两点之间画一条直线。如果你想让它成为最短的路径，你需要考虑地球是弯曲的，并画一条测地线。为此，您必须使用Google Maps API中的几何体库，方法是添加此可选库参数：

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry"></script>

---

这在两个点之间画了一条线…和更远处。您只需在搜索框中输入新位置，搜索框将继续绘制最近两点之间的点：

var polyline = new GPolyline([
  new GLatLng(37.4419, -122.1419),
  new GLatLng(37.4519, -122.1519)],
  "#ff0000", 10);
map.addOverlay(polyline);

HTML:

<div id="inputDiv">
    <input id="startvalue" type="text" width="90" value="" autofocus placeholder="Keep Adding Places and searching...">
</div>
<div id="map"></div>
<div id="results"></div>

#map {
    margin: 0;
    padding: 0;
    height: 400px;
    margin-top:30px;
   width:100%;
}

#inputDiv{
    position:absolute;
    top:0;
}

#startvalue{
  width:300px;
  padding:8px;
}

---

您想要一条“直线”还是一条沿着道路的直线？这是针对API v2的，该版本已弃用，将于2013年5月停止使用。强烈建议不要使用此选项，而是使用API v3。请参阅此链接：指向文档的链接将是金色的。输入应该是什么样子的？什么是地方？一个很长的点？

#map {
    margin: 0;
    padding: 0;
    height: 400px;
    margin-top:30px;
   width:100%;
}

#inputDiv{
    position:absolute;
    top:0;
}

#startvalue{
  width:300px;
  padding:8px;
}