内容へ移動
あちあち情報局
趣味や日曜プログラムなどを書いています
ユーザ用ツール
ログイン
サイト用ツール
検索
ツール
文書の表示
以前のリビジョン
バックリンク
最近の変更
メディアマネージャー
サイトマップ
ログイン
>
最近の変更
メディアマネージャー
サイトマップ
現在位置:
トップページ
»
GoogleMaps APIv3 緯度・経度線を引く
gmap3_line
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
{{tag>プログラミング関連 Google_Maps_API3}} [[start]]>[[programming_start]] ====== GoogleMaps APIv3 緯度・経度線を引く====== Google Maps Javascript API v3 に緯度と経度の線を引いて本の地図っぽくします。 ---- ===== サンプルデモ ===== 緯度・経度ともに1度単位で線が描かれます。10度単位で青線、赤道と経度の0度・-180度(+180度)は赤線になります。 <html> <style> #mapdiv1 {width:100%;height:400px;} </style> <div id="mapdiv1"></div> <script> var map1; function initMap1() { map1 = new google.maps.Map(document.getElementById('mapdiv1'), { center: {lat: 35.6895326, lng: 139.6908937}, zoom: 4 }); //経度線 -85度~+85度 var lat_line1; for(var i=-85; i<=85; i++){ //線の色と濃度(不透明度)を決めます var color="#aaaaaa"; var opa=0.3; if (i % 5 ==0){ if (i % 10 ==0){ // 0 10 20 color="#0000ff"; opa=0.6 }else{ // 5 15 25 color="#aaaaaa"; opa=0.6 } } if (i==0){ color="#ff0000"; opa=0.8 } //経度線を引きます var line=[{lat:i,lng:-180},{lat:i,lng:0},{lat:i,lng:179.999999}]; lat_line1 = new google.maps.Polyline({ path: line, strokeColor: color, strokeOpacity: opa, strokeWeight: 1 }); lat_line1.setMap(map1); } //緯度線を引きます //(※-180と180は本来同じだけど片方だけだと線が細くなる) for(var i=-180; i<=180; i++){ //線の色と濃度(不透明度)を決めます var color="#aaaaaa"; var opa=0.3; if (i % 5 ==0){ if (i % 10 ==0){ // 0 10 20 color="#0000ff"; opa=0.6 }else{ // 5 15 25 color="#aaaaaa"; opa=0.6 } } if (i%180==0){ color="#ff0000"; opa=0.8 } //緯度線を引きます var line=[{lat:85,lng:i},{lat:0,lng:i},{lat:-85,lng:i}]; lat_line1 = new google.maps.Polyline({ path: line, strokeColor: color, strokeOpacity: opa, strokeWeight: 1 }); lat_line1.setMap(map1); } } </script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBjv8os9QozlDKp4kd6S0dtt8OX-K8WIzw&callback=initMap1" async defer></script> </html> ==== ソースコード ==== <code javascript> <style> #mapdiv1 {width:100%;height:400px;} </style> <div id="mapdiv1"></div> <script> var map1; function initMap1() { map1 = new google.maps.Map(document.getElementById('mapdiv1'), { center: {lat: 35.6895326, lng: 139.6908937}, zoom: 4 }); //経度線 -85度~+85度 var lat_line1; for(var i=-85; i<=85; i++){ //線の色と濃度(不透明度)を決めます var color="#aaaaaa"; var opa=0.3; if (i % 5 ==0){ if (i % 10 ==0){ // 0 10 20 color="#0000ff"; opa=0.6 }else{ // 5 15 25 color="#aaaaaa"; opa=0.6 } } if (i==0){ color="#ff0000"; opa=0.8 } //経度線を引きます var line=[{lat:i,lng:-180},{lat:i,lng:0},{lat:i,lng:179.999999}]; lat_line1 = new google.maps.Polyline({ path: line, strokeColor: color, strokeOpacity: opa, strokeWeight: 1 }); lat_line1.setMap(map1); } //緯度線を引きます //(※-180と180は本来同じだけど片方だけだと線が細くなる) for(var i=-180; i<=180; i++){ //線の色と濃度(不透明度)を決めます var color="#aaaaaa"; var opa=0.3; if (i % 5 ==0){ if (i % 10 ==0){ // 0 10 20 color="#0000ff"; opa=0.6 }else{ // 5 15 25 color="#aaaaaa"; opa=0.6 } } if (i%180==0){ color="#ff0000"; opa=0.8 } //緯度線を引きます var line=[{lat:85,lng:i},{lat:0,lng:i},{lat:-85,lng:i}]; lat_line1 = new google.maps.Polyline({ path: line, strokeColor: color, strokeOpacity: opa, strokeWeight: 1 }); lat_line1.setMap(map1); } } </script> <script src="https://maps.googleapis.com/maps/api/js?key=【あなたのAPIキー】&callback=initMap1" async defer></script> </code> ---- [[start]]>[[programming_start]]
gmap3_line.txt
· 最終更新: 2018/05/27 01:28 by
管理者
ページ用ツール
文書の表示
以前のリビジョン
バックリンク
文書の先頭へ