[Schienen] Anzeigen von Google Maps mithilfe der Google Maps-API und Suchen von Routen zwischen mehreren Punkten

Einführung

Es gibt nur sehr wenige Artikel, die als Referenz verwendet werden können, und es war der schwierigste Teil beim Erstellen eines Portfolios. Deshalb habe ich es geschrieben, weil ich dachte, es wäre gut, es als Ausgabe für mein eigenes Lernen zu belassen und jemandem zu helfen! Was bedeutet diese Beschreibung als Anfänger? Ich beabsichtige, den Teil zu erklären, den ich denke. natürlich! Bitte beachten Sie, dass es viele Teile gibt, die ich denke.

Ziel

Sie können Google Map nicht nur mit der Google Maps-API anzeigen, sondern auch willkürlich aus dem Markierungsballon zur Routensuchliste hinzufügen. Ziel ist es, an mehreren Punkten nach Routen zu suchen. ezgif com-optimize-2

Entwicklungsumgebung

・ Ruby: 2.5.1 ・ Schienen: 5.2.1 ・ Betriebssystem: macOS

Annahme

・ Einführung von Slim

Aufbau

1. Installieren Sie die erforderlichen Edelsteine

Gemfile


gem 'dotenv-rails' #Machen Sie den API-Schlüssel zu einer Umgebungsvariablen
gem 'gon' #Stellen Sie die im Controller definierten Instanzvariablen in JavaScript zur Verfügung.
gem 'geocoder' #Berechnen Sie Längen- und Breitengrad aus der Adresse.

Terminal


$ bundle install

2. Machen Sie den API-Schlüssel zu einer Umgebungsvariablen

Erstellen Sie eine ".env" -Datei direkt unter der Anwendung

Terminal


$ touch .env

Schreiben Sie Ihren eigenen API-Schlüssel in ''

.env


GOOGLE_MAP_API = 'Eigener kopierter API-Schlüssel'

.gitignore


/.env

3. Deaktivieren Sie die Turbolinks

Gemfile


gem 'turbolinks' #Löschen Sie diese Zeile

app/assets/javascripts/application.js


//= require turbolinks //Löschen Sie diese Zeile

data-turbolinks-track ': Attribut' reload 'entfernen

ruby:app/views/layouts/application.html.slim


= stylesheet_link_tag    'application', media: 'all'
= javascript_include_tag 'application'

4. Stellen Sie die Geokodierungs-API zur Verfügung

Erstellen und bearbeiten Sie die Geocorder-Konfigurationsdatei

Terminal


$ touch config/initializers/geocoder.rb

config/initializers/geocoder.rb


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

Damit sind die Einstellungen abgeschlossen. Von hier aus geben wir die Implementierung ein, in der Google Map angezeigt wird.

Anzeige von Google Map

1. Fügen Sie dem Modell, das Sie hinzufügen möchten, eine Spalte hinzu

Fügen Sie für Ihre eigene App Ihrem Place-Modell eine Adressspalte hinzu. Die Breiten- und Längengradspalten sind die Längen- / Breitengradwerte, die aus den Werten in der Adressspalte von der Geocoding-API berechnet wurden. Da es sich um einen Bruchwert handelt, verwendet der Typ float.

Terminal


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

Terminal


$ rails db:migrate

2. Bearbeiten Sie das Modell

models/place.rb


  #Nachtrag
  geocoded_by :address #Berechnen Sie Breiten- und Längengrade anhand der Adressspalte.
  after_validation :geocode #Beim Ändern der Adresse werden auch der Breiten- und Längengrad geändert.

3. Bearbeiten Sie den Controller

controllers/places_controller.rb


def index
  @place = Place.all
  gon.place = @place #Nachtrag
end

private
  def place_params
    #"Adresse" zu starken Parametern hinzugefügt
    params.require(:place).permit(:name, :description, :image, :address)
  end

4. Bearbeiten Sie die Ansicht

① Bearbeiten Sie application.html.slim Schreiben Sie, um Gon vor CSS und JavaScript zu laden.

ruby:views/layouts/application.html.slim


doctype html
html
  head
    title
      | app_name
    = csrf_meta_tags
    = csp_meta_tag
    = include_gon #Nachtrag
    = stylesheet_link_tag    'application', media: 'all'
    = javascript_include_tag 'application'

② Fügen Sie dem neuen Registrierungsbildschirm ein Adresseneingabeformular hinzu

ruby:views/places/new.html.slim


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

③ Beschreiben Sie in der Datei, in der Google Map angezeigt wird

ruby:views/places/index.html.slim


div id = 'map_index' #Gib einen Ausweis,Die in der js-Datei beschriebene Google Map ist in diesen Teil eingebettet
- google_api = "https://maps.googleapis.com/maps/api/js?key=#{ ENV['GOOGLE_MAP_API'] }&callback=initMap".html_safe
script{ async src = google_api }

