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.