[Ruby on Rails] Google Map mehrere Pins, Sprechblasen, Links

Ziel

map複数.gif

Entwicklungsumgebung

ruby 2.5.7 Rails 5.2.4.3 OS: macOS Catalina

Annahme

Wir gehen davon aus, dass bereits ein Fall angezeigt wurde.

Einführung von 1 Edelstein

Fügen Sie der Gemfile Folgendes hinzu.

Gemfile


gem "gon"

Terminal


$ bundle install
Supplement Gon ist ein Juwel, mit dem Sie Variablen in Controller in Javascript verwenden können.

2 Bearbeiten Sie den Controller

Definieren Sie gon.users.

app/controllers/users_controller.erb


class UsersController < ApplicationController
  def show
    @user = User.find(params[:id])
  end

  def index
    @users = User.all
    gon.users = User.all
  end
end

3 Ansicht bearbeiten

Stellen Sie es in Javascript zur Verfügung, indem Sie <% = include_gon%> schreiben.

erb:app/views/layouts/application.html.erb


<head>
...
  <%= include_gon %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
...
<head>

Diesmal wird es auf der folgenden Seite beschrieben.

erb:app/views/users/index.html.erb


<div id='map'></div>
<style>
#map{
    height: 500px;
    width: 530px;
}
</style>

<script>

let map
let geocoder
let marker = []; //Ich möchte mehrere Marker anzeigen, also ordne ich sie an
let infoWindow = []; //Ich möchte mehrere Ballons anzeigen, also arrangiere ich sie
const users = gon.users; //Weisen Sie der Variablen die vom Controller definierte Instanzvariable zu


function initMap(){
    //Geocoder initialisieren
    geocoder = new google.maps.Geocoder()
    //Anfängliche Positionseinstellung der Karte
    map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -35.6809591, lng: 139.7673068},
    zoom: 14
    });
    //denn ist iterativ
    //Definieren Sie die Variable i als 0
    //Danach wird der Vorgang des wiederholten Hinzufügens der in gon definierten Benutzer ausgeführt.
    for (let i = 0; i < users.length; i++) {
        //Holen Sie sich den Verlauf und den Breitengrad der Adresse mit Geocoder
        // users[i]Bekommt der Benutzer der Variablen i
        geocoder.geocode( { 'address': users[i].prefecture_code + users[i].city + users[i].street }, function(results, status) {
            //Wenn der Status OK ist
        if (status == 'OK') {
    　　　　// map.Karte bewegt sich mit setCenter
            map.setCenter(results[0].geometry.location);
            marker[i] = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
            //Weisen Sie der Variablen-ID die Variable i zu
            let id = users[i]['id']
            //infoWindow ist ein Ballon
            infoWindow[i] = new google.maps.InfoWindow({
            //Geben Sie den Inhalt mit Inhalt an
            //Dieses Mal wird es mit einem Link angezeigt, der in die Buchstaben eingefügt wird
            content: `<a href='/users/${id}'>${users[i].email}</a>`
            });
            //Wenn der Marker angeklickt wird
            marker[i].addListener("click", function(){
                //InfoWindow anzeigen
                infoWindow[i].open(map, marker[i]);
            });
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
        });
    }
}

function codeAddress(){
    //Holen Sie sich Input
    let inputAddress = document.getElementById('address').value;
    //Karte nach der Geokodierung verschieben
}
</script>

<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