差分

このページの2つのバージョン間の差分を表示します。

--- gmap3_line [2018/05/27 01:14] – 管理者
+++ 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]]