2

Tenho um projeto no Google Maps Javascript que envolve um bocado de funções interligadas. No momento, eu tenho 2 inputs text recebendo Latitude e Longitude do clique do meu mouse na div do mapa do Google Maps, em cada clique ele recebe normalmente as coordenadas, o problema é que eu os recebo apenas em decimal (ex: 30.049402, 56.055040) e gostaria de receber eles em GMS (graus minutos segundos) também.

No momento eu estou conseguindo mostrar nesses 2 inputs os caracteres do GMS (ex: S1º2'3") mas com os valor em NaN.

Queria saber o que estou fazendo de errado, visto que depois de alguns refresh's ele até consegue converter correto, mas bastou atualizar a página e volta para os valores NaN.

Meu objetivo final seria deixar igual ao mapa existente no site: GPS Converter, pegando as duas coordenadas com o clique.

Abaixo segue a imagem dos resultados e a parte do script:

Antes de pressionar o botão "GMS" para converter

Depois de pressionar o botão "GMS" para converter

var lat = document.getElementById("latMap").value;
var lng = document.getElementById("lngMap").value;

document.getElementById('converter').addEventListener('click', function() {
    ddToDms(lat, lng);
});

// conversion string in DD to DMS.
function ddToDms(lat, lng) {
    var latResult, lngResult, dmsResult;

    lat = parseFloat(lat);
    lng = parseFloat(lng);

    latResult = (lat >= 0)? 'N' : 'S';
    // Call to getDms(lat) function for the coordinates of Latitude in DMS.
    // The result is stored in latResult variable.
    
    latResult += getDms(lat);
    lngResult = (lng >= 0)? 'L' : 'O';
    
    // Call to getDms(lng) function for the coordinates of Longitude in DMS.
    // The result is stored in lngResult variable.
    lngResult += getDms(lng);

    document.getElementById("latMap").value = latResult;
    document.getElementById("lngMap").value = lngResult;
}



function getDms(val) {
    var valDeg, valMin, valSec, result;

    val = Math.abs(val);

    valDeg = Math.floor(val);
    result = valDeg + "º";

    valMin = Math.floor((val - valDeg) * 60);
    result += valMin + "'";

    valSec = Math.round((val - valDeg - valMin / 60) * 3600 * 1000) / 1000;
    result += valSec + '"';

    return result;
}
<div id="row" class="row">
    <div class="col-md-12">
        <label for="name"><h1 id="title">Latitude:</h1></label></font>
        <input id="latMap" class="form-control"/>
    </div>

    <div class="col-md-12">
        <br>
          <label for="name"><h1 id="title">Longitude:</h1></label>
          <input id="lngMap" class="form-control" />
    </div>
</div>

<button id="converter" class="btn btn-primary">
    <i class="fas fa-redo-alt"></i> GMS
</button>

UPDATE: Abaixo o script completo do projeto.

  <!-- script da função do google maps api !-->
    <script>

    /* Variaveis do mapa e alternar entre matriz\filial */
    var matriz = {lat: -30.967885713671667, lng: -54.67343294672901, zoom:21};
    var filial = {lat: -30.975773, lng:-54.643425, zoom:18};
    var map;
    var initMap;

        // Função de centralizar
        function CenterControl(controlDiv, map) {

        // Setar CSS para as bordas do painel
        var controlUI = document.createElement('div');
        controlUI.style.backgroundColor = '#fff';
        controlUI.style.border = '2px solid #fff';
        controlUI.style.borderRadius = '3px';
        controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
        controlUI.style.cursor = 'pointer';
        controlUI.style.marginBottom = '22px';
        controlUI.style.textAlign = 'center';
        controlUI.title = 'Clique para ir para a Matriz';
        controlDiv.appendChild(controlUI);

        // Setar CSS para o interior do painel
        var controlText = document.createElement('div');
        controlText.style.color = 'rgb(25,25,25)';
        controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
        controlText.style.fontSize = '16px';
        controlText.style.lineHeight = '38px';
        controlText.style.paddingLeft = '5px';
        controlText.style.paddingRight = '5px';
        controlText.innerHTML = 'Matriz';
        controlUI.appendChild(controlText);


        // Função do click para alternar foco para a matriz
        controlUI.addEventListener('click', function() {
          map.setCenter(matriz);
        });

      }

      // Função para centralizar mapa 2
      function CenterControl2(controlDiv2, map) {

          // Setar CSS para as bordas do painel
          var controlUI2 = document.createElement('div2');
          controlUI2.style.backgroundColor = '#fff';
          controlUI2.style.border = '14px solid #fff';
          controlUI2.style.borderRadius = '3px';
          controlUI2.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
          controlUI2.style.cursor = 'pointer';
          controlUI2.style.marginBottom = '22px';
          controlUI2.style.marginLeft = '7px';
          controlUI2.style.textAlign = 'center';
          controlUI2.title = 'Clique para ir para a Filial';
          controlDiv2.appendChild(controlUI2);

          // Setar CSS para o interior do painel
          var controlText2 = document.createElement('div2');
          controlText2.style.color = 'rgb(25,25,25)';
          controlText2.style.fontFamily = 'Roboto,Arial,sans-serif';
          controlText2.style.fontSize = '16px';
          controlText2.style.lineHeight = '38px';
          controlText2.style.paddingLeft = '5px';
          controlText2.style.paddingRight = '5px';
          controlText2.style.padding = '50px 0px 0px 0px';
          controlText2.innerHTML = 'Filial';
          controlUI2.appendChild(controlText2);

          // Função para centralizar mapa na Filial
          controlUI2.addEventListener('click', function() {
            map.setCenter(filial);
          });
        }

      var customLabel = {
        restaurant: {
          label: 'R'
        },
        bar: {
          label: 'B'
        }
      };

        //Função iniciar API do Google Maps no Engenho Coradini
        function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-30.975773, -54.643425),
          zoom: 18,
          disableDoubleClickZoom: true
        });

        var overlay;
        USGSOverlay.prototype = new google.maps.OverlayView();

        // Planta
        var bounds = new google.maps.LatLngBounds(
          new google.maps.LatLng(-30.978666922597185, -54.64720201485761),
          new google.maps.LatLng(-30.97247385563734, -54.64060378076283));

            // Imagem da planta baixa da Filial
            var srcImage = 'img/' +
                'planta.png';

            // O USGS Overlay customizado contém um objeto dentro da USGS image,
            // o bounds dessa imagem, e a referência para o mapa.
            overlay = new USGSOverlay(bounds, srcImage, map);

            /** @constructor */
            function USGSOverlay(bounds, image, map) {

              // Inicializar todas as propriedades.
              this.bounds_ = bounds;
              this.image_ = image;
              this.map_ = map;

              // Define uma propriedade para segurar a imagem na div.
              // Cria essa div pronta para receber na variável onAdd()
              this.div_ = null;

              // Chamamos a função principal setMap para aplicar essa Overlay.
              this.setMap(map);
            };

            /**
             * onAdd é chamado quando os pane's do mapa estão prontos e o overlay foi
             * carregado no mapa.
             */
            USGSOverlay.prototype.onAdd = function() {

              var div = document.createElement('div');
              div.style.borderStyle = 'none';
              div.style.borderWidth = '0px';
              div.style.position = 'absolute';

              // Cria o elemento img e anexa na div.
              var img = document.createElement('img');
              img.src = this.image_;
              img.style.width = '100%';
              img.style.height = '100%';
              img.style.position = 'absolute';
              div.appendChild(img);

              this.div_ = div;

              // Adiciona o elemento para o "overlayLayer" pane.
              var panes = this.getPanes();
              panes.overlayLayer.appendChild(div);
            };

            //Verificar se o navegador é internet explorer para desabilitar ferramenta de calculo
            CheckIE();
                function CheckIE()
                {
                var Browser;
                Browser = navigator.userAgent;
                if (Browser.indexOf("Trident") == -1)
                {
                  //Variavel para calculo de distancia
                  var measureTool = new MeasureTool(map, {
                    showSegmentLength: true,
                    unit: MeasureTool.UnitTypeId.METRIC
                  });
              }
              };

            USGSOverlay.prototype.draw = function() {

              // Usa-se sul-oeste e norte-leste
              // coordenadas de overlay para posicionar na posição e tamanho correto.
              // Requisitar a projeção do overlay.
              var overlayProjection = this.getProjection();

              // Requisitar a coordenada sul-oeste e o norte-leste do overlay
              // usando LatLngs e convertendo para coordenadas pixelares.
              // Usando as coordenadas para redimencionar a div.
              var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
              var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

              // redimencionar a div da imagem para posicionar nas dimensões indicadas.
              var div = this.div_;
              div.style.left = sw.x + 'px';
              div.style.top = ne.y + 'px';
              div.style.width = (ne.x - sw.x) + 'px';
              div.style.height = (sw.y - ne.y) + 'px';
            };

            // O metodo onRemove() irá ser chamada automaticamente do API se
            // setar o overlay do mapa para 'null'.
            USGSOverlay.prototype.onRemove = function() {
              this.div_.parentNode.removeChild(this.div_);
              this.div_ = null;
            };


            google.maps.event.addDomListener(window, 'load', initMap);

            // Planta
            var bounds2 = new google.maps.LatLngBounds(
              new google.maps.LatLng(-30.968439407164297, -54.67410671709331),
              new google.maps.LatLng(-30.96703360588649, -54.672603338960926));

                // Imagem da planta baixa da Matriz
                var srcImage2 = 'img/' +
                    'planta2.jpg';

                // O USGS Overlay customizado contém um objeto dentro da USGS image,
                // o bounds dessa imagem, e a referência para o mapa.
                overlay = new USGSOverlay(bounds2, srcImage2, map);

                /** @constructor */
                function USGSOverlay(bounds2, image, map) {

                  // Inicializar todas as propriedades.
                  this.bounds_ = bounds2;
                  this.image_ = image;
                  this.map_ = map;

                  // Define uma propriedade para segurar a imagem na div.
                  // Cria essa div pronta para receber na variável onAdd()
                  this.div_ = null;

                  // Chamamos a função principal setMap para aplicar essa Overlay.
                  this.setMap(map);
                };

                /**
                 * onAdd é chamado quando os pane's do mapa estão prontos e o overlay foi
                 * carregado no mapa.
                 */
                USGSOverlay.prototype.onAdd = function() {

                  var div = document.createElement('div');
                  div.style.borderStyle = 'none';
                  div.style.borderWidth = '0px';
                  div.style.position = 'absolute';

                  // Cria o elemento img e anexa na div.
                  var img = document.createElement('img');
                  img.src = this.image_;
                  img.style.width = '100%';
                  img.style.height = '100%';
                  img.style.position = 'absolute';
                  div.appendChild(img);

                  this.div_ = div;

                  // Adiciona o elemento para o "overlayLayer" pane.
                  var panes = this.getPanes();
                  panes.overlayLayer.appendChild(div);
                };

                USGSOverlay.prototype.draw = function() {

                  // Usa-se sul-oeste e norte-leste
                  // coordenadas de overlay para posicionar na posição e tamanho correto.
                  // Requisitar a projeção do overlay.
                  var overlayProjection = this.getProjection();

                  // Requisitar a coordenada sul-oeste e o norte-leste do overlay
                  // usando LatLngs e convertendo para coordenadas pixelares.
                  // Usando as coordenadas para redimencionar a div.
                  var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
                  var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

                  // redimencionar a div da imagem para posicionar nas dimensões indicadas.
                  var div = this.div_;
                  div.style.left = sw.x + 'px';
                  div.style.top = ne.y + 'px';
                  div.style.width = (ne.x - sw.x) + 'px';
                  div.style.height = (sw.y - ne.y) + 'px';
                };

                // O metodo onRemove() irá ser chamada automaticamente do API se
                // setar o overlay do mapa para 'null'.
                USGSOverlay.prototype.onRemove = function() {
                  this.div_.parentNode.removeChild(this.div_);
                  this.div_ = null;
                };


                google.maps.event.addDomListener(window, 'load', initMap);


        //Variaveis de alternancia de foco matriz/filial
        var centerControlDiv = document.createElement('div');
        var centerControl = new CenterControl(centerControlDiv, map);

        var centerControlDiv2 = document.createElement('div2');
        var centerControl2 = new CenterControl2(centerControlDiv2, map);

        centerControlDiv.index = 1;
        map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);

        centerControlDiv2.index = 1;
        map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv2);

        // Variavel para abrir a caixa de informação contendo a latitude e longitude
        var infoWindow = new google.maps.InfoWindow;

        // Variavel de localização e marcação de pontos em tempo real no mapa temporariamente
        var geocoder = new google.maps.Geocoder;

        // Função criar marcador temporário ao clicar no botão 'Procurar' com as coordenadas preenchidas

        document.getElementById('busca').addEventListener('click', function() {
                  geocodeLatLng(geocoder, map, infoWindow);
                });

        //Função procurar e marcar localizações no mapa usando o campo latitude e longitude
        function geocodeLatLng(geocoder, map, infowindow) {
       var input1 = document.getElementById('latMap').value;
       var input2 = document.getElementById('lngMap').value;
       var latlng = {lat: parseFloat(input1), lng: parseFloat(input2)};
       geocoder.geocode({'location': latlng}, function(results, status) {
         if (status === 'OK') {
           if (results[1]) {
             map.setZoom(19);
             map.setCenter(latlng);
       var marker = new google.maps.Marker({
             position: latlng,
             map: map,
             icon: 'img/green-dot.png'
           });

           infowindow.setContent('Marcador temporário');
           infowindow.open(map, marker);

         } else {
           window.alert('Nenhum resultado foi encontrado');
         }
       } else {
         window.alert('Geolocalização falhou devido a: ' + status);
       }
         marker.addListener("click", function(){
         marker.setMap(null);
         window.open('equipamentos.php?id=1', '_blank', "height=800, width=1000, scrollbars=yes").focus();
       });
     });
    }

    var timeoutId = 0;

    document.getElementById('converter').addEventListener('click', function() {
        var lat = document.getElementById("latMap").value;
        var lng = document.getElementById("lngMap").value;
            ddToDms(lat, lng);
            });

        // conversion string in DD to DMS.
        function ddToDms(lat, lng) {

          var latResult, lngResult, dmsResult;

           lat = parseFloat(lat);
           lng = parseFloat(lng);

           latResult = (lat >= 0)? 'N' : 'S';

           // Call to getDms(lat) function for the coordinates of Latitude in DMS.
           // The result is stored in latResult variable.
           latResult += getDms(lat);

           lngResult = (lng >= 0)? 'L' : 'O';

           // Call to getDms(lng) function for the coordinates of Longitude in DMS.
           // The result is stored in lngResult variable.
           lngResult += getDms(lng);

           document.getElementById("latMap").value = latResult;
           document.getElementById("lngMap").value = lngResult;

        }

  function getDms(val) {

  var valDeg, valMin, valSec, result;

  val = Math.abs(val);

  valDeg = Math.floor(val);
  result = valDeg + "º";

  valMin = Math.floor((val - valDeg) * 60);
  result += valMin + "'";

  valSec = Math.round((val - valDeg - valMin / 60) * 3600 * 1000) / 1000;
  result += valSec + '"';

  return result;
}

        // Função de pegar as coordenadas com o clique no mapa
        google.maps.event.addListener(map, 'click', function(event) {
                            document.getElementById('latMap').value = event.latLng.lat();
                            document.getElementById('lngMap').value = event.latLng.lng();
                        });


                    function mapDivClicked (event) {
                        var target = document.getElementById('map'),
                            posx = event.pageX - target.offsetLeft,
                            posy = event.pageY - target.offsetTop,
                            bounds = map.getBounds(),
                            neLatlng = bounds.getNorthEast(),
                            swLatlng = bounds.getSouthWest(),
                            startLat = neLatlng.latitude(),
                            endLng = neLatlng.longitude(),
                            endLat = swLatlng.latitude(),
                            startLng = swLatlng.longitude();

                        document.getElementById('posX').value = posx;
                        document.getElementById('posY').value = posy;
                        document.getElementById('latitude').value = startLat + ((posy/350) * (endLat - startLat));
                        document.getElementById('longitude').value = startLng + ((posx/500) * (endLng - startLng));
                    };


          // Função para pegar e executar formulário XML para pegar ID no banco
          downloadUrl('resultado.php', function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {
              var name = markerElem.getAttribute('name');
              var link = markerElem.getAttribute('link');
              var descricao = markerElem.getAttribute('descricao');
              var point = new google.maps.LatLng(
                  parseFloat(markerElem.getAttribute('lat')),
                  parseFloat(markerElem.getAttribute('lng')));

              //Função abrir descrição do banco de dados na caixa de informações dos marcadores fixos
              var infowincontent = document.createElement('div');
              var strong = document.createElement('strong');
              strong.textContent = name
              infowincontent.appendChild(strong);
              infowincontent.appendChild(document.createElement('br'));
              var text = document.createElement('text');
              text.textContent = descricao
              infowincontent.appendChild(text);
              var icon = customLabel[descricao] || {};

              //Função posicionar marcadores fixos baseados nos dados no BD
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                label: icon.label,
                optimized: false,
                zIndex: 1
              });

              // Função de abrir infobox + link para listagem de equipamento dentro do marcador fixado do BD
              marker.addListener('mouseover', function() {
                window.name = "principal";
                infoWindow.setContent(infowincontent);
                infoWindow.open(map, marker);
              });
              marker.addListener('click', function(){
                // Delay de 2 segundos para abrir a janela contendo os equipamentos baseados na ID ligadas na foreign key do BD
                setTimeout(function(){
                window.open(link, '_blank', "height=800, width=1000, scrollbars=yes").focus();
              }, 700);
              });
            });
          });
        }

      function downloadUrl(url, callback) {
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;

        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
          }
        };

        request.open('GET', url, true);
        request.send(null);
      }


      function doNothing() {}

    </script>

