Googleは無限ライン/長さや緯度LNG計算を増やすにマッピング

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

でこれを試してみました

と

期待どおりに動作しますが、私はむしろ

のようにそれをしたいです

又は

iは最初の例の二つの座標

を有し、それはのようになるので、バック同じ開始時測地とtheoreticaly idealyグローブarroundのなければなりません無限

また、もう少し遠い座標を計算する方法を見つけようとしましたが、エボリューションは距離を測るために見つけたいと思っているので混乱です。 ので、plsは私はあなたが行の見出しを計算し、一緒にそれを任意の長い距離を延長するためにGoogle Maps Javascript API Geometry libraryを使用することができます

Answer 1

をお知らせする「ライン・スルー向き」以下の二つの座標を有するが、いくつかの千キロのような高い距離を持っていますその見出し。

コードスニペット::

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>