Google MAPS API で 円を描く、V3対応版です。keyが必要なV2版は別のページにあります。プログラムに興味はなく、マウスクリックだけで地図に円を描くページもあります。
かつては本サイトのキラーコンテンツだったんですが、Googleさん純正の google.maps.Circle クラスの登場により、商売あがったりです(笑)。
OKWave系のq5546321でリンクされている、「東京スカイツリーが見える範囲」をサンプルにしてみました。中心点は (35.710139, 139.810833)、半径は95,330mにしています。(この範囲でスカイツリーが見えることを保障するわけではありません!念のため)
かつては本サイトのキラーコンテンツだったんですが、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/javascript">
var myLatLng = new google.maps.LatLng(35.710139, 139.810833);
var myMap = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
scrollwheel: false
});
new google.maps.Circle({
center: myLatLng, // 中心点(google.maps.LatLng)
fillColor: '#ff0000', // 塗りつぶし色
fillOpacity: 0.5, // 塗りつぶし透過度(0: 透明 ⇔ 1:不透明)
map: myMap, // 表示させる地図(google.maps.Map)
radius: 95330, // 半径(m)
strokeColor: '#ff0000', // 外周色
strokeOpacity: 1, // 外周透過度(0: 透明 ⇔ 1:不透明)
strokeWeight: 1 // 外周太さ(ピクセル)
});
</script>
<script type="text/javascript">
var myLatLng = new google.maps.LatLng(35.710139, 139.810833);
var myMap = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
scrollwheel: false
});
new google.maps.Circle({
center: myLatLng, // 中心点(google.maps.LatLng)
fillColor: '#ff0000', // 塗りつぶし色
fillOpacity: 0.5, // 塗りつぶし透過度(0: 透明 ⇔ 1:不透明)
map: myMap, // 表示させる地図(google.maps.Map)
radius: 95330, // 半径(m)
strokeColor: '#ff0000', // 外周色
strokeOpacity: 1, // 外周透過度(0: 透明 ⇔ 1:不透明)
strokeWeight: 1 // 外周太さ(ピクセル)
});
</script>
オプション類に関しては、リファレンスのCircleOptionsも参考にしてください。
V2用に以前作っていた自作の擬似円描画と比較してみます。赤のGoogle純正品を青の自作品に重ねています。
東西方向は短く南北方向は長く「縦長」になっていたようで、やはり素人の計算では限界だったようです。栃木県庁や鹿沼市役所の方、微妙になってすいません。
悔しいので、電波の出そうな螺旋でも描いておきます。
ガスコン研究所 ■[Flash][Excel]:対数螺旋の描き方を参考にしました。
ガスコン研究所 ■[Flash][Excel]:対数螺旋の描き方を参考にしました。
var a = 1.09; // 係数(テキトー)
var N = 13; // 周回数(てきと~)
var R = 0; // 動径
var Loop = N * 90; // 繰り返しの回数
var T = (2 * Math.PI ) / 120; // 1ステップの偏角
var xx = 0.8; // 緯度経度方向の補正(非常に適当)
var points = new Array();
for (i = 0; i < Loop; i++) {
R = Math.pow(a, T*i) / 180;
var lat = R * Math.sin(T*i) * (-1) * xx + myLatLng.lat();
var lng = R * Math.cos(T*i) + myLatLng.lng();
points.push(new google.maps.LatLng(lat, lng));
}
new google.maps.Polyline({
path: points,
strokeColor: '#000000',
strokeOpacity: 1,
strokeWeight: 2,
map: map
});
var N = 13; // 周回数(てきと~)
var R = 0; // 動径
var Loop = N * 90; // 繰り返しの回数
var T = (2 * Math.PI ) / 120; // 1ステップの偏角
var xx = 0.8; // 緯度経度方向の補正(非常に適当)
var points = new Array();
for (i = 0; i < Loop; i++) {
R = Math.pow(a, T*i) / 180;
var lat = R * Math.sin(T*i) * (-1) * xx + myLatLng.lat();
var lng = R * Math.cos(T*i) + myLatLng.lng();
points.push(new google.maps.LatLng(lat, lng));
}
new google.maps.Polyline({
path: points,
strokeColor: '#000000',
strokeOpacity: 1,
strokeWeight: 2,
map: map
});