GoogleMapsAPI를 사용해보기

13277 단어 HTML5자바스크립트GoogleMapsAPICSS3
안녕하세요.
지난번까지는 wxPython에 대한 기사를 연속 5회를 썼습니다.
그러나 이번에는 조금 테마를 바꾸어 GoogleMapsAPI에 대해 이야기하고 싶습니다.
왜 갑자기 바꾸었다고 생각하는 사람이 있을지도 모릅니다. 이유는 나 자신의 다음 연구 테마에 사용하기 때문에 여러가지 조사해 보았습니다. 이번은 이것의 간단한 소개가 됩니다.

첫째, GoogleMapsAPI를 사용하려면 API 키가 필요합니다.
ぇぺぺrs. 오, ぇ. 코 m / 마 ps / 도쿠 멘들 온 / 그럼 ㄔ sc 리 pt / 게 t 아피 케 y? hl = 그럼
↑이 페이지에서 쉽게 키를 얻을 수 있습니다.

index.html
<!DOCTYPE html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="robots" content="noindex,nofollow,noarchive" />
  <title>GoogleMapsAPI Sample</title>
  <script src="http://maps.googleapis.com/maps/api/js?key=APIキー" type="text/javascript"></script>
  <script src="sample.js" type="text/javascript"></script>
  <script src="jquery-3.3.1.js" type="text/javascript"></script>
</head>

<body onload="initialize()">
  <div id="map_canvas" style="width: 700px; height: 700px"></div>

  <form>
    <p><input type="button" id="btn" value="マーカー作成" onclick="loadJson()" /></p>
  </form>
</body>
</html>

이쪽은 표시하기 위한 html이 되고 있습니다.
6행째의 「API 키」의 부분은 당신 자신으로 취득한 API 키를 넣어 주세요.
7 행은 아래의 sample.js를 호출합니다.
8 행의 jquery-3.3.1.js에 대해서는 htps : // j 쿠에 ry. 코 m / 도 w 응 아 d /의 "jQuery"의 "Download the compressed, production jQuery 3.3.1"에서 다운로드하십시오.
GoogleMap을 표시하기 위해 <div id="map_canvas" style="width: 700px; height: 700px"></div>를 사용합니다. Map의 크기는 700px*700px입니다.

sample.js에 대한 설명은 프로그램 내에서 코멘트 형식으로 말하고 싶습니다.

sample.js
// マップ初期化
function initialize() {
  // 表示する場所のidを取得
  var target = document.getElementById("map_canvas") 
  // 経度：lat，緯度：lngを設定
  var latlng = {lat: 35.383575, lng: 139.344170};
  var options = {
    zoom: 10, // ズーム1は一番小さい
    center: latlng //Mapの中央:上の座標
  };
  // Mapを作成
  map = new google.maps.Map(target, options);

  // マーカーを表示
  var marker = new google.maps.Marker({
    position: latlng, 
    map: map,
    title: 'where' // マーカーの名前
  });

  // Mapをクリックする時の動作
  map.addListener("click",function(e){
    // コンソールで経度を表示
    console.log("lat: " + e.latLng.lat());
    // コンソールで緯度を表示
    console.log("lng: " + e.latLng.lng());
    // コンソールで{経度,緯度}を表示
    console.log("(lat,lng): " + e.latLng.toString());
    // this.setCenter(e.latLng); // クリックする場所をMapの中心にする(画面の移動速度が速い)
    this.panTo(e.latLng); //クリックする場所をMapの中心にする(画面の移動速度がゆっくり)
    // クリックする場所をマーカーを立てる
    var click_marker = new google.maps.Marker({
      position: e.latLng,
      map: map,
      title: e.latLng.toString(),
      animation: google.maps.Animation.DROP // マーカーを立つときのアニメーション
    });
    // 上で立てたマーカーをもう一度クリックするとマーカーを削除
    click_marker.addListener("click",function(){
      this.setMap(null);
    });
  });

}

// 「マーカー作成」ボタンをクリックする時のマーカー表示
// JSONデータを使って座標と名称を記録
function loadJson(){
  var json = [];
  $(function(){
    // JSONのファイルを読み込む
    $.getJSON("data.json", function(data) {
      json = data;
      //JSONの要素数分マーカーを作成
      console.log(json);
      for (i = 0; i < json.length; i++) {
        latlng = new google.maps.LatLng(json[i].lat,  json[i].lng);
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
        });
      }
    });
  });
}

웹 페이지를 시작할 때 Map 상태는 아래 그림입니다.



마커 만들기 버튼을 클릭하면 많은 마커가 만들어집니다.
아래 그림이지만 Map의 중심을 이동했습니다.


이번 「GoogleMapsAPI를 사용해 본다」는 이상으로 끝납니다.
또, 다음의 내용은 미정입니다만, 특별한 일이 없으면 「wxPython 사용 (5) 」의 계속에 대해서 쓴다고 생각합니다.

읽어 주셔서 감사합니다.
Google Maps API Geocoding Service에서 위도 경도를 얻고 위치를 표시합니다.
디자이너를 위한 GoogleMap 스타일 지정 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage