アプリケーションは次のように動作します。 ユーザが開始位置と距離を入力します。ユーザーは、道路上に円や線を描くことを選択できます。円は正常に機能します。作業に使用されていたライン。Google Maps API v3ポリライン描画なし
Linesの場合、コードは開始位置の緯度/経度を検出し、次にユーザーが設定した距離(たとえば100km)の原点のN、S、E、W点を求めます。 N個の目的地から始めて、コードはgoogle.maps.DirectionsService()を呼び出して起点からNまでの道順を取得します。これはroute.overview_path内の緯度/経度の配列を返します。
注:DirectionsRenderer()を使用してルートを描画することはできますが、描画される距離はユーザーが設定した距離よりも大きくなります。起点から地点Nまでの全ルートを描くことは道のりで124kmかもしれませんが、私は100kmを描きたいだけです。
代わりにroute.overview_path []配列をステップ実行し、その点と原点の間の距離を確認し、各点を新しい配列に追加します。距離がユーザによって設定されたdistより大きい場合、私は停止し、最後の要素をポップ・オフし、次にこの2番目の小さな配列に基づいて新しいポリラインを作成します。
私はChromeの開発者モードで、javascript、ブレークポイントの設定、地元の人などを見て回りました。google.maps.Polyline({})に渡された一連の点は、 。なぜレンダリングしていないのか分かりません。
最終的に、コードは原点から始まる4本の線を描きました.1本は北、1本は東、南、西となりました。など....
コードはここにある:http://whosquick.com/RunViz.html
ご清聴ありがとうございました。