[google-maps] 클릭시 Google지도에 마커 추가

Program / 글쓴이

사용자가지도를 왼쪽 클릭 할 때 Google지도에 마커를 추가하는 방법에 대한 매우 간단한 예를 찾기 위해 놀랍게도 어려움을 겪고 있습니다.

지난 몇 시간 동안 주변을 둘러보고 Google Maps API 설명서를 참조했으며 도움을 주시면 감사하겠습니다!

답변

더 많은 연구 끝에 나는 해결책을 찾았습니다.

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

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

답변

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

답변

이것은 실제로 문서화 된 기능이며 여기 에서 찾을 수 있습니다.

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

답변

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

답변

현재지도에 리스너를 추가하는 방법은 다음과 같습니다. 

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

그리고 

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

참고

답변

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

답변