タグ

Googlemapとcircleに関するmana_bm_94のブックマーク (2)

  • 地図上に半径を指定して円を描く

    Google MAPS API で 円を描く、V3対応版です。keyが必要なV2版は別のページにあります。プログラムに興味はなく、マウスクリックだけで地図に円を描くページもあります。 かつてはサイトのキラーコンテンツだったんですが、Googleさん純正の google.maps.Circle クラスの登場により、商売あがったりです(笑)。 OKWave系のq5546321でリンクされている、「東京スカイツリーが見える範囲」をサンプルにしてみました。中心点は (35.710139, 139.810833)、半径は95,330mにしています。(この範囲でスカイツリーが見えることを保障するわけではありません!念のため) <div id='map' style='width:700px; height:400px;'><br /></div> <script type="text/javascr

    mana_bm_94
    mana_bm_94 2010/07/22
    google.maps.Circle
  • ポリゴンを使った円の描画 - ポリゴン(GPolygon) - Google Maps JavaScript API入門

    ポリゴンを使って円を描いてみます。円を描画する方法はないので多角形を利用した擬似的な円を作成します。地図上のクリックされた地点を中心としてピクセル単位で指定した半径の円を地図上に描画を行うようにします。 まず円の中心の座標で指定した地点をコンテナ内でのピクセル値に変換します。GMap2クラスで用意されているfromLatLngToContainerPixelメソッドを使います。 var point = map.fromLatLngToContainerPixel(latlng); このメソッドはGPointクラスのオブジェクトとして値を返します。左上隅を原点とした時に三角形の中心点のx座標の値とy座標の値は次のように取得できます。 var point = map.fromLatLngToContainerPixel(latlng); var x = point.x; var y = poi

  • 1