Na parte do PHP do projeto, não tem nenhuma função ou algo que chame a função. Todas são chamadas do javascript.

1 Resposta 1

2

O seu problema está no código que recupera os valores do formulário. Que é este daqui:

var lat = document.getElementById("latMap").value;
var lng = document.getElementById("lngMap").value;

Quando o código acima é executado, o formulário ainda não possui valores. Basta adicioná-los dentro do Event Listener

document.getElementById('converter').addEventListener('click', function() {
    var lat = document.getElementById("latMap").value;
    var lng = document.getElementById("lngMap").value;

    ddToDms(lat, lng);
});

// conversion string in DD to DMS.
function ddToDms(lat, lng) {
    var latResult, lngResult, dmsResult;

    lat = parseFloat(lat);
    lng = parseFloat(lng);

    latResult = (lat >= 0)? 'N' : 'S';
    // Call to getDms(lat) function for the coordinates of Latitude in DMS.
    // The result is stored in latResult variable.

    latResult += getDms(lat);
    lngResult = (lng >= 0)? 'L' : 'O';

    // Call to getDms(lng) function for the coordinates of Longitude in DMS.
    // The result is stored in lngResult variable.
    lngResult += getDms(lng);

    document.getElementById("latMap").value = latResult;
    document.getElementById("lngMap").value = lngResult;
}

