Fügen Sie bei Klicken auf Google Map einen Marker hinzu

85

Es fällt mir überraschend schwer, ein sehr einfaches Beispiel dafür zu finden, wie man einer Google Map Markierungen hinzufügt, wenn ein Nutzer auf die Karte klickt.

Ich habe mich in den letzten Stunden umgesehen und die Google Maps API-Dokumentation konsultiert. Ich würde mich über Hilfe freuen!

Andre R.
quelle

Antworten:

168

Nach viel weiterer Recherche gelang es mir, eine Lösung zu finden.

google.maps.event.addListener(map, 'click', function(event) {
   placeMarker(event.latLng);
});

function placeMarker(location) {
    var marker = new google.maps.Marker({
        position: location, 
        map: map
    });
}
Andre R.
quelle
7
Können wir den Benutzer dazu bringen, nur einmal hinzuzufügen? und den Marker bewegen?
Chaibi Alaa
Bitte geben Sie Beispiel Link
Sopo
42

Im Jahr 2017 lautet die Lösung:

map.addListener('click', function(e) {
    placeMarker(e.latLng, map);
});

function placeMarker(position, map) {
    var marker = new google.maps.Marker({
        position: position,
        map: map
    });
    map.panTo(position);
}
David Corral
quelle
20

Dies ist tatsächlich eine dokumentierte Funktion und kann hier gefunden werden

// This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, 'click', function(e) {
    placeMarker(e.latLng, map);
  });

  function placeMarker(position, map) {
    var marker = new google.maps.Marker({
      position: position,
      map: map
    });  
    map.panTo(position);
  }
epson121
quelle
13

@Chaibi Alaa, Damit der Benutzer nur einmal hinzufügen und den Marker verschieben kann; Sie können die Markierung beim ersten Klicken setzen und dann bei nachfolgenden Klicks einfach die Position ändern.

var marker;

google.maps.event.addListener(map, 'click', function(event) {
   placeMarker(event.latLng);
});


function placeMarker(location) {

    if (marker == null)
    {
          marker = new google.maps.Marker({
             position: location,
             map: map
          }); 
    } 
    else 
    {
        marker.setPosition(location); 
    } 
}
Ahmed Samy
quelle
6

Derzeit ist die Methode zum Hinzufügen des Listeners zur Karte

map.addListener('click', function(e) {
    placeMarker(e.latLng, map);
});

Und nicht

google.maps.event.addListener(map, 'click', function(e) {
    placeMarker(e.latLng, map);
});

Referenz

JamesWorth
quelle
0
  1. Deklarieren Sie zuerst den Marker:
this.marker = new google.maps.Marker({
   position: new google.maps.LatLng(12.924640523603115,77.61965398949724),
   map: map
});
  1. Rufen Sie die Methode auf, um die Markierung beim Klicken zu zeichnen:
this.placeMarker(coordinates, this.map);
  1. Definieren Sie die Funktion:
placeMarker(location, map) {
    var marker = new google.maps.Marker({
        position: location,
        map: map
    });
    this.markersArray.push(marker);
}
Mitternachtsgedanken
quelle