Googleマップのポイントの周りに半径を描画します

Google Maps APIを使用しており、マーカーを追加しています。次に、各マーカーの周囲に半径10マイルの半径を追加します。これは、ズーム中に適切に動作する円を意味します。私はそれを行う方法を知りません、そしてそれは一般的なものではないようです。

見栄えの良い例を1つ見つけました。GoogleLatitudeもご覧いただけます。そこでは、私が望むように、半径付きのマーカーを使用しています。

更新： Google Latitude は拡大縮小された画像を使用しますが、どのように機能しますか？ _{^{（廃止予定の機能）}}

Google Maps API V3を使用して、Circleオブジェクトを作成し、次にbindTo（）を使用してマーカーの位置に結び付けます（どちらもgoogle.maps.MVCObjectインスタンスであるため）。

// Create marker 
var marker = new google.maps.Marker({
  map: map,
  position: new google.maps.LatLng(53, -2.5),
  title: 'Some location'
});

// Add circle overlay and bind to marker
var circle = new google.maps.Circle({
  map: map,
  radius: 16093,    // 10 miles in metres
  fillColor: '#AA0000'
});
circle.bindTo('center', marker, 'position');

fillColor、strokeColor、strokeWeightなど（フルAPI）を変更することで、Google Latitudeの円のように見せることができます。

その他のソースコードとスクリーンショットの例をご覧ください。

これを実現する最も一般的な方法は、円をシミュレートするのに十分なポイントを持つGPolygonを描画することです。参照した例では、この方法を使用しています。 このページには良い例があります- ソースコードで関数drawCircleを探してください。

球面形状では、形状は点、線、およびそれらの線の間の角度によって定義されます。処理する必要のある初歩的な価値しかありません。

したがって、円（球に投影された形状）は、点を使用して近似する必要があります。ポイントが多いほど、円のように見えます。

そうは言っても、グーグルマップが地球を平らな面に投影していることを理解してください（「アンロール」し、「正方形」に見えるまでストレッチ+フラット化することを考えてください）。そして、もしあなたが平らな座標系を持っているなら、あなたはそれの上にあなたが望むすべての2Dオブジェクトを描くことができます。

言い換えると、Googleマップ上にスケーリングされたベクトル円を描くことができます。キャッチは、グーグルマップはそのままではあなたにそれを与えない（彼らは実用的に可能な限りGIS値に近いままでいることを望んでいる）です。円を近似するために使用するGPolygonのみを提供します。ただし、この男は IEにはvmlを使用し、他のブラウザにはsvgを使用してそれを実行しました（「SCALED CIRCLES」セクションを参照）。

次に、スケーリングされた円の画像を使用して、Google Latitudeに関する質問に戻ります（これはおそらく最も便利です）。円の半径が決して変わらないことがわかっている場合（たとえば、ある地点から常に10マイル離れている場合）、最も簡単な解決策は、画像のURL +画像が表すGLatLngBoundsであるGGroundOverlayを使用することです。あなたが行う必要がある唯一の仕事はcacluateあるGLatLngBoundsあなたの10マイルの半径を表します。これを取得すると、Google Maps APIは、ユーザーがズームインまたはズームアウトするときに画像のスケーリングを処理します。

私は過去にこの問題を抱えていたので、このディスカッションをブックマークしました。

要約すると、次のことができます。

1. この円フィルターを見てくださいのソースコードをそれをプロジェクトに組み込む方法を理解してください。
2. 円をシミュレートするのに十分なポイントを持つGPolygonを描画します。
3. http://www.nearby.org.uk/google/circle.kml.php?radius=30miles&lat=40.173&long=-105.1024を変更してインポートし、KMLファイルを生成します。Googleマップでは、検索ボックスにURIを貼り付けるだけで、地図に表示されます。ただし、APIを使用してそれを行う方法はわかりません。

私はちょうどこれに対処するブログ記事を書いたところです、それはあなたが役に立つかもしれません：http : //seewah.blogspot.com/2009/10/circle-overlay-on-google-map.html

基本的に、正しいGLatLngBoundsでGGroundOverlayを作成する必要があります。トリッキーなビットは、希望する半径に基づいて、この円を囲むこの想像上の正方形（GLatLngBounds）の南西隅座標と北東隅座標を計算することです。計算はかなり複雑ですが、ブログのgetDestLatLng関数を参照するだけで済みます。残りはかなり簡単なはずです。

API v3ソリューションについては、以下を参照してください。

http://blog.enbake.com/draw-circle-with-google-maps-api-v3

点の周りに円を作成し、範囲内外のマーカーを異なる色で表示します。動的半径も計算しますが、半径が固定されているため、作業量が少なくなる場合があります。