谷歌地圖無限線/長度增加或緯度經度計算

Question

嘿我正嘗試找到一種方法，只是增加一個線的長度不改變方向

我用折線

var map; 
function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
    center: {lat: 37.4419, lng: -122.1419}, 
    zoom: 8 
    }); 
    var line = new google.maps.Polyline({ 
    path: [new google.maps.LatLng(37.4419, -122.1419), new google.maps.LatLng(37.4519, -122.1519)], 
    strokeColor: "#FF0000", 
    strokeOpacity: 1.0, 
    strokeWeight: 10, 
    geodesic: true, 
    map: map 
}); 
} 

試過這種

和它的作品如預期

，但我寧願希望它像

或

我只有兩個座標，從第一個例子

應該是測地和theoreticaly idealy以防萬一地球回到同一起點所以它會像無盡的

我也試圖找出一種方法來計算一些更遠的座標，但搜索是一團糟，因爲everboidy想要找到距離的計算。 所以有兩個座標在「直通方向」之後，但有幾千公里的高距離請讓我知道

Answer 1

您可以使用Google Maps Javascript API Geometry library來計算線的標題並將其沿任意長的距離那個標題。

代碼片段::

var map; 
 

 
function initMap() { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    center: { 
 
     lat: 37.4419, 
 
     lng: -122.1419 
 
    }, 
 
    zoom: 8 
 
    }); 
 
    var line = new google.maps.Polyline({ 
 
    path: [new google.maps.LatLng(37.4419, -122.1419), new google.maps.LatLng(37.4519, -122.1519)], 
 
    strokeColor: "#FF0000", 
 
    strokeOpacity: 1.0, 
 
    strokeWeight: 10, 
 
    geodesic: true, 
 
    map: map 
 
    }); 
 
    // extend line from each end along its existing heading 
 
    // pick 20e6 meters as an arbitrary length 
 
    var lineHeading = google.maps.geometry.spherical.computeHeading(line.getPath().getAt(0), line.getPath().getAt(1)); 
 
    var newPt0 = google.maps.geometry.spherical.computeOffset(line.getPath().getAt(0), 20000000, lineHeading); 
 
    line.getPath().insertAt(0, newPt0); 
 
    var newPt1 = google.maps.geometry.spherical.computeOffset(line.getPath().getAt(1), 20000000, lineHeading + 180); 
 
    line.getPath().push(newPt1); 
 
} 
 

 
google.maps.event.addDomListener(window, "load", initMap);

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script> 
 
<div id="map"></div>