6

同じ長さの垂線を描きたい座標が2つあります。これのための単純なグーグルマップオフセットまたは私がこれを達成するかもしれないクリーンなjavascriptアプローチのどちらかがありますか？それは何でしょうか？

これが私がこれまでに持っているものです。ご覧のとおり、2つのポイントをマーカーとしてプロットし、2つの座標間の線に垂直な線を取得する必要がある場合を除いて、それらの間に線を描画しようとします。

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

2 に答える 2

5

座標を持つ 2 つの点があり、その長さがそれらの間の距離である線分を描きたいとします。これは、それらを結ぶ線分の垂直二等分線であり、その線分によって二等分されますか(x1,y1)?(x2, y2)

おそらく最も簡単な方法はcx = (x1 + x2)/2、cy = (y1+y2)/2)、dx = (x2-x1)/2、を設定し、 からまでdy = (y2-y1)/2線を引くことです。(cx-dy, cy+dx)(cx+dy, cy-dx)

これ(cx, cy)は、必要なセグメントの中点であるため機能します。次に、その中点からベクトルを(x2,y2)取得し、プラスとマイナスの 90 度回転させて、描画するセグメントの端点を見つけます。

于 2011-04-30T06:11:44.757 に答える
4

私はこの解決策を試しました。セグメントの中央は問題ありませんが、Googleマップでは垂直に見えません。球状の投影（正規直交ではない）が原因だと思います。

これが機能するソリューションです：

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/

マップをロードするときに、libraries=geometry をクエリ文字列に追加することにより、geometry と呼ばれるオプションの Google マップ ライブラリを使用する必要があることに注意してください: http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false

于 2015-03-05T14:44:40.670 に答える