Zeichnen einer Linie in Google Maps, die senkrecht zu zwei Punkten verläuft

Question

Ich habe zwei Koordinaten, für die ich eine senkrechte Linie von gleicher Länge zeichnen möchte. Gibt es entweder einen einfachen Google Maps-Offset dafür oder einen sauberen Javascript-Ansatz, mit dem ich das erreichen könnte? Wie würde das aussehen?

Hier ist, was ich bis jetzt habe. Wie Sie sehen können, zeichne ich die beiden Punkte als Markierungen ein und versuche dann, eine Linie zwischen ihnen zu ziehen, aber ich muss diese Linie senkrecht zu der Linie zwischen den beiden Koordinaten bekommen.

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

Answer 1

Sie haben also zwei Punkte mit den Koordinaten (x1,y1) y (x2, y2) und Sie wollen eine Strecke zeichnen, deren Länge dem Abstand zwischen ihnen entspricht, die die Mittelsenkrechte der Strecke ist, die sie verbindet, und die durch diese Strecke halbiert wird?

Am einfachsten ist es wahrscheinlich, wenn Sie cx = (x1 + x2)/2 , cy = (y1+y2)/2) , dx = (x2-x1)/2 , dy = (y2-y1)/2 und ziehen dann eine Linie von (cx-dy, cy+dx) à (cx+dy, cy-dx) .

Dies funktioniert, weil (cx, cy) ist der Mittelpunkt des gewünschten Segments, und dann nimmt man einfach den Vektor von diesem Mittelpunkt zu (x2,y2) und drehen es um plus und minus 90 Grad, um die Endpunkte des Segments zu finden, das Sie zeichnen möchten.

Answer 2

Ich habe diese Lösung ausprobiert, die Mitte des Segments ist in Ordnung, aber es sieht auf Google Maps nicht senkrecht aus, vermutlich wegen der sphärischen Projektion (nicht orthonormal).

Hier ist eine Lösung, die funktioniert:

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

Hier ist die dazugehörige Fiddle: http://jsfiddle.net/8m7vm650/15/

Bitte beachten Sie, dass Sie eine optionale Google-Maps-Bibliothek namens Geometrie verwenden müssen, indem Sie libraries=geometry zum Query-String beim Laden von Karten hinzufügen: http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false