[Rails] google maps api So posten und anzeigen Sie einschließlich Karteninformationen

Einführung

・ Ordnet die JavaScript-API zu ・ Geokodierungs-API

Mit der oben genannten API habe ich den Prozess des Posten und Anzeigens eines Posts mit einer Karte bei der Erstellung einer persönlichen Anwendung implementiert. Ich war ziemlich süchtig danach, mich auf verschiedene Artikel zu beziehen, also werde ich es zusammenfassen.

• Andere Buchungsfunktionen als Karten werden als erledigt zusammengefasst.

Nachtrag [Rails] Beschreibung der Google Maps-API, wenn Breiten- und Längengrade nicht gespeichert werden können Ich konnte den Spielraum und die Milde nicht gut erfassen. Wenn Sie also eine ähnliche Person haben, lesen Sie bitte auch diesen Artikel.

Implementierungsdetails / Bildfoto

1. Bitten Sie den Benutzer, den Ortsnamen oder die Adresse einzugeben

2. Legen Sie die Markierung auf der Google-Karte auf der Detailseite ab und zeigen Sie sie an.

Zum Zeitpunkt der Veröffentlichung

• Bitte beachten Sie, dass der vordere Teil fast dem Standardteil entspricht.

Detailseite

Google API Sie müssen die API erhalten, wenn Sie googlemap verwenden. Holen Sie sich den API-Schlüssel über den unten stehenden Link. Google Maps Platform Ich werde diesmal die Erfassungsmethode weglassen.

In der diesmal erstellten App ・ Ordnet die JavaScript-API zu ・ Geokodierungs-API Wird verwendet, also bitte aktivieren.

Datenbankerstellung

Erstellen Sie zunächst eine Datenbank. Wenn Sie es bereits erstellt haben, fügen Sie eine Spalte hinzu.

Posttisch

Association

has_one :spot

Spot Tisch

Association

belongs_to :post

Edelsteininstallation

Gemfile

gem "gmaps4rails"
gem "geocoder"
gem "gon"
gem "dotenv-rails"

Wenn Sie es in der Gemfile beschreiben können, führen Sie die Bundle-Installation durch.

Von oben ・ Gem "gmaps4rails", mit dem Sie ganz einfach Google Maps erstellen können ・ Edelstein "Geocoder", der Ortsnamen in Breiten- und Längengrade umwandeln kann -Gem "gon", mit dem JS Controller-Variablen verwenden kann ・ Gem "dotenv-Rails", um den Schlüssel der GoogleMap-API zu verbergen

JS eingeführt

Bearbeiten Sie application.html.haml

ruby:application.html.haml

!!!
%html
  %head
   .
   .
   .
    = include_gon
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
  %body
    = yield
    %script{src: "https://maps.googleapis.com/maps/api/js?key=#{ENV["GOOGLE_MAP_KEY"]}&callback=initMap"}
    %script{src: "//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"}
    %script{src: "//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js", type:"text/javascript"}

Beschreibe in% head, damit der Edelstein "gon" verwendet werden kann.

Es gibt eine Beschreibung für die Verwendung von JS in% body. Ich denke, es gibt eine Möglichkeit, es in% head zu schreiben, aber diesmal habe ich es in% body geschrieben.

ENV ["GOOGLE_MAP_KEY"] enthält den API-SCHLÜSSEL, der in der ENV-Datei versteckt ist.

.env

GOOGLE_MAP_KEY = "Bitte beschreiben Sie den erworbenen API-SCHLÜSSEL"

Erstellen Sie eine .env-Datei, um die oben genannten zu beschreiben.

Erstellen Sie underscore.js

Erstellen Sie underscore.js unter app / assets / javascripts und kopieren Sie den unten verlinkten Code und fügen Sie ihn ein.

underscore.js

Bearbeiten Sie application.js

Bearbeiten Sie application.js.

application.js

//= require underscore
//= require gmaps/google

Modell bearbeiten

Bearbeiten Sie anschließend jedes Modell wie folgt.

post.rb

class Post < ApplicationRecord
  has_one :spot, dependent: :destroy
  accepts_nested_attributes_for :spot
end

spot.rb

class Spot < ApplicationRecord
  belongs_to :post
  
  geocoded_by :address
  after_validation :geocode
end

Ansicht bearbeiten

Erstellen Sie eine Beitragsseite. Der Beitrag der Googlemap und die Beschreibung der Anzeige.

Erstellen Sie ein Formular, um den Namen der Adresse oder des Ortes einzugeben.

ruby:new.html.haml

= form_with(model: @post, local: true, multipart: true) do |f|
  .spot
    = f.fields_for :spot do |s|
      = s.label :address, "Überprüfen Sie den Standort(Suche auf Google Map)", class: 'spot__title'
      = s.text_field :address, placeholder: "Geben Sie einen Punkt ein", id: "address", class: 'spot__text'
    %input{onclick: "codeAddress()", type: "button", value: "Suchen nach"}
    .map{id: "map", style: "height: 320px; width: 640px;"}

Beschreiben Sie als Nächstes den Google Map-Teil der veröffentlichten Detailseite.

ruby:show.html.haml

.show
  .show__address
    = @post.spot.address
  .show__maps{id: "show_map", style: "height: 320px; width: 400px;"}

Controller bearbeiten

Bearbeiten Sie den Controller.

post.controller

def new
  @post = Review.new
  @post.build_spot
end

def create
  @review = Review.new(review_params)
  if @post.save
    redirect_to root_path
  else
    redirect_to new_review_path
  end
end

def show
  @post = Review.find(params[:id])
  @lat = @review.spot.latitude
  @lng = @review.spot.longitude
  gon.lat = @lat
  gon.lng = @lng
end

private

def review_params
  params.require(:post).permit(:title, :text,spot_attributes: [:address])
end

Da es has_one in der .build-Methode der neuen Aktion entspricht @post.build_spot Es wird gesagt.

Beschrieben in Show Action

@lat = @review.spot.latitude @lng = @review.spot.longitude gon.lat = @lat gon.lng = @lng

Daher werden die in der Steuerung definierten Variablen "@ lat" und "@ lng" "gon.lat" bzw. "gon.lng" zugewiesen, damit sie von JavaScript verarbeitet werden können.

JavaScript erstellen

Als nächstes erstellen wir eine JavaScript-Datei.

Erstellen Sie googlemap.js in Asset / Javascripts /.

googlemap.js

let map //Variablendefinition
let geocoder //Variablendefinition

function initMap(){ //Rückruffunktion
  geocoder = new google.maps.Geocoder() //Greifen Sie auf den GoogleMapsAPI-Geokodierungsdienst zu
  if(document.getElementById('map')){ //'map'Ausführen, wenn Sie die ID erhalten können
    map = new google.maps.Map(document.getElementById('map'), { //'map'Holen Sie sich die ID und zeigen Sie die Karte an
      center: {lat: 35.6594666, lng: 139.7005536}, //Der Ort, an dem zuerst angezeigt werden soll (diesmal ist "Shibuya-Scramble-Kreuzung" der Anfangswert).
      zoom: 15, //Vergrößerungsrate (kann von 1 bis 21 eingestellt werden)
    });
  }else{ //'map'Wenn es keine ID gibt
    map = new google.maps.Map(document.getElementById('show_map'), { //'show_map'Holen Sie sich die ID und zeigen Sie die Karte an
      center: {lat: gon.lat, lng: gon.lng}, //Verwenden Sie die vom Controller definierte Variable als Breiten- / Längengradwert (der Wert befindet sich in der DB).
      zoom: 15, //Vergrößerungsrate (kann von 1 bis 21 eingestellt werden)
    });

    marker = new google.maps.Marker({ //Setzen Sie einen Marker auf Google Map
      position:  {lat: gon.lat, lng: gon.lng}, //Entscheiden Sie, wo der Marker abgelegt werden soll (Wert befindet sich in der Datenbank)
      map: map //Geben Sie die Karte an, auf der die Markierung abgelegt werden soll
    });
  }
}

function codeAddress(){ //Rückruffunktion
  let inputAddress = document.getElementById('address').value; //'address'Holen Sie sich den ID-Wert (Wert)

  geocoder.geocode( { 'address': inputAddress}, function(results, status) { //Übergeben Sie die Adresse, die Sie geocodieren möchten, als Argument
    if (status == 'OK') {
      let lat = results[0].geometry.location.lat(); //Breitengrad des geokodierten Ergebnisses
      let lng = results[0].geometry.location.lng(); //Geokodierte Ergebnislänge
      let mark = {
          lat: lat, //Breite
          lng: lng  //Längengrad
      };
      map.setCenter(results[0].geometry.location); //Breite / Länge des nächstgelegenen Ortes, an dem Sie eine lesbare Adresse erhalten möchten
      let marker = new google.maps.Marker({
          map: map, //Geben Sie die Karte an, auf der die Markierung abgelegt werden soll
          position: results[0].geometry.location //Entscheiden Sie, wo der Marker abgelegt werden soll
      });
    } else {
      alert('Es gab kein entsprechendes Ergebnis');
    }
  });   
}

Die obige Beschreibung finden Sie unter https://qiita.com/kanato4/items/f2f3f7accd880224616a Ich durfte mich beziehen.

Am Ende

Das ist es! Ich habe viel Zeit allein für diesen Teil aufgewendet, als ich zum ersten Mal eine Anwendung mit der Google-API erstellt habe. Ich hoffe, dass dies für spätere Wissenschaftler hilfreich sein wird.