function getDms(val) {
    var valDeg, valMin, valSec, result;

    val = Math.abs(val);

    valDeg = Math.floor(val);
    result = valDeg + "º";

    valMin = Math.floor((val - valDeg) * 60);
    result += valMin + "'";

    valSec = Math.round((val - valDeg - valMin / 60) * 3600 * 1000) / 1000;
    result += valSec + '"';

    return result;
}
<div id="row" class="row">
    <div class="col-md-12">
        <label for="latMap">Latitude:</label>
        <input id="latMap" class="form-control"/>
    </div>

    <div class="col-md-12">
        <br>
          <label for="lngMap">Longitude:</label>
          <input id="lngMap" class="form-control" />
    </div>
</div>

<button id="converter" class="btn btn-primary">
    <i class="fas fa-redo-alt"></i> GMS
</button>

Assim, os valores serão recuperados corretamente.

Além disso, realizei algumas correções no HTML e removi o H1 para ficar mais legível aqui no SO.

Update

Execução:

inserir a descrição da imagem aqui

Output:

inserir a descrição da imagem aqui

Está apenas sem o CSS, mas prova que o código funciona.

9
  • Obrigado pela resposta, mas infelizmente não surtiu efeito, ainda está mostrando "NaN" quando clico no botão GMS.
    – brnTwp
    8/08/2018 às 18:41
  • @brnTwp Você executou o código aqui no SO? Ele está funcionando corretamente. Vou adicionar uma imagem. Atualize seu código para que possamos validar. 8/08/2018 às 18:53
  • Sim, testei aqui e depois testei no meu projeto, aqui funciona, lá continua o mesmo. Não sei o que se passa pra ele ainda atribuir "NaN" aos valores.
    – brnTwp
    9/08/2018 às 12:02
  • Se aqui funciona e lá não, existe algo que está diferente. Verifique se não faltou nada no código que você postei. Valide se não existem id's repetidos, etc... 9/08/2018 às 12:23
  • Dei uma olhada no meu código e parece que o meu botão está executando 2 vezes! Mesmo clicando somente uma vez nele, ele executa a função 2 vezes, o que praticamente explica o porque do valor "NaN", pois na 1ª das 2 vezes que a função é executada, ele faz correto, mas como está duplicando, ele pega o valor transformado e tenta fazer com o valor já pronto, como o mesmo já está pronto, ele acaba se perdendo no cálculo do getDMS resultando em NaN.
    – brnTwp
    9/08/2018 às 14:49

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .