Додайте маркер на карту Google за кліком


87

Я дивно намагаюся знайти дуже простий приклад того, як додати маркер (и) до Карти Google, коли користувач клацає лівою кнопкою миші на карті.

Я оглянувся протягом останніх кількох годин, проконсультувався з документацією API Карт Google і був би вдячний за допомогу!

Відповіді:


169

Після довгих досліджень мені вдалося знайти рішення.

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
ми можемо зробити так, щоб користувач міг додавати лише один раз? і перемістити маркер?
Chaibi Alaa

plase дати зразок посилання
Сопо

43

У 2017 році рішення:

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

Це насправді задокументована особливість, і її можна знайти тут

// 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, щоб користувач міг додати лише один раз і перемістити маркер; Ви можете встановити маркер на перший клік, а потім просто змінити позицію на наступних клацаннях.

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

В даний час метод додавання слухача на карту буде

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

І ні

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

Довідково


0
  1. Спочатку оголосіть маркер:
this.marker = new google.maps.Marker({
   position: new google.maps.LatLng(12.924640523603115,77.61965398949724),
   map: map
});
  1. Викличте метод для побудови маркера за кліком:
this.placeMarker(coordinates, this.map);
  1. Визначте функцію:
placeMarker(location, map) {
    var marker = new google.maps.Marker({
        position: location,
        map: map
    });
    this.markersArray.push(marker);
}
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.