Aggiungi indicatore a Google Map al clic


87

Sto sorprendentemente faticando a trovare un esempio molto semplice di come aggiungere uno o più indicatori a una mappa di Google quando un utente fa clic sulla mappa.

Mi sono guardato intorno nelle ultime due ore e ho consultato la documentazione dell'API di Google Maps e apprezzerei un aiuto!

Risposte:


169

Dopo molte ulteriori ricerche, sono riuscito a trovare una soluzione.

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

function placeMarker(location) {
    var marker = new google.maps.Marker({
        position: location, 
        map: map
    });
}

7
possiamo rendere l'utente in grado di aggiungere una sola volta? e spostare il marker?
Chaibi Alaa

per favore fornisci un link di esempio
Sopo

43

Nel 2017 la soluzione è:

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);
}

20

Questa è in realtà una funzionalità documentata e può essere trovata qui

// 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);
  }

14

@Chaibi Alaa, Per rendere l'utente in grado di aggiungere una sola volta e spostare il marker; È possibile impostare l'indicatore al primo clic e quindi modificare la posizione sui clic successivi.

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); 
    } 
}

6

Attualmente il metodo per aggiungere l'ascoltatore alla mappa sarebbe

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

E non

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

Riferimento


0
  1. Prima dichiara il marcatore:
this.marker = new google.maps.Marker({
   position: new google.maps.LatLng(12.924640523603115,77.61965398949724),
   map: map
});
  1. Chiama il metodo per tracciare il marcatore al clic:
this.placeMarker(coordinates, this.map);
  1. Definisci la funzione:
placeMarker(location, map) {
    var marker = new google.maps.Marker({
        position: location,
        map: map
    });
    this.markersArray.push(marker);
}
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.