Einführung

Was zu machen

Es handelt sich um eine Karte, die anhand der angegebenen Adresse oder des Ortsnamens nach Breiten- und Längengraden sucht und an jedem Punkt Markierungen anbringt. (Sie können auch eine Adresse wie "1-1-2 Oshiage, Sumida-ku, Tokio" (Sky Tree) posten.) スクリーンショット 2020-08-28 1.54.39.png

Dinge vorzubereiten

Vorausgesetztes Wissen

Dieses Mal gehen wir davon aus, dass die Karte mithilfe der Google Map-API angezeigt werden kann. Wenn Sie nicht verstehen, wie eine Karte mit GoogleMapAPI angezeigt wird, 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/e49977efb6 86ed05eadb "Informationen zur Kartenanzeige")

Funktion

Bitte bereiten Sie eine einfache Buchungsfunktion vor. Ich habe eine Kartentabelle mit einer Adressspalte zum Posten von Adressen und Ortsnamen erstellt. スクリーンショット 2020-08-29 16.41.46.png Es ist so!

fließen

Fügen Sie der Kartentabelle Spalten mit Längen- und Breitengraden hinzu, um Längen- und Breitengrade zu speichern.
Verwenden Sie Geocoder, um den Breiten- und Längengrad von der eingegebenen Adresse oder dem eingegebenen Ortsnamen abzurufen und in den Spalten für Breite und Länge zu speichern.
Platzieren Sie eine Markierung am angegebenen Längen- / Breitengrad.

Implementierung

Wir werden es gemäß dem obigen Ablauf implementieren!

1. Spalte hinzufügen

$ rails g migration AddCoordinateToMaps latitude:float longitude:float

Erstellen Sie eine Migrationsdatei, um mit dem obigen Befehl Spalten hinzuzufügen.

$ rails db:migrate

Vergessen Sie nicht zu migrieren!

2. Holen Sie sich mit Geocoder Längen- und Breitengrade

Geocoding ――Q. Was ist Geokodierung überhaupt? ??

A. Abrufen von Koordinaten (Breiten- / Längengrad) aus Adressen und Ortsnamen sowie Abrufen von Adressen und Ortsnamen aus Koordinaten. Sie können die Adresse und den Ortsnamen auch von der IP-Adresse abrufen.

Übrigens hat der folgende Artikel ausführlich über Geokodierung geschrieben. Wenn Sie also mehr wissen möchten, schauen Sie bitte. Rails Geocoder and Play

Installieren Sie die erforderlichen Edelsteine

gem 'geocoder'

Schreiben Sie den obigen Code in die Gem-Datei.

$ bundle install

Lassen Sie uns Bundle Install fest machen ~! Jetzt können Sie Geocoder in Schienen verwenden.

Geokodierung für das Modell

`map.rb`


class Map < ApplicationRecord
    geocoded_by :address
    after_validation :geocode
end

Schreiben Sie im Teil : address die Spalte, in der Sie die Geokodierung durchführen möchten. Wenn Sie diese beiden Zeilen für ein Modell mit "Adresse", "Breite" und "Länge" beschreiben, können Sie die Breite und Länge aus der in "Adresse" eingegebenen Adresse und dem Ortsnamen abrufen und in jeder Spalte speichern. Werde es tun.

Wenn Sie auf dem Listenbildschirm "Breite" und "Länge" anzeigen, werden Breite und Länge wie unten gezeigt angezeigt.

スクリーンショット 2020-08-29 18.15.22.png

Wenn Sie jedoch eine Adresse wie "1-1-2 Oshiage, Sumida-ku, Tokio" eingeben, können Sie den Längen- und Breitengrad nicht ermitteln.

Erstellen Sie eine Konfigurationsdatei für den Geocoder

Erstellen Sie eine Konfigurationsdatei mit dem folgenden Befehl.

$ rails g geocoder:config

Eine Konfigurationsdatei mit dem Namen config / initializers / geocoder.rb wird generiert. Beschreiben Sie daher die API-Informationen von googlemap in dieser Datei.

`ruby:config.initializers.geocoder.rb`


Geocoder.configure(
  # Geocoding options
  timeout: 5,                 # geocoding service timeout (secs)
  lookup: :google,         # name of geocoding service (symbol)
  api_key: 'YOUR_API_KEY',               # API key for geocoding service
  units: :km,                 # :km for kilometers or :mi for miles
)

Kommentieren Sie die vier Elemente "Timeout", "Lookup", "Api_key" und "Units" in der generierten "geocoder.rb" aus und füllen Sie die erforderlichen Elemente aus, wie im obigen Code gezeigt.

Auf diese Weise kann der Geocoder auch sehr detaillierte Adressen erhalten.

3. Zeigen Sie eine Markierung an der angegebenen Position an

`index.html.erb`




<div id='map'></div>

<script>
  let map

    function initMap(){
      geocoder = new google.maps.Geocoder()

      map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 35.68123620000001, lng:139.7671248},
          zoom: 12,
      });


      <% @maps.each do |m| %>
          (function(){
          var contentString = "Adresse:<%= m.address %>"; 

          var marker = new google.maps.Marker({
              position:{lat: <%= m.latitude %>, lng: <%= m.longitude %>},
              map: map,
              title: contentString
          });

          })();
      <% end %>
      }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

Wie der obige Code<% @maps.each do |m| %> ~ <% end %>Wenn Sie den Code, den Sie wiederholen möchten, in das Feld schreiben, wird an der Position der angegebenen Adresse oder des Ortsnamens eine Markierung angezeigt.

Obwohl die Adresse dem contentString zugewiesen ist, ist es zweckmäßig, der Variablen die Informationen zuzuweisen, die wahrscheinlich mehrmals verwendet werden. (Kann verwendet werden, wenn zusätzlich ein Ballon usw. implementiert wird.)

Referenzartikel

Rails Geocoder and Play
[[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/e49977efb6 86ed05eadb "Informationen zur Kartenanzeige")
[Mehrere Markierungen mithilfe der Google Maps-API in Rails 5 anzeigen](https://qiita.com/yamaotoko4177/items/30b72766d013904452fa 86ed05eadb "Informationen zur Kartenanzeige")
So ermitteln Sie mit Ruby on Rails und der Google Geocoding API die Längen- und Breitengrade der Adresse 86ed05eadb "Informationen zur Kartenanzeige")

[Rails 6 / Google Map API] Veröffentlichen Sie eine Adresse und setzen Sie mehrere Markierungen auf der Karte