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>