2009-05-05 29 views
80

私はGoogle Maps APIを使用しており、マーカーを追加しています。今度は、各マーカーの周りに10マイルの半径を追加したいと考えています。つまり、拡大中に適切に動作する円です。私はそれをどうやって行うのか分かりません。それは何か共通のものではないようです。Googleマップのポイントを中心に半径を描く

I found one example that looks goodです。Google Latitudeもご覧になれます。彼らは、私が望むように、半径を持つマーカーを使用します。

更新: Google Latitudeはan imageを使用していますが、それはどのように機能しますか?

+0

参照それは、この例では、[ここ](http://www.freemaptools.com/radius-around-point.htm)見ることができ、ドラッグ可能な半径を有する完全便利です。 –

答えて

207

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など(full API)を変更することにより、Googleだけの緯度円のように見えるようにすることができます。

詳細を表示source code and example screenshotsを参照してください。

+2

GoogleマップAPI https://web.archive.org/web/20120312044803/http://code.google.com/apis/mapsの「Fun with MVC objects」の記事の良い例もあります/articles/mvcfun.html – Johan

10

これを達成する最も一般的な方法は、円をシミュレートするのに十分なポイントでGPolygonを描くことです。参照した例は、このメソッドを使用しています。 This pageには良い例があります - drawCircleのソースコードを探してください。

+0

Hello @Chris B http://esa.ilmari.googlepages.com/circle.htmは素晴らしいリンクですが、V2で完成しました。あなたはv3コードを提供できますか? –

9

球形ジオメトリの形状は、それらの線の間の点、線、および角度によって定義されます。あなたは作業するための初歩的な価値しか持っていません。

したがって球(球に投影された形状に関して)は点を使って近似する必要があるものです。ポイントが増えるほど、円のように見えます。

グーグルマップがprojecting the earth onto a flat surfaceであることを実感してください(地球を広げ、伸ばし+平らに見えるようになるまで考えてください)。フラットな座標系を持っていれば、2Dオブジェクトを自由に描画できます。

他の言葉で言えば、 Googleマップに縮尺されたベクトル円を描くことができます。キャッチは、グーグルマップはボックスの外にあなたにそれを与えていない(彼らはGIS値の近くにとどまることができますが、実際に可能です)。彼らはあなたにサークルを近似させるために使いたいGPolygonしか与えません。しかし、this guy did itは、IEの場合はvml、他のブラウザの場合はsvgを使用します(「スケーリングされた円」を参照)。

スケールされた円画像を使用してGoogle Latitudeに関する質問に戻ります(これはおそらく最も便利です)。サークルの半径が決して変化しないことがわかっている場合(たとえば、ポイント)の場合、最も簡単な解決策は、GGroundOverlayを使用することです。イメージURLとイメージが表すGLatLngBoundsだけです。あなたがする必要がある唯一の仕事は、半径10マイルを表すGLatLngBoundsをcacluateすることです。いったんそれを持っていると、ユーザーがズームインしたりズームアウトしたりすると、Googleマップのapiが画像を拡大縮小します。

+6

偉大な答え。 IOWは他の言葉でOOTBはOut of The Boxを意味します。 –

4

は、私が過去にこの問題を持っていたので、私は、あなたがすることができ、それを要約すると、このdiscussion.

をブックマーク:

  1. このcircle filterのソースコードを見て、どのように把握しますあなたのプロジェクトに組み込むことができます。
  2. 円をシミュレートするのに十分なポイントでGPolygonを描画します。
  3. http://www.nearby.org.uk/google/circle.kml.php?radius=30miles&lat=40.173&long=-105.1024を変更してからインポートして、KMLファイルを生成します。 Googleマップでは、URIを検索ボックスに貼り付けるだけで、マップ上に表示されます。私はあなたがAPIを使ってそれをどうやってやるかもしれないか分かりません。私はちょうどあなたが役に立つかもしれまさにこれを対処するブログ記事を、書かれている
1

http://seewah.blogspot.com/2009/10/circle-overlay-on-google-map.html

を基本的に、あなたは正しいGLatLngBoundsでGGroundOverlayを作成する必要があります。トリッキーなビットは、希望の半径に基づいて、この円を囲むこのimaginery square(GLatLngBounds)の南西コーナー座標と北東コーナー座標を計算しています。数学はかなり複雑ですが、あなたはブログのgetDestLatLng関数を参照することができます。残りはかなり簡単です。 API v3の溶液について

2

を参照:これは、内および異なる色の範囲外マーカーを示し、次いで点の周りに円を作成し、

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

。彼らはまた、動的半径を計算しますが、あなたの場合は半径が固定されているので、作業が少なくなる可能性があります。

+1

ページは見つかりませんでした。 – jsims281

関連する問題