Javascript 谷歌地图中两个近点之间的曲线

可以在google maps中的两个近点之间绘制一条曲线（如测地线），例如使用以下坐标：

p1=（23.634501，-102.552783）

p2=（17.987557，-92.929147）

是否有javascript库来执行此操作？有可能控制直线的曲率吗

---

谢谢。

这是我找到的图书馆

死链

事实上，我刚刚发现Google map Polyline包含一个要构造的点列表。因此，你可以通过在多个点，使线看起来弯曲

---

PS:u可以使用下面2个链接中的“绘制圆弧”功能来获取绘制点列表

我最近想出了另一个解决方案，它不需要多段线，而是使用标记图标的路径值，可以动态计算

简而言之：您只需为从0到p2-p1的二次贝塞尔曲线创建一个SVG路径字符串，并将其作为标记图标附加到p1

长版本： 容器内的像素坐标可以通过调用

google.maps.Projection.fromLatLngToContainerPixel（）

获得。 二次贝塞尔曲线的字符串如下所示：

M [startX] [startY] q [controlX] [controlY] [endX] [endY]

我们将选择

（0,0）

作为起点，因为标记稍后将放置在该点上。

p2

的相对位置现在是

e=（p2.x-p1.x，p2.y-p1.y）

，相对位置 它们之间的中间点是

m=（e.x/2，e.y/2）

。到

e

的正交向量是

o=s*norm（-e.x/e.y，1）

，其中

s

是一些比例因子，其中

s=|e |/4

是一个良好的起点。我们现在有 具有

c=（m.x+o.x，m.y+o.y）

的控制点，路径为：

path = „M 0 0 q c.x c.y e.x e.y“

现在我们有了这个路径，我们可以简单地声明一个图标：

var icon = {
    path : path,
    fillOpacity : 0,//important
    scale : 1,
    strokeOpacity: //yours,
    strokeColor : //yours,
    strokeWeight : //yours,
    clickable : false //important
};

必须将

clickable

设置为false，否则曲线包围的区域将变为可单击，并且基础贴图将不会接收鼠标事件。现在我们可以在地图上添加一个标记 路径图标作为参数和p1的位置：

var marker = new google.maps.Marker({
    position : p1,
    icon : icon,
    map : map,
    clickable : false,
    zIndex : -100 //make the line appear behind ‚real’ markers
});

需要注意的几点：

• 正交o的比例因子符号决定弧的“方向”（“高于”或“低于”e）
• 如果缩放级别更改，则必须调整缩放比例 类似这样的图标：

  marker.icon.scale=1/2^（初始缩放-
  currentZoom）

  无需重新计算路径

样本：

相关代码：

var p1 = new google.maps.LatLng(23.634501, -102.552783);
var p2 = new google.maps.LatLng(17.987557, -92.929147);

var markerP1 = new google.maps.Marker({
    position: p1,
    map: map
});
var markerP2 = new google.maps.Marker({
    position: p2,
    map: map
});
google.maps.event.addListener(map, 'projection_changed', function () {
    var p1 = map.getProjection().fromLatLngToPoint(markerP1.getPosition());
    var p2 = map.getProjection().fromLatLngToPoint(markerP2.getPosition());
    var e = new google.maps.Point(p1.x - p2.x, p1.y - p2.y);
    var m = new google.maps.Point(e.x / 2, e.y / 2);
    var o = new google.maps.Point(0, 7);
    var c = new google.maps.Point(m.x + o.x, m.y + o.y);
    var curveMarker2 = new google.maps.Marker({
        position: markerP1.getPosition(),
        icon: {
            path: "M 0 0 q " + c.x + " " + c.y + " " + e.x + " " + e.y,
            scale: 24,
            strokeWeight: 2,
            fillColor: '#009933',
            fillOpacity: 0,
            rotation: 180,
            anchor: new google.maps.Point(0, 0)
        }
    });
    curveMarker2.setMap(map);
    google.maps.event.addListener(map, 'zoom_changed', function () {
        var zoom = map.getZoom();
        var scale = 1 / (Math.pow(2, -zoom));
        var icon = {
            path: "M 0 0 q " + c.x + " " + c.y + " " + e.x + " " + e.y,
            scale: scale,
            strokeWeight: 2,
            fillColor: '#009933',
            fillOpacity: 0,
            rotation: 180,
            anchor: new google.maps.Point(0, 0)
        };
        curveMarker2.setIcon(icon);
    });
});

---

这个问题似乎与你的有关-。谢谢，但我知道“测地线：true”生成测地线，但当两点之间的距离更近时，这不起作用，我想知道是否存在另一种方法。现在有一个本机布尔值“测地线”Google Maps多段线中的选项会自动执行此操作：将相关代码添加到此答案，再加上指向具有原始点的工作JSFIDLE的链接。它也有可拖动的标记，因此您可以使用不同的点和缩放来测试它。我正在尝试找出如何使用端点数组来实现这一点。其中P1是原点，P2和P3都是2个单独的（未连接）目的地。有什么建议我会怎么做？你怎么能在中间加上箭头？我得到了曲线，但我想不出一种方法在箭头的中心得到一个箭头。