あちあち情報局

趣味や日曜プログラムなどを書いています

ユーザ用ツール

サイト用ツール


gmap3_line

差分

この文書の現在のバージョンと選択したバージョンの差分を表示します。

この比較画面にリンクする

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
gmap3_line [2018/05/27 01:22]
管理者
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]]