.map-route
  <Routensuchliste>
  ul id = "route-list" class = "list-group" #Die Schaltfläche zum Hinzufügen in der Sprechblase in der js-Datei fügt diese Position dem li-Element hinzu


div id = 'directions-panel' #Entfernung / Zeit ist eingebettet
  <Entfernung / Zeit zwischen Punkten>
  ul id = "display-list" class = "display-group"

.map-search
   = button_tag "Routensuche", id: "btn-search", class: "btn btn-primary", onclick:     "search()" #Suche durch Klickverarbeitung()Rufen Sie eine Funktion auf

[Über den Teil von google_api = ~ ~ ~ ~] → Rufen Sie die Funktion initMap auf, wenn Sie den Rückrufprozess einlesen. → .html_safe ist Escape-Verarbeitung → Das asynchrone Attribut lädt JavaScript asynchron, um das Rendern zu beschleunigen.

④ Beschreiben Sie die Größe, die Sie in scss auf Google Map anzeigen möchten

stylesheets/application.scss


#map_index{
  height: 400px;
  width: 400px; 
}

5. Bearbeiten Sie die JavaScript-Datei

Das ist das Herz. Erstellen Sie eine neue Datei direkt unter Assets / Javascripts und beschreiben Sie sie. Es mag lange Zeit schwierig sein zu sehen, aber nachdem wir die Variablen definiert haben, definieren wir einfach jede Funktion. die Funktion ist, ・ InitMap ・ MarkerEvent (i) ・ AddPlace (Name, Lat, Länge, Nummer) · Suche () Es gibt vier in der Reihenfolge von. Die schwer verständlichen Teile und Punkte entnehmen Sie bitte dem Kommentar.

assets/javascripts/googlemap.js


var map
var geocoder
var marker = [];
var infoWindow = [];
var markerData = gon.places; //Weisen Sie der Variablen die vom Controller definierte Instanzvariable zu
var place_name = [];
var place_lat = [];
var place_lng = [];

//Funktion zum Anzeigen von GoogleMap(Wird in der Rückrufverarbeitung aufgerufen)
function initMap(){
    geocoder = new google.maps.Geocoder()
    //ID anzeigen='map_index'Betten Sie Google Map in den Teil von ein
    map = new google.maps.Map(document.getElementById('map_index'), {
      center: { lat: 35.6585, lng: 139.7486 }, //Im Zentrum des Tokyo Tower
      zoom: 9,
    });

    //Zeigen Sie mehrere Marker und Sprechblasen durch iterative Verarbeitung an
    for (var i = 0; i < markerData.length; i++) {
      //Berechnen Sie den Breiten- und Längengrad jedes Punktes
      markerLatLng = new google.maps.LatLng({
        lat: markerData[i]['latitude'],
        lng: markerData[i]['longitude']
      });
      
      //Anzeige von Markern
      marker[i] = new google.maps.Marker({
        position: markerLatLng,
        map: map
      });

      //Anzeige des Ballons
      let id = markerData[i]['id']
      place_name[i]= markerData[i]['name'];
      place_lat[i]= markerData[i]['latitude'];
      place_lng[i]= markerData[i]['longitude'];
      infoWindow[i] = new google.maps.InfoWindow({
        //Inhalt des Ballons,Übergeben Sie das Array und die Array-Nummer jedes Attributs als Argumente
        content: `<a href='/places/${ id }'>${ markerData[i]['name'] }</a><input type="button" value="hinzufügen" onclick="addPlace(place_name, place_lat, place_lng, ${i})">`
      });
      markerEvent(i);
    }
  }
}

//Klicken Sie auf die Markierung, um eine Sprechblase anzuzeigen
function markerEvent(i) {
  marker[i].addListener('click', function () {
    infoWindow[i].open(map, marker[i]);
  });
}

//Zur Liste hinzufügen
function addPlace(name, lat, lng, number){
  var li = $('<li>', {
    text: name[number],
    "class": "list-group-item"
  });
  li.attr("data-lat", lat[number]); // data-lat zum Attribut lat[number]Einstellen
  li.attr("data-lng", lng[number]); // data-lng zum Attribut lng[number]Einstellen
  $('#route-list').append(li); //ID ist Route-Fügen Sie li am Ende des Listenelements hinzu
}

