web-dev-qa-db-ja.com

Googleマップのポイントの周りに半径を描く

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

見栄えの良い例が見つかりました 。Google Latitudeもご覧になれます。そこでは、私が望むように、半径のあるマーカーを使用します。

更新：Google Latitudeは 画像 を使用しますが、これはどのように機能しますか？

javascriptgoogle-maps
91
webjunkie

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などを変更することで、Google Latitudeの円のように見せることができます（ full API ）。

もっと見る ソースコードとサンプルスクリーンショット 。

226
Dunc

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

10
Chris B

球面形状では、形状は点、線、およびそれらの線の間の角度によって定義されます。あなたには、それらの基本的な価値しかありません。

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

そうは言っても、Googleマップは 地球を平らな面に投影する （地球を「展開」し、「正方形」に見えるまで伸縮+平らにすること）であることを理解してください。また、フラットな座標系がある場合は、2Dオブジェクトを必要なだけ描画できます。

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

さて、スケーリングされた円の画像を使用してGoogle Latitudeについての質問に戻ります（これがおそらく最も便利です）：円の半径が決して変わらないことがわかっている場合（たとえば、ある地点から常に10マイル）最も簡単な解決策は、 GGroundOverlay を使用することです。これは、画像のURL +画像が表すGLatLngBoundsです。次に必要な作業は、半径10マイルを表す GLatLngBounds を計算することだけです。それができたら、ユーザーがズームインおよびズームアウトするときに、GoogleマップAPIが画像のスケーリングを処理します。

9
Crescent Fresh

私は過去にこの問題を抱えていたので、これをブックマークしました discussion。

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

  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を使用してどのように実行できるかはわかりません。
4
Sean

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

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

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

2
Arpan Aggarwal

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

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

1
user98463