Obtendo Lat / Lng do marcador do Google


89

Fiz um mapa do Google Maps com um marcador arrastável. Quando o usuário arrasta o marcador, preciso saber a nova latitude e longitude, mas não entendo qual é a melhor abordagem para fazer isso.

Como posso recuperar as novas coordenadas?

Respostas:


132

Aqui está a demonstração JSFiddle . Na API do Google Maps V3, é muito simples rastrear a latitude e longitude de um marcador arrastável. Vamos começar com o seguinte HTML e CSS como nossa base.

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

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

#current{
     padding-top: 25px;
}

Aqui está nosso JavaScript inicial inicializando o mapa do google. Criamos um marcador que queremos arrastar e definimos sua propriedade draggable como true. Claro, tenha em mente que ele deve ser anexado a um evento onload de sua janela para ser carregado, mas vou pular para o código:

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

Aqui, anexamos dois eventos dragstartpara rastrear o início do arrasto e dragendpara arrastar quando o marcador para de ser arrastado, e a forma como o anexamos é para usar google.maps.event.addListener. O que estamos fazendo aqui é definir o currentconteúdo do div quando o marcador for arrastado e, em seguida, definir o lat e lng do marcador quando o arrastar parar. O evento de mouse do Google tem um nome de propriedade 'latlng' que retorna o objeto 'google.maps.LatLng' quando o evento é acionado. Então, o que estamos fazendo aqui é basicamente usar o identificador para este ouvinte que é retornado pelo google.maps.event.addListenere obtém a propriedade latLngpara extrair a posição atual do dragend. Assim que obtivermos o Lat Lng quando o arrasto parar, exibiremos em seu 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>';
});

Por fim, centralizaremos nosso marcador e o exibiremos no mapa:

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

Entre em contato se tiver alguma dúvida em relação à minha resposta.


3
Isto e excelente! Eu tenho um mapa com um campo de entrada de endereço autocompletar, bem como um marcador arrastável. Também preciso exibir as coordenadas lat long se alguém usar o campo de entrada. Existe uma solução simples para isso?
— Kirk Ross


31

Você poderia simplesmente ligar getPosition()paraMarker - você já tentou isso?

Se você está na obsoleta, v2 da API JavaScript, você pode chamar getLatLng()emGMarker .


Acho que minha confusão foi quando chamar getPosition () - é algo que tenho que adicionar ao construtor para que ele saiba pedir as coordenadas quando o marcador for movido?
— Genadinik

@Genadinik O exemplo que vinculei em minha edição pode ajudar; mostra como anexar um ouvinte para eventos de arrastar, onde você pode consultar o marcador para sua posição e usá-lo como quiser.
— no.good.at.coding

Ah legal, e se eu quiser armazenar as coordenadas na sessão ou no banco de dados, devo fazer por meio de uma chamada AJAX? Ou existe uma maneira mais simples?
— Genadinik

Não consigo pensar em nada mais simples do que uma postagem rápida em Ajax com o id do marcador e suas coordenadas atuais :) Mas você pode considerar fazer atualizações em lote ou pelo menos esperar alguns segundos até que o arrasto seja concluído e ver que o usuário não comece a arrastar mais para não inundar o servidor com solicitações enquanto os marcadores estão sendo arrastados - espere até que as posições estejam estáveis, por assim dizer. Claro que isso depende de quão atrasado você pode ter seu estado do lado do servidor em comparação com o que o cliente vê.
— no.good.at.coding

1
getPosition()retorna um objeto, portanto, para obter especificamente a latitude / longitude, você terá que chamar lat()e lng()respectivamente a partir disso.
— Jeff Puckett

20

tente isso

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

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
Embora esse código possa responder à pergunta, fornecer informações sobre como e por que ele resolve o problema aumenta seu valor a longo prazo.
— L_J

-3

Existem muitas respostas para essa pergunta, que nunca funcionou para mim (incluindo a sugestão de getPosition () que não parece ser um método disponível para objetos marcadores). O único método que funcionou para mim nos mapas V3 é (simplesmente):

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

1
Acho que você quer dizer marker.position.lat()emarker.position.lng()
— Jeff Puckett

Ou você precisa usar marker.getPosition().lat()emarker.getPosition().lng()
— Sergio Reis

você não pode usar "long" como uma variável
— Dinith
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.