Zeigen Sie die Google Maps-API mit Rails und Pin-Anzeige an

Einführung

Ich habe in der Vergangenheit die Google Maps-API in meinem Portfolio verwendet, aber den Ablauf vergessen, daher werde ich daran erinnert.

Umgebung

rails 5.2.3 ruby 2.6.3

Was ist diesmal zu tun?

• Ermitteln Sie den Längen- und Breitengrad aus den aktuellen Standortinformationen und zeigen Sie die Markierung an.
• Ändern Sie die erfassten Listeninformationen in das JSON-Format und platzieren Sie sie als Markierung auf der Karte. ・ Kartenanzeige

Erstellen Sie einen Controller, der angezeigt werden soll. Diesmal lautet der Aktionsname Suche.

spaces_controller.rb

  def search
    @spaces = Space.all
  end

Nach dem Erstellen eines Modells und der Eingabe einer Adresse werden Breiten- und Längengrade automatisch erfasst.

space.rb

class Space < ApplicationRecord
  geocoded_by :address
  after_validation :geocode, if: :address_changed?
end

schema.rb

create_table "spaces", force: :cascade do |t|
    t.string "address"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.float "latitude"
    t.float "longitude"
end

Skript zur Anzeige von MAP

javascript

  function initMap() 
    //Wo soll die Karte angezeigt werden?
    var target = document.getElementById('gmap');
    //Kartenanzeige
    var map = new google.maps.Map(document.getElementById('gmap'), {
      center: {lat: 35.681167, lng: 139.767052},//Mittelpunkteinstellung
      zoom: 8//Kartenvergrößerungseinstellung
    });

    //Erstellen einer Standortmarkierung
    //Wenn Sie Ihren aktuellen Standort nicht ermitteln können
    if(!navigator.geolocation){
      infoWindow.setPosition(map.getCenter());
      infoWindow.setContent('Geolocation wird nicht unterstützt.');
      infoWindow.open(map);
    }

    navigator.geolocation.getCurrentPosition(function(position) {
      //Ermitteln Sie den Längen- und Breitengrad Ihres aktuellen Standorts
      var pos = { lat: position.coords.latitude, lng: position.coords.longitude };
      var mark = new google.maps.Marker({
        //Dropdown-Animationseinstellungen
        animation: google.maps.Animation.DROP,
        position: pos,
        map: map,
        //Erstellen Sie ein Symbol für den aktuellen Standort-Pin. Dieses Mal wird das Standarddesign für mehrere Markierungen verwendet. Ändern Sie es daher.
        icon: {
          fillColor: "rgb(48, 255, 176)",
          fillOpacity: 1.0,
          path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
          scale: 4,
          strokeColor: "green",
          strokeWeight: 1.0
        }
      });
    }, function() {
      infoWindow.setPosition(map.getCenter());
      infoWindow.setContent('Error:Die Geolokalisierung ist ungültig.');
      infoWindow.open(map);
    });
    //Mehrere Marker
    //Listen Sie die Daten im JSON-Format auf
    var spaces = #{raw @spaces.to_json};
    var marker = [];
    var info;
    for(var i = 0; i < spaces.length; ++i) {
      //Erstellen Sie Markierungen, indem Sie nacheinander Längen- und Breitengradinformationen aus der Liste extrahieren
      spot = new google.maps.LatLng({lat: spaces[i].latitude, lng: spaces[i].longitude});
      marker[i] = new google.maps.Marker({
        position: spot,
        map: map,
      	animation: google.maps.Animation.DROP
      });
      markerEvent(i);
    }
    //Hover-Ereignis mit mehreren Markern
    function markerEvent(i) {
      marker[i].addListener('mouseover', function() {
        var target = $('#' + (i + 1));
        $(".highlight").removeClass("highlight");
        target.addClass("highlight");
        var position = target.offset().top - 280;
        $('body,html').animate({scrollTop:position}, 400, 'swing');
      });
    }
    //-------------------------------------------------------------
  }


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

Dieses Mal ist die Template-Engine auf schlank eingestellt und direkt darin geschrieben. Seien Sie also vorsichtig, da sich die Speicherung der Datenvariablen von der üblichen unterscheidet. Es ist sehr einfach, mit dem Geocoder von gem den Längen- und Breitengrad aus dem Namen zu ermitteln, aber diesmal verwende ich Google Geocoding, da es ungenau ist und nicht einmal die Adresseinheit anzeigt.