Erklären von JavaScript der Google Maps Geocoding API

Einführung

Ich habe die Kartenanzeigefunktion implementiert, indem ich die Google Maps-API in das Portfolio aufgenommen habe, das neulich mit Rails erstellt wurde. Das Verständnis des dort geschriebenen JavaScript-Codes war nicht eindeutig, daher habe ich ihn in einem Artikel zusammengefasst.

In diesem Artikel werde ich mich auf den JavaScript-Code konzentrieren und nicht auf die Implementierung der Google Maps-API. Ich werde in diesem Artikel nicht erklären, wie die API eingeführt wird. Wenn Sie dies wissen möchten, lesen Sie bitte den folgenden Artikel. [[Rails 6 / Google Map API] Für Anfänger! Einfache Einführung der Google Map-API mit Ruby on Rails](https://qiita.com/nagaseToya/items/e49977efb686ed05eadb#%E6%A4%9C%E7%B4%A2%E3%83%95%E3%82 % A9% E3% 83% BC% E3% 83% A0% E3% 81% 8B% E3% 82% 89% E4% BD% 8F% E6% 89% 80% E3% 82% 92% E7% 89% B9 % E5% AE% 9A% E3% 81% 97% E3% 83% 94% E3% 83% B3% E3% 82% 92% E5% 88% BA% E3% 81% 99)

"Ich habe es geschafft, einen Artikel im Internet zu kopieren, aber ich kann den Code nicht verstehen." Wenn Sie Fragen haben, lesen Sie diese bitte.

Vorausgesetztes Wissen

Das Konvertieren einer Adresse oder eines Ortsnamens in geografische Koordinaten wie Breiten- und Längengrade wird als "Geokodierung" bezeichnet. Die Geokodierungs-API von Google Maps ist eine API für die Geokodierung.

Vollständiges Bild

Erstellt eine App, mit der Personen, die neulich reisen möchten, Reiseleiter einstellen können Ich habe es so implementiert, dass der Ort, den ich als den Ort eingegeben habe, den ich bereisen möchte, auf der Karte angezeigt wird.

In diesem Artikel werde ich unter dem Bild dieser App erklären.

Quellcode

Der Quellcode für die Ansicht ist unten Die ID von "Adresse" wird an den Ort vergeben, an dem Sie reisen möchten, und die ID von "Karte" wird an den Ort vergeben, an dem Sie die Karte anzeigen möchten.

show.html.haml

    .Post_main__Box
      .Post_show_title
        = @post.title
      .Post_table.Text
        %table
          %tr
            %wohin Sie reisen möchten
            -#Adresse hier anzeigen
            %td#address
              = @post.region
          %tr
            %das gewünschte Datum und die gewünschte Uhrzeit
            %td
              = @post.datetime
          %tr
            %der gewünschte Preis
            %td
              = @post.charge
          %tr
            %th Zahlungsmethode
            %td
              = @post.payment
      .Post_head
        = "-Anfragedetails-"
      .Post_content
        = simple_format(@post.content)
      .Post_head
        = "-Karte-"
      -#Karte hier anzeigen
      .Post_map#map

Darüber hinaus finden Sie unten den JavaScript-Quellcode.

map.js

//Auf Verarbeitung setzen, nachdem HTML geladen wurde
document.addEventListener('DOMContentLoaded', () => {
  const inputAddress = document.getElementById('address').textContent;    //①
  const target = document.getElementById('map');    //②
  geocoder = new google.maps.Geocoder();   // ③

  geocoder.geocode( { address: inputAddress}, (results, status) => {  // ④
    if (status == 'OK') {  // ⑤
      const map = new google.maps.Map(target, {  // ⑥
        center: results[0].geometry.location,   // ⑦
        zoom: 13  // ⑧
      });
      new google.maps.Marker({  // ⑨
          map: map,  // ⑩
          position: results[0].geometry.location  // ⑪
      });
    } else {   // ⑫
      document.getElementById('map').style.height = '20px'   // ⑬
      document.getElementById('map').innerHTML = 'Ich kann den entsprechenden Ort nicht finden.'   // ⑭
    }
  });   
})

Kommentar

Ich werde den obigen JavaScript-Code erklären.

** ▼ Über ① und ② **

const inputAddress = document.getElementById('address').textContent;   //①
const target = document.getElementById('map');   //②

In ① wird die Zeichenfolge (in diesem Fall Adresse) in dem Element mit der ID "Adresse" erfasst und "Eingabeadresse" zugewiesen. In (2) wird das Objekt des div-Elements des Bereichs, der die Karte mit der ID "map" anzeigt, "target" zugewiesen.

** Über ③ **

geocoder = new google.maps.Geocoder();

In dieser Beschreibung wird das Objekt (die Instanz) von "google.maps.Geocoder" generiert, das für die Kommunikation mit dem Google-Server erforderlich ist. Auf die API wird über dieses Objekt zugegriffen.

** Über ④ **

geocoder.geocode( { address: inputAddress}, (results, status) => {   

Verwenden Sie hier zunächst die Methode geocode () für das in ① erstellte geocoder-Objekt. Ich sende eine Anfrage für die Geokodierung.

Beim Senden einer Anforderung muss die API-Spezifikation den Wert "address", "location" oder "placeId" übergeben. Im obigen Code wird der in ① definierte Wert von inputAddress in die Eigenschaft von address gestellt und als Parameter übergeben.

Wenn die Anforderung abgeschlossen ist, werden das Ergebnis ("Ergebnisse") und der Status ("Status") zurückgegeben. Um sie zu erhalten und zu verarbeiten, schreiben Sie eine Rückruffunktion mit "Ergebnissen" und "Status" als Argumenten.

** Über ⑤ **

if (status == 'OK')

Der als Ergebnis der Anforderung zurückgegebene Status gibt "OK" zurück, wenn die Geokodierung erfolgreich war. Wenn dies nicht erfolgreich ist, wird ein Code wie "ERROR" zurückgegeben. Die obige Beschreibung stellt den Fall einer erfolgreichen Geokodierung dar.

** ▼ Über ⑥ ~ ⑧ **

const map = new google.maps.Map(target, {  // ⑥
  center: results[0].geometry.location,   // ⑦
  zoom: 13  // ⑧
});

In ⑥ wird eine Karte mit "new google.maps.Map" generiert und "map" zugewiesen. Im Konstruktor der Klasse "google.maps.Map" ist das erste Argument das div-Element, das die Karte anzeigt. Hier wird das in ② definierte "Ziel" angegeben. Geben Sie im zweiten Argument das Objekt an, mit dem die Kartenkoordinaten und die Zoomstufe festgelegt werden.

In ⑦ erhalten Sie die Längen- und Breitengradinformationen aus den Anforderungsergebnissen mit results [0] .geometry.location. Es wird so beschrieben, dass die geografischen Koordinaten in der Mitte der Karte angezeigt werden. Da das Ergebnis der Anforderung als Array zurückgegeben wird, wird es übrigens als "results [0]" beschrieben.

Darüber hinaus wird die Zoomstufe durch ⑧ festgelegt. Je größer diese Zahl ist, desto größer wird die Karte angezeigt.

** ▼ Über ⑨ ~ ⑪ **

new google.maps.Marker({  // ⑨
    map: map,  // ⑩
    position: results[0].geometry.location  // ⑪
});

In der Beschreibung wird hier eine Markierung (roter Stift) auf der Karte angezeigt. In ⑨ wird ein Markierungsobjekt erstellt und map und position werden als Optionen in den Argumenten angegeben. In ⑩ wird die Karte zur Anzeige der Markierung angegeben, und hier wird die in ⑥ definierte Karte angegeben. In ⑪ wird die Position zum Anzeigen der Markierung durch die geografischen Koordinaten angegeben, die aus dem Ergebnis der Anforderung erhalten werden.

Übrigens, wenn Sie als Option animation: google.maps.Animation.DROP hinzufügen, Sie können eine Animation hinzufügen, die den Marker von oben fallen lässt.

** ▼ Über ⑫ ~ ⑭ **

} else {   // ⑫
  document.getElementById('map').style.height = '20px'   // ⑬
  document.getElementById('map').innerHTML = 'Ich kann den entsprechenden Ort nicht finden.'   // ⑭
}

In diesem Abschnitt wird beschrieben, was zu tun ist, wenn die Geokodierung nicht erfolgreich ist. Die Höhe des div-Elements, das die Karte anzeigt, wird in ⑬ geändert, und der Inhalt von HTML wird in Zeichen in ⑭ umgeschrieben. Wenn Sie es so schreiben, wird es wie folgt angezeigt.

Artikel, auf die verwiesen wird

Bei der Veröffentlichung dieses Artikels habe ich auf die folgenden Artikel verwiesen. Die folgenden Artikel sind ausführlicher geschrieben. Wenn Sie also mehr wissen möchten, schauen Sie bitte. Geocoding Service  |  Maps JavaScript API  |  Google Developers Verwendung von Google Maps API / Web Design Leaves Geocoding-Mappy Verwendung von Google Maps API JavaScript- Einführung in die JavaScript-API von Google Maps