Expliquer JavaScript de l'API de géocodage de Google Maps

introduction

J'ai implémenté la fonction d'affichage de la carte en incorporant l'API Google Maps dans le portefeuille créé avec Rails l'autre jour. La compréhension du code JavaScript que j'y ai écrit était ambiguë, alors je l'ai résumé dans un article.

Cet article se concentre sur le code JavaScript plutôt que sur la façon de déployer l'API Google Maps. Je n'expliquerai pas comment présenter l'API dans cet article, donc si vous voulez le savoir, veuillez consulter l'article suivant. [[Rails 6 / Google Map API] Pour les débutants! Introduction facile de l'API Google Map avec 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)

"J'ai réussi à copier un article sur le net, mais je ne comprends pas le code." Si vous avez des questions, veuillez le lire.

Connaissances préalables

La conversion d'une adresse ou d'un nom de lieu en coordonnées géographiques telles que la latitude et la longitude est appelée "géocodage". L'API de géocodage de Google Maps est une API de géocodage.

Image complète

Création d'une application qui permet aux personnes souhaitant voyager l'autre jour de recruter des guides touristiques Je l'ai implémenté pour que le lieu dans lequel je suis entré comme lieu de destination soit affiché sur la carte.

Dans cet article, je vais vous expliquer sous l'image de cette application.

Code source

Le code source de la vue est ci-dessous L'id de ʻaddress est donné à l'endroit où vous voulez voyager, et l'id de map` est donné à l'endroit où vous voulez afficher la carte.

show.html.haml

    .Post_main__Box
      .Post_show_title
        = @post.title
      .Post_table.Text
        %table
          %tr
            %th Où vous voulez voyager
            -#Afficher l'adresse ici
            %td#address
              = @post.region
          %tr
            %la date et l'heure souhaitées
            %td
              = @post.datetime
          %tr
            %prix souhaité
            %td
              = @post.charge
          %tr
            %e mode de paiement
            %td
              = @post.payment
      .Post_head
        = "-Détails de la demande-"
      .Post_content
        = simple_format(@post.content)
      .Post_head
        = "-carte-"
      -#Afficher la carte ici
      .Post_map#map

De plus, le code source JavaScript est ci-dessous.

map.js

//Défini pour traiter une fois le chargement HTML terminé
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 = 'Je ne trouve pas le lieu correspondant.'   // ⑭
    }
  });   
})

Commentaire

Je vais expliquer le code JavaScript ci-dessus.

** ▼ À propos de ① et ② **

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

Dans ①, la chaîne de caractères (adresse dans ce cas) dans l'élément avec l'id de ʻaddress est acquise et affectée à ʻinputAddress. Dans (2), l'objet de l'élément div de la zone qui affiche la carte avec l'ID de map est assigné à target.

** À propos de ③ **

geocoder = new google.maps.Geocoder();

Dans cette description, l'objet (instance) de google.maps.Geocoder requis pour communiquer avec le serveur Google est généré. L'API est accessible via cet objet.

** À propos de ④ **

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

Ici, d'abord, en utilisant la méthode geocode () sur l'objet geocoder créé dans ①, J'envoie une demande de géocodage.

Lors de l'envoi d'une requête, vous devez transmettre une valeur de ʻaddress, location ou placeId dans la spécification de l'API. Dans le code ci-dessus, la valeur de ʻinputAddress définie dans ① est placée dans la propriété de ʻaddress` et passée en paramètre.

Lorsque la demande est terminée, le résultat (results) et l'état ( status) seront retournés. Pour les obtenir et les traiter, écrivez une fonction de rappel avec results et status comme arguments.

** À propos de ⑤ **

if (status == 'OK')

Le statut renvoyé suite à la requête renvoie «OK» si le géocodage a réussi. En cas d'échec, un code tel que ʻERREUR` est renvoyé. La description ci-dessus représente le cas d'un géocodage réussi.

** ▼ À propos de ⑥ ~ ⑧ **

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

Dans ⑥, une carte est générée avec new google.maps.Map et assignée à map. Dans le constructeur de la classe google.maps.Map, le premier argument est l'élément div qui affiche la carte. Ici, la cible définie dans ② est spécifiée. Dans le deuxième argument, spécifiez l'objet qui définit les coordonnées de la carte et le niveau de zoom.

Dans ⑦, obtenez les informations de longitude et de latitude à partir des résultats de la requête avec results [0] .geometry.location. Il est décrit de manière à ce que les coordonnées géographiques soient affichées au centre de la carte. En passant, puisque le résultat de la requête est renvoyé sous forme de tableau, il est décrit comme «résultats [0]».

De plus, le niveau de zoom est spécifié par ⑧. Plus ce nombre est élevé, plus la carte sera affichée.

** ▼ À propos de ⑨ ~ ⑪ **

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

Ici, la description est d'afficher un marqueur (épingle rouge) sur la carte. Dans ⑨, un objet marqueur est créé et map et position sont spécifiés comme options dans les arguments. Dans ⑩, la carte pour afficher le marqueur est spécifiée, et ici, map définie dans ⑥ est spécifiée. En ⑪, la position d'affichage du marqueur est spécifiée par les coordonnées géographiques obtenues à partir du résultat de la requête.

Au fait, si vous ajoutez ʻanimation: google.maps.Animation.DROP` comme option, Vous pouvez ajouter une animation qui fait tomber le marqueur du haut.

** ▼ À propos de ⑫ ~ ⑭ **

} else {   // ⑫
  document.getElementById('map').style.height = '20px'   // ⑬
  document.getElementById('map').innerHTML = 'Je ne trouve pas le lieu correspondant.'   // ⑭
}

Cette section décrit la marche à suivre en cas d'échec du géocodage. Dans ⑬, la hauteur de l'élément div qui affiche la carte est modifiée, et dans ⑭, le contenu du HTML est réécrit en caractères. Si vous l'écrivez ainsi, il s'affichera comme suit.

Articles référencés

En publiant cet article, j'ai fait référence aux articles suivants. Les articles suivants sont écrits plus en détail, donc si vous voulez en savoir plus, jetez un œil. Geocoding Service  |  Maps JavaScript API  |  Google Developers Comment utiliser Google Maps API / Web Design Leaves Geocoding-Mappy Comment utiliser l'API Google Maps JavaScript- Introduction à l'API JavaScript de Google Maps