Google 마커에서 Lat / Lng 가져 오기


89

드래그 가능한 마커가있는 Google지도지도를 만들었습니다. 사용자가 마커를 드래그 할 때 새로운 위도와 경도를 알아야하지만이를 수행하는 가장 좋은 방법이 무엇인지 이해할 수 없습니다.

새 좌표를 검색하려면 어떻게해야합니까?

답변:


132

다음은 JSFiddle 데모 입니다. Google Maps API V3에서는 드래그 가능한 마커의 위도와 경도를 추적하는 것이 매우 간단합니다. 다음 HTML 및 CSS를 기반으로 시작하겠습니다.

<div id='map_canvas'></div>
<div id="current">Nothing yet...</div>

#map_canvas{
    width: 400px;
    height: 300px;
}

#current{
     padding-top: 25px;
}

다음은 Google지도를 초기화하는 초기 JavaScript입니다. 드래그 할 마커를 만들고 드래그 가능한 속성을 true로 설정합니다. 물론로드하려면 창의 onload 이벤트에 연결해야하지만 코드로 건너 뛰겠습니다.

var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 1,
    center: new google.maps.LatLng(35.137879, -82.836914),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var myMarker = new google.maps.Marker({
    position: new google.maps.LatLng(47.651968, 9.478485),
    draggable: true
});

여기 dragstart에서 드래그 시작을 추적하고 dragend마커가 드래그를 멈출 때 드랙 에 두 개의 이벤트 를 첨부합니다 google.maps.event.addListener. 부착 방법은를 사용하는 것 입니다. 여기서 우리가하는 일은 current마커가 드래그 될 때 div 의 콘텐츠를 설정하고 드래그가 멈출 때 마커의 lat 및 lng를 설정하는 것입니다. Google 마우스 이벤트에는 이벤트가 트리거 될 때 'google.maps.LatLng'개체를 반환하는 'latlng'속성 이름이 있습니다. 그래서 여기서 우리가하는 것은 기본적으로에서 반환되는이 리스너의 식별자 를 사용하고 드래그 엔드의 현재 위치를 추출하기 google.maps.event.addListener위한 속성 latLng을 가져 오는 것 입니다. 드래그가 멈출 때 Lat Lng를 얻으면 currentdiv 내에 표시됩니다 .

google.maps.event.addListener(myMarker, 'dragend', function(evt){
    document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
});

google.maps.event.addListener(myMarker, 'dragstart', function(evt){
    document.getElementById('current').innerHTML = '<p>Currently dragging marker...</p>';
});

마지막으로 마커를 중앙에 배치하고지도에 표시합니다.

map.setCenter(myMarker.position);
myMarker.setMap(map);

내 답변에 대해 궁금한 점이 있으면 알려주세요.


3
이것은 훌륭합니다! 자동 완성 주소 입력 필드와 드래그 가능한 마커가있는지도가 있습니다. 누군가 입력 필드를 사용하는 경우 위도 경도 좌표도 표시해야합니다. 이것에 대한 간단한 해결책이 있습니까?
Kirk Ross


31

당신은 부를 수있는 getPosition()Marker - 당신이 시도해야?

당신은 자바 스크립트 API의 사용되지 않는, v2에서 인 경우에, 당신은 호출 할 수 있습니다 getLatLng()GMarker .


내 혼란이있는 곳은 getPosition ()을 호출 할 때라고 생각합니다. 마커가 움직일 때 좌표를 요청하는 것을 알 수 있도록 생성자에 추가해야하는 것입니까?
Genadinik 2011 년

@Genadinik 편집에서 링크 한 예제가 도움이 될 수 있습니다. 마커의 위치를 ​​쿼리하고 원하는대로 사용할 수있는 드래그 이벤트에 대한 리스너를 연결하는 방법을 보여줍니다.
no.good.at.coding

아 멋지다. 세션이나 db에 좌표를 저장하려면 AJAX 호출을 통해해야합니까? 아니면 더 간단한 방법이 있습니까?
Genadinik 2011 년

마커 ID와 현재 좌표가있는 빠른 Ajax 게시물보다 더 간단한 것은 생각할 수 없습니다. :) 업데이트를 일괄 처리하거나 드래그가 완료 될 때까지 최소한 몇 초 동안 기다려 사용자가 확인하지 않는 것을 고려할 수 있습니다. 마커가 드래그되는 동안 서버에 요청이 넘치지 않도록 더 이상 드래그를 시작하십시오. 즉, 위치가 안정 될 때까지 기다리십시오. 물론 이것은 클라이언트가 보는 것과 비교하여 서버 측 상태를 가질 여유가 얼마나 있는지에 달려 있습니다.
no.good.at.coding 2011 년

1
getPosition()객체를 반환하므로 특히 위도 / 경도를 얻으려면 각각에서 lat()and 를 호출해야 lng()합니다.
제프 퍼켓

20

이 시도

var latlng = new google.maps.LatLng(51.4975941, -0.0803232);
var map = new google.maps.Map(document.getElementById('map'), {
    center: latlng,
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: 'Set lat/lon values for this property',
    draggable: true
});

google.maps.event.addListener(marker, 'dragend', function (event) {
    document.getElementById("latbox").value = this.getPosition().lat();
    document.getElementById("lngbox").value = this.getPosition().lng();
});

8
// show the marker position //

console.log( objMarker.position.lat() );
console.log( objMarker.position.lng() );

// create a new point based into marker position //

var deltaLat = 1.002;
var deltaLng = -1.003;

var objPoint = new google.maps.LatLng( 
  parseFloat( objMarker.position.lat() ) + deltaLat, 
  parseFloat( objMarker.position.lng() ) + deltaLng
);

// now center the map using the new point //

objMap.setCenter( objPoint );

2

마커에 리스너를 추가하고 drag 또는 dragend 이벤트를 수신하고이 이벤트를 수신 할 때 이벤트의 위치를 ​​요청해야합니다.

마커에 의해 트리거되는 이벤트에 대한 설명은 http://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html#Marker 를 참조하세요 . 이벤트 리스너를 추가 할 수있는 메소드 는 http://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html#MapsEventListener 를 참조하세요 .


2

var map = new google.maps.Map(document.getElementById('map_canvas'), {
  zoom: 10,
  center: new google.maps.LatLng(13.103, 80.274),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var myMarker = new google.maps.Marker({
  position: new google.maps.LatLng(18.103, 80.274),
  draggable: true
});

google.maps.event.addListener(myMarker, 'dragend', function(evt) {
  document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
});
google.maps.event.addListener(myMarker, 'dragstart', function(evt) {
  document.getElementById('current').innerHTML = '<p>Currently dragging marker...</p>';
});
map.setCenter(myMarker.position);
myMarker.setMap(map);

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + position.coords.latitude + ' Current Lng: ' + position.coords.longitude + '</p>';
  var myMarker = new google.maps.Marker({
    position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
    draggable: true
  });
  google.maps.event.addListener(myMarker, 'dragend', function(evt) {
    document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
  });
  google.maps.event.addListener(myMarker, 'dragstart', function(evt) {
    document.getElementById('current').innerHTML = '<p>Currently dragging marker...</p>';
  });
  map.setCenter(myMarker.position);
  myMarker.setMap(map);
}
getLocation();
#map_canvas {
  width: 980px;
  height: 500px;
}

#current {
  padding-top: 25px;
}
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>

</head>

<body>
  <section>
    <div id='map_canvas'></div>
    <div id="current">
      <p>Marker dropped: Current Lat:18.103 Current Lng:80.274</p>
    </div>
  </section>


</body>

</html>


1
이 코드는 질문에 답할 수 있지만 문제를 해결하는 방법과 이유에 대한 정보를 제공하면 장기적인 가치가 향상됩니다.
L_J

-3

이 질문에 대한 많은 답변이 있지만 나에게는 효과가 없었습니다 (마커 객체에 사용할 수있는 방법이 아닌 getPosition () 제안 포함). 지도 V3에서 나를 위해 일한 유일한 방법은 (간단히) 다음과 같습니다.

var lat = marker.lat();
var long = marker.lng();

1
난 당신 말은 생각 marker.position.lat()marker.position.lng()
제프 퍼켓

또는 당신은 사용 marker.getPosition().lat()하고marker.getPosition().lng()
Sergio Reis

"long"을 변수로 사용할 수 없습니다
Dinith
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.