<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にしています。(この範囲でスカイツリーが見えることを保障するわけではありません!念のため)
- 上のHTMLをコピーして、緯度・経度・大きさを変えれば好きな地図を表示できます。
- アプリケーションIDは取得してください。
- 大きさは、表示させる<div>タグで指定。
- ズームレベルは整数で指定。(小さいほど広域、大きいほど詳細)