Question

可以在谷歌地图中的两个近点之间绘制曲线（如测地线），例如使用这些坐标：

p1 =（23.634501，-102.552783）

p2 =（17.987557，-92.929147）

有没有javascript库可以做到这一点？并且可以控制线的曲率？

感谢。

Answer 1

我最近发现了另一种解决方案，它不需要折线，而是使用可以即时计算的标记图标的路径值。

简而言之：您只需为从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^(initialZoom - currentZoom)没有必要重新计算路径。

样品：

Sample of bezier curves on google maps

jsfiddle with hardcoded example using original question's points

相关代码：

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);
    });
});

Answer 2

以下是我找到的图书馆

~~http://curved_lines.overfx.net/~~ ^死链接

http://www.geocodezip.com/v3_polyline_example_rhumb.html

http://www.geocodezip.com/v3_polyline_example_arc.html

实际上我刚刚发现Google地图Polyline列出了要构建的点。所以你可以通过多个点来使线看起来弯曲。

PS：您可以使用下面2个链接中的绘制弧功能来获取绘图点列表

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

2 个答案: