在谷歌地图中画一条垂直于两点的线

时间:2011-04-30 05:54:04

标签: javascript google-maps-api-3 polyline

我有两个坐标,我想绘制一条相等长度的垂直线。是否有一个简单的谷歌地图偏移为此或一个干净的JavaScript方法,我可以实现这一点?那会是什么?

这是我到目前为止所拥有的。如您所见,我将两个点绘制为标记,然后尝试在它们之间绘制一条线,除了我需要使该线垂直于两个坐标之间的线。

var locations = [
    ['', position.coords.latitude, position.coords.longitude, 1],
    ['', llat, llng, 2]
];

  var marker, i;

  for ( var i = 0; i < locations.length; i++ )
  {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });
  }

    var borderPlanCoordinates = [
        new google.maps.LatLng(llat, position.coords.longitude),
        new google.maps.LatLng(position.coords.latitude,llng)
    ];

    var borderPath = new google.maps.Polyline({
      path: borderPlanCoordinates,
      strokeColor: "#FF0000",
      strokeOpacity: 1.0,
      strokeWeight: 10,
      map: map
    });

   borderPath.setMap(map);

2 个答案:

答案 0 :(得分:5)

所以你有两个坐标为(x1,y1)(x2, y2)的点,你想画一条线段,它的长度是它们之间的距离,它是连接它们的线段的垂直平分线,以及被上述分段一分为二?

最简单的方法可能是设置cx = (x1 + x2)/2cy = (y1+y2)/2)dx = (x2-x1)/2dy = (y2-y1)/2,然后从(cx-dy, cy+dx)(cx+dy, cy-dx)画一条线

这是有效的,因为(cx, cy)是您想要的细分的中点,然后您只需将该中间点的矢量移至(x2,y2)并将其旋转正负90度即可找到要绘制的细分的端点。

答案 1 :(得分:4)

我试过这个解决方案,片段的中间是好的但是它在谷歌地图上看起来并不垂直,我怀疑是因为球形投影(不是正交)。

这是一个有效的解决方案:

spherical = google.maps.geometry.spherical;
var F = new google.maps.LatLng(latF, longF); 
var T = new google.maps.LatLng(latT, longT); 
// M is the middle of [FT]
var latM = (latF + latT)/2;
var longM = (longF + longT)/2;
var M =  new google.maps.LatLng(latM, longM);
// Get direction of the segment
var heading = spherical.computeHeading(F, T);
var dist = 200; // distance in meters
// Place point A that is oriented at 90° in a distance of dist from M
var A = spherical.computeOffset(M, dist, heading+90);
var perpendicularCoordinates = [M, A ];
var perpendicular = new google.maps.Polyline({
    path: perpendicularCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2,
    map: map
  });    

以下是相关的小提琴:http://jsfiddle.net/8m7vm650/15/

请注意,您需要使用名为geometry的可选google地图库,这可以通过在加载地图时添加libraries = geometry来查询字符串来完成:http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false