developer tip

Google Maps API 3 : 오른쪽 클릭으로 좌표 얻기

optionbox 2020. 12. 14. 08:07
반응형

Google Maps API 3 : 오른쪽 클릭으로 좌표 얻기


사용자가 db에 새 레코드를 입력 할 때 위도 및 경도에 대한 2 개의 텍스트 상자가 있습니다.

잘 작동하는 Google지도의 실시간 미리보기가 있습니다. 이제 클릭 한 좌표로 위도 / 경도 텍스트 상자를 채우는 마우스 오른쪽 버튼 클릭 이벤트를지도에 추가하고 싶습니다.

이것이 가능할까요?

이벤트 리스너를 추가하는 방법을 알고 API 문서를 살펴 보았지만이 작업을 수행하는 항목은 보이지 않았습니다. 나는 당신이 그들의 웹 사이트에있는 구글의지도에서 그것을 할 수 있다는 것을 안다.


google.maps.event.addListener(map, "rightclick", function(event) {
    var lat = event.latLng.lat();
    var lng = event.latLng.lng();
    // populate yor box/field with lat, lng
    alert("Lat=" + lat + "; Lng=" + lng);
});

당신은 만들 수 개의 InfoWindow 객체 ( 여기 클래스 문서를 )과에 첨부 rightclick지도에서 클릭 된 위치의 위도와 경도로 채 웁니다 이벤트 핸들러를.

function initMap() {
  var myOptions = {
      zoom: 6,
      center: new google.maps.LatLng(-33.8688, 151.2093)
    },
    map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
    marker = new google.maps.Marker({
      map: map,
    }),
    infowindow = new google.maps.InfoWindow;
  map.addListener('rightclick', function(e) {
    map.setCenter(e.latLng);
    marker.setPosition(e.latLng);
    infowindow.setContent("Latitude: " + e.latLng.lat() +
      "<br>" + "Longitude: " + e.latLng.lng());
    infowindow.open(map, marker);
  });
}
html,
body {
  height: 100%;
}
#map-canvas {
  height: 100%;
  width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAIPPUQ0PSWMjTsgvIWRRcJv3LGfRzGmnA&callback=initMap" async defer></script>
<div id="map-canvas"></div>

참고URL : https://stackoverflow.com/questions/7905733/google-maps-api-3-get-coordinates-from-right-click

반응형