ruby 2.5.7 Rails 5.2.4.3 OS: macOS Catalina
Dieses Mal werden der Verlauf und der Breitengrad mithilfe der Geokodierungs-API erfasst und auf dem MAP angezeigt.
Einführung von 1 Edelstein 2 Erstellen Sie eine .env-Datei <- Die wichtigste 3 Ansicht bearbeiten
Fügen Sie der Gemfile Folgendes hinzu.
Gemfile
gem "dotenv-rails"
Terminal
$ bundle install
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
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>
Recommended Posts