[Rails] So berechnen Sie Breiten- und Längengrade mit hoher Genauigkeit mithilfe der Geocoding-API und zeigen sie auf Google Map an

Ziel

** Zeigen Sie die vom Benutzer registrierte Adresse in der Mitte der Karte an und setzen Sie eine Markierung. ** **.

Entwicklungsumgebung

・ Ruby: 2.5.7 Schienen: 5.2.4 ・ Vagrant: 2.2.7 -VirtualBox: 6.1 ・ Betriebssystem: macOS Catalina

Annahme

Folgendes wurde implementiert.

・ Schlanke Einführung

• Implementierung der Anmeldefunktion ・ Google Map-Anzeige

Da die Genauigkeit nur bei "gem'geocoder" gering ist (es gibt Bereiche, in denen die Adresse nicht angegeben werden kann), Wir werden es so implementieren, dass der Breiten- und Längengrad von der Adresse mit hoher Genauigkeit unter Verwendung der "Geocoding API" angegeben werden kann.

Aktivieren Sie die Geokodierungs-API

1. Greifen Sie auf den unten stehenden Link zu

Google Cloud Platform

2. Klicken Sie auf "Zur API-Übersicht wechseln".

3. Klicken Sie auf "Bibliothek"

4. Geben Sie "geo" in das Suchformular ein und klicken Sie auf "Geocoding API".

5. Klicken Sie auf "Aktivieren".

6. Klicken Sie auf das Teil, das vom roten Rahmen umgeben ist

7. Ein Pulldown-Menü wird angezeigt. Klicken Sie auf "Alle Google Maps-APIs".

8. Klicken Sie auf "Anmeldeinformationen".

9. Klicken Sie auf "API-Schlüsselname".

10. Legen Sie die Authentifizierungsinformationen fest

** ① API-Einschränkungen ** Wählen Sie "Schlüsseleinschränkungen" und "Geokodierungs-API" aus dem Pulldown-Menü.

** ② Stellen Sie sicher, dass Maps JavaScript API und Geocoding API ausgewählt sind, und klicken Sie auf Save **

11. Überprüfen Sie, ob zwei APIs vorhanden sind

Der API-Schlüssel wird durch Hinzufügen der API nicht geändert. Dies ist also das Ende.

Implementierung

1. Stellen Sie Gem vor

Gemfile

gem 'gon'
gem 'geocoder'

gem 'gon' ➡︎ Stellen Sie die im Controller definierten Instanzvariablen im JavaScript der Ansicht zur Verfügung.

gem 'geocoder' ➡︎ Berechnen Sie Längen- und Breitengrad aus der Adresse.

Terminal

$ bundle

2. Erstellen und bearbeiten Sie die Konfigurationsdatei "Geocorder"

Terminal

$ touch config/initializers/geocoder.rb

geocoder.rb

#Nachtrag
Geocoder.configure(
  lookup: :google,
  api_key: ENV['GOOGLE_MAP_API']
)

Jetzt können Sie die "Geocoding API" verwenden und den Breiten- und Längengrad mit hoher Genauigkeit berechnen.

3. Spalte hinzufügen

Terminal

$ rails g migration AddColumnsToUsers address:string latitude:float longitude:float

add_columns_to_users.rb

class AddColumnsToUsers < ActiveRecord::Migration[5.2]
  def change
    add_column :users, :address, :string
    add_column :users, :latitude, :float
    add_column :users, :longitude, :float
  end
end

Terminal

$ rails db:migrate

4. Bearbeiten Sie das Modell

user.rb

  #Nachtrag
  geocoded_by :address
  after_validation :geocode

geocoded_by :address ➡︎ Berechnen Sie Breiten- und Längengrade anhand der Adressspalte.

after_validation :geocode ➡︎ Ändern Sie den Breiten- und Längengrad, wenn Sie die Adresse ändern.

5. Bearbeiten Sie den Controller

** ① Bearbeiten Sie application_controller.rb **

Fügen Sie dem starken Parameter "Adresse" hinzu.

application_controller.rb

def configure_permitted_parameters
  devise_parameter_sanitizer.permit(:sign_up, keys: [:email, :name, :address])
end

** ② Bearbeiten Sie users_controller.rb **

users_controller.rb

def show
  @user = User.find(params[:id])
  gon.user = @user #Nachtrag
end

6. Ansicht bearbeiten

** ① Bearbeiten Sie application.html.slim **

Laden Sie gon. Bitte beachten Sie, dass es vor CSS und JavaScript geladen wird.

slim:application.html.slim

doctype html
html
  head
    title
      | Bookers2
    = csrf_meta_tags
    = csp_meta_tag
    = include_gon #Nachtrag
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'

** ② Adresseingabeformular zum Registrierungsbildschirm für neue Mitglieder hinzufügen **

slim:resistrations/new.html.slim

= f.label :address, 'Adresse'
br
= f.text_field :address, class: 'form-control'
br

** ③ Karte bearbeiten **

slim:users/show.html.erb

#map style='height: 500px; width: 500px;'

- google_api = "https://maps.googleapis.com/maps/api/js?key=#{ ENV['GOOGLE_MAP_API'] }&callback=initMap".html_safe
script{ async src=google_api }

javascript:

  let map;

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

    map = new google.maps.Map(document.getElementById('map'), {
      //Rufen Sie Längen- und Breitengrade von Variablen auf, die in der Steuerung definiert sind, und zeigen Sie sie in der Mitte der Karte an
      center: {
        lat: gon.user.latitude,
        lng: gon.user.longitude
      },
      zoom: 12,
    });

    marker = new google.maps.Marker({
      //Rufen Sie Längen- und Breitengrade von Variablen auf, die in der Steuerung definiert sind, und setzen Sie Markierungen
      position: {
        lat: gon.user.latitude,
        lng: gon.user.longitude
      },
      map: map
    });
  }

Hinweis

Wenn Sie "Turbolinks" nicht deaktivieren, wird die Karte nicht umgeschaltet. Deaktivieren Sie sie daher unbedingt.

So deaktivieren Sie Turbolinks