Yahoo!JavaScriptマップAPIで円を描く

プログラムに興味はなく、マウスでぐりぐりしたい場合は地図に円を描くへ。

Yahoo!JavaScriptマップAPIで円を描く場合はY.Circleクラスで。ただし、デフォルトだと半径の単位がpixelになって焦るので、unitで"km"を指定するのを忘れずに!

多角形で近似した円を自力で描きたい?場合は、そちらへ。

<script type="text/javascript" src="https://map.yahooapis.jp/js/V1/jsapi?appid=アプリケーションID"></script>
<div id="map" style="width: ***px; height: ***px;"></div>
<script type="text/javascript">
window.onload() = function() {
  var myMap = new Y.Map("map");
  myMap.drawMap(

    // 中心点緯度経度
    new Y.LatLng(35.710139, 139.810833), 
    // ZOOMレベル
    8,
    // レイヤーセット(標準地図)
    Y.LayerSetId.NORMAL
  );

  // 円の定義
  var myCircle = new Y.Circle(
    // 第1引数は中心点
    new Y.LatLng(35.710139, 139.810833),
    // 第2引数はY.Size(東西方向の半径,南北方向の半径)
    new Y.Size(95.330, 95.330),
    // 第3引数はJSONオプション
    {
      // unitを忘れると半径がpixel単位になるので注意!
      unit: "km",
      // 外周スタイル Y.Style(色, 太さ, 透過度)
      strokeStyle: new Y.Style("ff0000", 1, 1),
      // 塗りつぶしスタイル Y.Style(色, 太さ(不要), 透過度)
      fillStyle: new Y.Style("ff0000", null, 0.5)
    }
  );
  // 地図に描画
  myMap.addFeature(myCircle);
}
</script>

OKWave系のq5546321でgoogle mapsのほうにリンクされている、「東京スカイツリーが見える範囲」を相変わらずサンプルにしています。中心点は (35.710139, 139.810833)、半径は95,330mにしています。(この範囲でスカイツリーが見えることを保障するわけではありません!念のため)