[Ruby on Rails] Anzeigen und Fixieren von GoolgeMAP mithilfe der Google-API

Ziel

名称未設定.mov.gif

Entwicklungsumgebung

ruby 2.5.7 Rails 5.2.4.3 OS: macOS Catalina

Annahme

Dieses Mal werden der Verlauf und der Breitengrad mithilfe der Geokodierungs-API erfasst und auf dem MAP angezeigt.

fließen

Einführung von 1 Edelstein 2 Erstellen Sie eine .env-Datei <- Die wichtigste 3 Ansicht bearbeiten

Einführung von 1 Edelstein

Fügen Sie der Gemfile Folgendes hinzu.

Gemfile


gem "dotenv-rails"

Terminal


$ bundle install
Supplement dotenv-Rails ist ein Juwel, das Umgebungsvariablen verwalten kann, die .env-Dateien lesen.

2 Erstellen Sie eine .env-Datei <- Die wichtigste

Erstellen Sie eine ENV-Datei in derselben Hierarchie wie Gemfile

.env


SECRET_KEY=Mein API-Schlüssel
#In dem Teil hinzuzufügen<%= ENV['SECRET_KEY'] %>Kann durch Eingabe verwendet werden)

Fügen Sie am Ende der .gitignore-Datei Folgendes hinzu.

.gitignore


/.env
Wichtig Wenn Sie diese Beschreibung vergessen und auf Github veröffentlichen, wird Ihr API-Schlüssel im Internet veröffentlicht und möglicherweise missbraucht. Wenn Sie vergessen haben, es zu schreiben, und es hochgeht, wird eine Warn-E-Mail an die in Google registrierte E-Mail-Adresse gesendet. Befolgen Sie daher die Anweisungen. Löschen Sie als Flow das GitHub-Repository oder geben Sie den API-Schlüssel erneut aus (am besten beides). Beeilen Sie sich also nicht.

3 Ansicht bearbeiten

Der Anzeigeort ist überall in Ordnung. Diesmal wird es auf der folgenden Seite beschrieben.

erb:app/views/homes/mypage.html.erb


<h2>Your MAP</h2>
<div id='map' class="<%= current_user.prefecture_code + current_user.city + current_user.street %>"></div>

<style>
#map{
  height: 300px;
}
</style>

<script>

let map
let geocoder

function initMap(){
  geocoder = new google.maps.Geocoder()
  geocoder.geocode( { 'address': $('#map').attr('class')}, function(results, status) {
    if (status == 'OK') {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });

  map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -35.6809591, lng: 139.7673068},
  zoom: 13
  });
}

function codeAddress(){
  let inputAddress = document.getElementById('address').value;
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=<%= ENV['SECRET_KEY'] %>&callback=initMap" async defer></script>

Unten ist der Code mit Ergänzungen.

erb:app/views/homes/mypage.html.erb


<h2>Your MAP</h2>
<!-- id=Ersetzen Sie die Kartenklasse durch die registrierte Adresse.-->
<div id='map' class="<%= current_user.prefecture_code + current_user.city + current_user.street %>"></div>

<!-- id=Geben Sie die Größe der Karte an. * Es ist in Ordnung, ein Stylesheet zusammenzustellen-->
<style>
#map{
  height: 300px;
}
</style>

<script>
//Da es auch in der folgenden codeAddress verwendet wird, wird die Karte außerhalb der Funktion definiert und der Geocoder wird ebenfalls vorbereitet.
let map
let geocoder

function initMap(){
  //Geocoder initialisieren
  geocoder = new google.maps.Geocoder()
  //Geocode des Geocoders()Senden Sie in method eine Anfrage an die Geocoder-API für Verlauf und Breitengrad.
  // geocode()ID, die in der Methode adressiert werden soll=Ersetzen Sie die registrierte Adresse der Kartenklasse und erhalten Sie den Verlauf und den Breitengrad.
  geocoder.geocode( { 'address': $('#map').attr('class')}, function(results, status) {
  	//Wenn es keine Fehler gibt
  	if (status == 'OK') {
    // map.Die Karte wird in den oben in setCenter beschriebenen Hintergrund und Breitengrad verschoben.
      map.setCenter(results[0].geometry.location);

    // google.maps.Marker steht an der angegebenen Position in Google Map mit Marker
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });
    //Wenn Sie eine Fehlermeldung erhalten
    } else {
    //Der Fehlerstatus wird im Status angezeigt, und Sie können ihn beheben, indem Sie den Wortlaut überprüfen.
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });

  //Geben Sie die Anfangsposition der Karte an.
  //lat ist die Geschichte und lng ist der Breitengrad. (Im Folgenden wird die Tokyo Station angegeben.)
  map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -35.6809591, lng: 139.7673068},
  //Sie können die Zoomgröße nach Ihren Wünschen ändern.
  //Wenn die Anzahl groß ist, handelt es sich um eine Vergrößerung.
  zoom: 13
  });
}

function codeAddress(){
  //Holen Sie sich Input
  let inputAddress = document.getElementById('address').value;
  //Karte nach der Geokodierung verschieben
}
</script>
<!--Dies ist eine Beschreibung zum Lesen des Google API-Schlüssels.-->
<script src="https://maps.googleapis.com/maps/api/js?key=<%= ENV['SECRET_KEY'] %>&callback=initMap" async defer></script>
Supplement [Wenn etwas schief geht] Wenn die Adresse registriert, aber nicht fixiert ist [Geocoding Service](https://developers.google.com/maps/documentation/javascript/geocoding) Es ist in Ordnung, wenn Sie die diesbezügliche Geokodierungs-API aktivieren.

Recommended Posts