//Suche nach einer Route
function search() {
  var points = $('#route-list li');

  //Wenn es zwei oder mehr Punkte gibt
  if (points.length >= 2){
      var origin; //Startpunkt
      var destination; //Endpunkt
      var waypoints = []; //Wegpunkt

      // origin, destination,Wegpunkte festlegen
      for (var i = 0; i < points.length; i++) {
          points[i] = new google.maps.LatLng($(points[i]).attr("data-lat"), $(points[i]).attr("data-lng"));
          if (i == 0){
            origin = points[i];
          } else if (i == points.length-1){
            destination = points[i];
          } else {
            waypoints.push({ location: points[i], stopover: true });
          }
      }
      //Eine Anfrage stellen
      var request = {
        origin:      origin,
        destination: destination,
        waypoints: waypoints,
        travelMode:  google.maps.TravelMode.DRIVING
      };
      //Root-Serviceanforderung
      new google.maps.DirectionsService().route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          new google.maps.DirectionsRenderer({
            map: map,
            suppressMarkers : true,
            polylineOptions: { //Einstellungen für gezeichnete Linien
              strokeColor: '#00ffdd',
              strokeOpacity: 1,
              strokeWeight: 5
            }
          }).setDirections(response);//Strichzeichnungsteil
          
            //Entfernung und Zeit anzeigen
            var data = response.routes[0].legs;
            for (var i = 0; i < data.length; i++) {
                //Entfernung
                var li = $('<li>', {
                  text: data[i].distance.text,
                  "class": "display-group-item"
                });
                $('#display-list').append(li);

                //Zeit
                var li = $('<li>', {
                  text: data[i].duration.text,
                  "class": "display-group-item"
                });
                $('#display-list').append(li);
            }
            const route = response.routes[0];
            //ID anzeigen='directions-panel'Einbetten in den Teil von
            const summaryPanel = document.getElementById("directions-panel");
            summaryPanel.innerHTML = "";

            //Zeigen Sie die Entfernung und Zeit zwischen jedem Punkt an
            for (let i = 0; i < route.legs.length; i++) {
              const routeSegment = i + 1;
              summaryPanel.innerHTML +=
                "<b>Route Segment: " + routeSegment + "</b><br>";
              summaryPanel.innerHTML += route.legs[i].start_address + "<br>" + " ↓ " + "<br>";
              summaryPanel.innerHTML += route.legs[i].end_address + "<br>";
              summaryPanel.innerHTML += "<" + route.legs[i].distance.text + ",";
              summaryPanel.innerHTML += route.legs[i].duration.text + ">" + "<br>";
            }
        }
      });
  }
}

__ Ergänzung zum Inhaltsteil des Inhalts der Sprechblase: (weil ich mit der Methode zum Übergeben von Daten zu kämpfen hatte) __

content: `<a href='/places/${ id }'>${ markerData[i]['name'] }</a><input type="button" value="hinzufügen" onclick="addPlace(place_name, place_lat, place_lng, ${i})">`

addPlace(place_name, place_lat, place_lng, ${i}) Beim Aufruf dieser Funktion werden die vorherigen drei Argumente als Array übergeben. Das vierte Argument ist die Ausdruckserweiterung der Zahl (als Index bezeichnet), die darstellt, welche Informationen im Array enthalten sind. Die Ausdruckserweiterung in JavaScript scheint diese Form zu sein. Durch die Angabe eines solchen Arguments kann die Funktion addPlace (name, lat, lng, number) Informationen darüber verarbeiten, um welche Daten es sich normalerweise handelt.

Schließlich

Vielen Dank für das Lesen bis zum Ende. Ich selbst bin in einem Zustand, in dem das Portfolio kurz vor der Fertigstellung steht, und ich habe mit der Arbeitssuche begonnen! Wir unterstützen aufrichtig diejenigen, die Ziele haben, wie das Erstellen von Portfolios und den Wechsel von Arbeitsplätzen. Lassen Sie uns also gemeinsam unser Bestes geben! !!

Referenz

Recommended Posts

[Schienen] Anzeigen von Google Maps mithilfe der Google Maps-API und Suchen von Routen zwischen mehreren Punkten
Zeigen Sie die Google Maps-API mit Rails und Pin-Anzeige an
[Google Maps API] Karte wird nicht angezeigt und wird leer [Rails]
[Ruby on Rails] Anzeigen und Fixieren von GoolgeMAP mithilfe der Google-API
[Rails] google maps api So posten und anzeigen Sie einschließlich Karteninformationen
[Rails] Google Maps API Beschreibung, wenn Breiten- und Längengrade nicht gespeichert werden können
[Rails 6 / Google Map API] Veröffentlichen Sie eine Adresse und setzen Sie mehrere Markierungen auf der Karte
Einfache Buchregistrierung mit Google Books API und Rails
Sprachtranskriptionsverfahren mit Python und Google Cloud Speech API
[Ruby on Rails] Google Map mehrere Pins, Sprechblasen, Links
Anfänger der Google Maps API und der Twitter API haben "Tweet Map" erstellt.
[Kartenanzeige] Zeigen Sie eine Karte anhand der vom Benutzer registrierten Adresse mit der JavaScript-API und der Geokodierungs-API von Google Maps an!
Ich habe versucht, die Docomo-Spracherkennungs-API und die Google Speech-API in Java zu verwenden