Zeigen Sie mehrere Markierungen auf Google Map an

Zeichnen Sie Ihre Recherchen auf, weil Sie das Zielgeschäft und Geschäfte in der Nähe auf Google Map anzeigen möchten. Da es in diesem Artikel hauptsächlich um die Beschreibung von Javascript geht, wird die Beschreibung zur Erfassung von Google Map API-Schlüsseln usw. weggelassen. Die Bedingungen sind wie folgt.

・ Der Zielspeicher wird in der Mitte der Karte angezeigt. (Marker aufstellen) ・ Markierungen werden auch in Geschäften in einem Radius von 5 km angezeigt, die auf dem Zielgeschäft zentriert sind. ・ Das Zielgeschäft und die umliegenden Geschäfte haben unterschiedliche Markierungsfarben. ・ Wenn Sie auf die Markierung eines nahe gelegenen Geschäfts klicken, wird eine Sprechblase angezeigt. ・ Der Geschäftsname ist in der Sprechblase enthalten. Wenn Sie auf den Geschäftsnamen klicken, gelangen Sie zur Detailseite des Geschäfts.

Entwicklungsumgebung

ruby 2.6.5 Ruby on Rails 6.0.3.3 OS: macOS Catalina

Einführung

Dieser Artikel zur Verwendung von GoogleMapApi ist leicht verständlich zusammengefasst und wurde als Referenz verwendet. Verwendung der Google Maps-API

Implementierungscode

Der Code ist unten.

  let map;
  let mainMarker;
  let marker =[];
  let infoWindow = [];

function initMap(){
  let markerData = gon.places;
  let latlng = {lat: gon.latitude, lng: gon.longitude};
  //Angabe der Ausgangsposition
  map = new google.maps.Map(document.getElementById('map'), {
  center: latlng,
  zoom: 14
  });

  //Setzen Sie einen Marker in die Ausgangsposition
  mainMarker = new google.maps.Marker({
    map: map,
    position: latlng
  });

  //Setzen Sie einen Marker auf ein nahe gelegenes Geschäft
  for (var i = 0; i < markerData.length; i++) {
    const image = "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png ";
    const id = markerData[i]['id'];
    //Erstellen Sie Breiten- und Längengraddaten
    let markerLatLng = new google.maps.LatLng({lat: markerData[i]['latitude'], lng: markerData[i]['longitude']});
    //Marker hinzufügen
    marker[i] = new google.maps.Marker({
      position: markerLatLng,
      map: map,
      icon: image,
    });

    //Fügen Sie einen Ballon hinzu
    infoWindow[i] = new google.maps.InfoWindow({
    //Es wurde ein Link zur Seite mit den Store-Details in der Sprechblase hinzugefügt
    content: `<a href=/laundries/${id}>${markerData[i]['name']}</a>`
    });

    markerEvent(i); 
  }

  //Zeigen Sie eine Sprechblase an, wenn Sie auf eine Markierung klicken
  function markerEvent(i) {
    marker[i].addListener('click', function() {
      infoWindow[i].open(map, marker[i]);
    });
  }
}

document.addEventListener('turbolinks:load', function(){
  initMap();
});

Schauen wir uns jeden an. 1. Definition von Variablen

 let map;
 let mainMarker;
 let marker =[];
 let infoWindow = [];

  let markerData = gon.places;
  let latlng = {lat: gon.latitude, lng: gon.longitude};
  //Angabe der Ausgangsposition
  map = new google.maps.Map(document.getElementById('map'), {
  center: latlng,
  zoom: 14
  });

  //Setzen Sie einen Marker in die Ausgangsposition
  mainMarker = new google.maps.Marker({
    map: map,
    position: latlng
  });

for (var i = 0; i < markerData.length; i++) {
    const image = "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png ";
    const id = markerData[i]['id'];
    //Erstellen Sie Breiten- und Längengraddaten
    let markerLatLng = new google.maps.LatLng({lat: markerData[i]['latitude'], lng: markerData[i]['longitude']});
    //Marker hinzufügen
    marker[i] = new google.maps.Marker({
      position: markerLatLng,
      map: map,
      icon: image,
    });

    //Fügen Sie einen Ballon hinzu
    infoWindow[i] = new google.maps.InfoWindow({
    //Es wurde ein Link zur Seite mit den Store-Details in der Sprechblase hinzugefügt
    content: `<a href=/laundries/${id}>${markerData[i]['name']}</a>`
    });

    markerEvent(i); 
  }

  //Zeigen Sie eine Sprechblase an, wenn Sie auf eine Markierung klicken
  function markerEvent(i) {
    marker[i].addListener('click', function() {
      infoWindow[i].open(map, marker[i]);
    });
  }