[Schienen] So zeigen Sie mehrere Markierungen auf Google Map an und zeigen beim Klicken eine Sprechblase an

Ziel

Entwicklungsumgebung

・ Ruby: 2.5.7 Schienen: 5.2.4 ・ Vagrant: 2.2.7 -VirtualBox: 6.1 ・ Betriebssystem: macOS Catalina

Annahme

Folgendes wurde implementiert.

・ Schlanke Einführung

• Implementierung der Anmeldefunktion ・ Google Map-Anzeige ・ Breiten- und Längengrad mit der Gocoding-API berechnen

Implementierung

1. Bearbeiten Sie den Controller

users_controller.rb

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

2. Bearbeiten Sie die Ansicht

slim:users/index.html.slim

#map style='height: 500px; width: 500px;'

- google_api = "https://maps.googleapis.com/maps/api/js?key=#{ ENV['GOOGLE_MAP_API'] }&callback=initMap".html_safe
script{ async src=google_api }

javascript:

  let map;
  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
  let markerData = gon.users; //Weisen Sie der Variablen die vom Controller definierte Instanzvariable zu

  function initMap() {
    geocoder = new google.maps.Geocoder()

    map = new google.maps.Map(document.getElementById('map'), {
      center: { lat: 35.6585, lng: 139.7486 }, //Das Display ist auf dem Tokyo Tower zentriert
      zoom: 12,
    });

    //Zeigen Sie mehrere Marker und Sprechblasen durch iterative Verarbeitung an
    for (var i = 0; i < markerData.length; i++) {
      let id = markerData[i]['id']

      //Berechnen Sie den Breiten- und Längengrad jedes Punktes
      markerLatLng = new google.maps.LatLng({
        lat: markerData[i]['latitude'],
        lng: markerData[i]['longitude']
      });

      //Erstellen Sie Markierungen für jeden Punkt
      marker[i] = new google.maps.Marker({
        position: markerLatLng,
        map: map
      });

      //Erstellen Sie für jeden Punkt einen Ballon
      infoWindow[i] = new google.maps.InfoWindow({
        //Inhalt des Ballons
        content: markerData[i]['address']
      });

      //Klickereignis zur Markierung hinzufügen
      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]);
    });
  }

Wenn Sie den Inhalt des Ballons verknüpfen möchten, beschreiben Sie ihn wie folgt.

python

//Variieren Sie die ID jedes Benutzers
let id = markerData[i]['id']

infoWindow[i] = new google.maps.InfoWindow({
  // <a>Erstellen Sie einen Link mit einem Tag
  content: `<a href='/users/${ id }'>${ markerData[i]['address'] }</a>`
});

Hinweis

Wenn Sie "Turbolinks" nicht deaktivieren, wird die Karte nicht umgeschaltet. Deaktivieren Sie sie daher unbedingt.

So deaktivieren Sie Turbolinks