この文書の現在のバージョンと選択したバージョンの差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
gmap3_line [2018/05/27 01:19] 管理者 |
gmap3_line [2018/05/27 01:28] (現在) 管理者 |
||
---|---|---|---|
ライン 1: | ライン 1: | ||
+ | {{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]] | ||