【Google Map】地図上に四角い線を描いてみる

Google Map に四角い線を描きたいと思いました。

・ブラウザで、GMapを開くと、URLに中心座標（35.68269759362687, 139.76947098539154）が表示されているので、取得しておく。

&ll=35.68269759362687%2C139.76947098539154&z=15

・GMap 上で、シェイプを描く。

・地図のデータを、kml ファイルで、エクスポートする。

・kml ファイルの中の座標を取得

<coordinates>
139.7646859,35.6874218,0
139.7608235,35.6768248,0
139.7685054,35.6737569,0
139.7741273,35.6842149,0
139.7646859,35.6874218,0
</coordinates>

・Google Cloud Platform で、Google Map を有効にして、APIキーを取得する。

・index.html を作り、中心座標と、四角の座標をセットする。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="utf-8">
   <title>地図に四角を描くサンプル</title>
   <!-- 動作処理 -->
   <script>
  // 現在地取得処理
  function initMap() {
    // Geolocation APIに対応している
    if (navigator.geolocation) {
   // 現在地を取得
   navigator.geolocation.getCurrentPosition(
     // 取得成功した場合
     function(position) {
    // 緯度・経度を変数に格納
    var mapLatLng = new google.maps.LatLng(35.68269759362687, 139.76947098539154);
    // マップオプションを変数に格納
    var mapOptions = {
      zoom : 15,          // 拡大倍率
      center : mapLatLng  // 緯度・経度
    };
    // マップオブジェクト作成
    var map = new google.maps.Map(
      document.getElementById("map"), // マップを表示する要素
      mapOptions         // マップオプション
    );
    //　マップにマーカーを表示する
    var marker = new google.maps.Marker({
      map : map,             // 対象の地図オブジェクト
      position : mapLatLng   // 緯度・経度
    });
    var pline = new google.maps.Polyline({
     map:map,
     path:[
  {lat:35.6874218, lng:139.7646859},
  {lat:35.6768248, lng:139.7608235},
  {lat:35.6737569, lng:139.7685054},
  {lat:35.6842149, lng:139.7741273},
  {lat:35.6874218, lng:139.7646859}
       ],
      strokeColor: "rgb(136, 14, 79)", //線色(def:#000000)
      strokeOpacity: 1,  //透明度0～1(def:1)
      strokeWeight: 5,   //px指定（def:1)
      zIndex: 1      //重なり順
    });
     },
     // 取得失敗した場合
     function(error) {
    // エラーメッセージを表示
    switch(error.code) {
      case 1: // PERMISSION_DENIED
     alert("位置情報の利用が許可されていません");
     break;
      case 2: // POSITION_UNAVAILABLE
     alert("現在位置が取得できませんでした");
     break;
      case 3: // TIMEOUT
     alert("タイムアウトになりました");
     break;
      default:
     alert("その他のエラー(エラーコード:"+error.code+")");
     break;
    }
     }
   );
    // Geolocation APIに対応していない
    } else {
   alert("この端末では位置情報が取得できません");
    }
  }
   </script>
 </head>
<body>
<div id="map" style="width:800px; height:600px"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=【Google API キー】&v=3&callback=initMap"></script>
</body>
</html>

すると、地図上に四角い線が描けます。

↑↑↑ Page Top へ ↑↑↑

返信を残す コメントをキャンセル

返信を残すコメントをキャンセル