2011-04-30 139 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