Usando o Leaflet Js, é possível saber a localização de um Marcador ao clicar (ignorar o ponto de ancoragem)?

11

Eu tenho um objeto marcador de altura e largura específicas e, embora esteja apontando uma única coordenada, a representação visual do marcador abrange muitos pixels. Quando clico na representação visual do marcador, gostaria de obter as coordenadas do mapa subjacente, mas só tenho acesso à única coordenada lat / lng associada ao marcador.

DarkKunai99
fonte

Respostas:

12

Por um lado: sempre que o Leaflet manipular um evento de mouse (ou toque), você poderá acessar o evento DOM original na originalEventpropriedade do evento.

Por outro lado: dado um evento DOM do mouse (ou toque), o Leaflet pode traduzir magicamente suas propriedades clientXe clientYem uma instância L.LatLngusando map.mouseEventToLatLng().

Combine essas duas coisas e você pode ter algo como:

marker.on('click', function(ev){
  var latlng = map.mouseEventToLatLng(ev.originalEvent);
  console.log(latlng.lat + ', ' + latlng.lng);
});

Verifique a documentação do Leaflet para outros métodos de conversão, pois eles podem ser úteis.

IvanSanchez
fonte
Obrigado, isso fez o truque. Eu estava calculando o latlng baseado na contagem de pixels como tal:var latlng = self._map.containerPointToLatLng([event.originalEvent.clientX - vpWidthDifference, event.originalEvent.clientY - vpHeightDifference]);
DarkKunai99
7

Você sempre pode recuperar as coordenadas do mapa de objetos do Leaflet. Você pode usar algo como isto:

map.on('click', function(e){
  var coord = e.latlng;
  var lat = coord.lat;
  var lng = coord.lng;
  console.log("You clicked the map at latitude: " + lat + " and longitude: " + lng);
  });

Aqui você tem um exemplo de trabalho.

ramiroaznar
fonte
Hmm, é estranho, porque eu estou executando o Cesium v1.25, e sempre que clico no marcador, o objeto de evento sempre contém o atraso do ponto de ancoragem do marcador, não a coordenada real do mapa, como no seu exemplo.
precisa saber é o seguinte
Eu não trabalhei com césio, talvez Ivan ou na cesiumetiqueta possa lhe dar uma resposta melhor.
Ramiroaznar 10/09/16
Peço desculpas, eu quis dizer Folheto (mais recente rc v1.0)
DarkKunai99
Dê uma olhada na resposta dada por Ivan, ele resolverá o seu problema. O meu, como você disse, está usando uma versão muito antiga do Leaflet (não sei de onde copio isso).
Ramiroaznar 10/09/16