2011-04-30 156 views
6

我有两个坐标,我想画一条等长的垂直线。有没有简单的谷歌地图偏移量或干净的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); 

回答

5

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

也许最简单的方法是设置cx = (x1 + x2)/2cy = (y1+y2)/2),​​,dy = (y2-y1)/2再画一条线从(cx-dy, cy+dx)(cx+dy, cy-dx)

这工作,因为(cx, cy)是你想要的线段的中点,然后你只是把从中点载体(x2,y2)并加上旋转它,零下90度,找到你想要的段的端点画。

+0

谢谢你,这就是它! – sudocity 2011-04-30 11:53:52

3

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

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

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/

请注意,您需要使用所谓的几何形状是通过将图书馆做了一个可选的谷歌地图图书馆=几何来加载地图时,查询字符串:http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false