谷歌地图无限线/长度增加或纬度经度计算

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>