Ir para conteúdo
mpcarvalho

Geolocalização HTML

Recommended Posts

Pessoal, seguinte. Eu sei somente o basicão de JS, peguei um script para obter a localização do usuário que acessar a minha página, estou testando algumas funções inicialmente para realizar outras aplicações futuras, dado que nunca utilizei essa função antes.

 

Dúvida 1 = Quero melhorar a precisão dos dados que irei receber do usuário, para isso já pesquisei e encontrei a seguinte função: 

 

{enableHighAccuracy:true, maximumAge:30000, timeout:27000}

 

Onde posso utiliza-la no meu código abaixo?

 

<script>
    window.onload = getLocation;
    
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);  
  } else {
      location.href="https://google.com";
  }
}

function showPosition(position) {
     var latitude = position.coords.latitude; 
    var longitude =  position.coords.longitude;
    var accuracy = position.coords.accuracy;

    $.ajax({
        method: "post",
        url: "page.php",
         data: {'latitude': latitude, 'longitude': longitude, 'accuracy': accuracy},
         success: function(data){
             location.href="https://google.com";
         }
       });
    }
</script>

 

Dúvida 2 = Quando o usuário rejeitar o fornecimento de sua localização, como posso redireciona-lo par ama URL mesmo assim, sendo que na forma acima não funcionou.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Sulivan de Deus
      Olá pessoal, estou pensando em usar a geolocalização, surgindo um pop-up, caso o usuário permita o site saber sua localização e algumas condicionais, por exemplo caso o internauta esteja perto da loja física.

      Por exemplo:

      Se o usuário permitiu a localização e estiver pelo menos a 5km da loja física, echo na mensagem x.

      Eu achei alguns códigos que me deram um caminho, mas não foi o suficiente para construir a idea já que não tenho conhecimento vasto em javascript, segue abaixo os códigos que encontrei.

      No meu caso não gostaria que mostrasse o mapa, apenas calculasse a rota para saber qual a distância do usuário até a loja física e enviássemos um pop-up falando quantos km ou metros ele esta da loja, e um link para ele ser levado para rota no google maps.
       
      <!DOCTYPE html> <html> <body> <script type="text/javascript"> window.onload=function(){ getLocation(); }; </script> <div id="mapholder"></div> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition,showError); } else{x.innerHTML="Geolocalização não é suportada nesse browser.";} } function showPosition(position) { lat=position.coords.latitude; lon=position.coords.longitude; latlon=new google.maps.LatLng(lat, lon) mapholder=document.getElementById('mapholder') mapholder.style.height='250px'; mapholder.style.width='500px'; var myOptions={ center:latlon,zoom:14, mapTypeId:google.maps.MapTypeId.ROADMAP, mapTypeControl:false, navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL} }; var map=new google.maps.Map(document.getElementById("mapholder"),myOptions); var marker=new google.maps.Marker({position:latlon,map:map,title:"Você está Aqui!"}); } function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="Usuário rejeitou a solicitação de Geolocalização." break; case error.POSITION_UNAVAILABLE: x.innerHTML="Localização indisponível." break; case error.TIMEOUT: x.innerHTML="O tempo da requisição expirou." break; case error.UNKNOWN_ERROR: x.innerHTML="Algum erro desconhecido aconteceu." break; } } </script> </body> </html>
       
    • Por huhuhu
      Estou fazendo iniciando um app com Ionic 3,  e utilizando a API do google para geolocalização. Segui tutoriais e mesmo assim deu esse erro quando abro a página que deveria aparecer o mapa "
      Runtime Error Uncaught (in promise): TypeError: Cannot read property 'firstChild' of null "   Já procurei em alguns lugares e não encontro solução, nenhuma funciona. To precisando de ajuda com esses mapinhas. HTML da página inicial... <ion-header> <ion-navbar> <ion-title> Teste </ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-list> <ion-item> Latitude: {{lat}} </ion-item> <ion-item> Longitude: {{lon}} </ion-item> </ion-list> <button (click)="openMap()">Mapa</button> </ion-content> .ts da página inicial:
      import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { Geolocation } from '@ionic-native/geolocation'; import { MapPage } from '../map/map'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { lat:any=0.0; lon:any=0.0; constructor(public navCtrl: NavController, public geolocation: Geolocation) { //[ .. outra parte do código .. ] this.geolocation.getCurrentPosition().then((resp) => { // resp.coords.latitude // resp.coords.longitude this.lat = resp.coords.latitude; this.lon = resp.coords.longitude; }).catch((error) => { console.log('Error getting location', error); }); let watch = this.geolocation.watchPosition(); watch.subscribe((data) => { // data can be a set of coordinates, or an error (if an error occurred). // data.coords.latitude // data.coords.longitude }); } openMap(){ this.navCtrl.push(MapPage); } } //[ .. outra parte do código .. ] //} HTML da página do mapa:
      <ion-header> <ion-navbar> <ion-title>map</ion-title> </ion-navbar> </ion-header> <ion-content padding> <div id="mapa" > </div> </ion-content> .ts da página do mapa:
      import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams, Platform } from 'ionic-angular'; import '../map/map'; import { Geolocation } from '@ionic-native/geolocation'; declare var google: any; /** * Generated class for the MapPage page. * * See https://ionicframework.com/docs/components/#navigation for more info on * Ionic pages and navigation. */ @IonicPage() @Component({ selector: 'page-map', templateUrl: 'map.html', }) export class MapPage { private initPage(){ let LatLng = new google.maps.LatLng(-22.913293, -43.688930); let mapOptions = { center: LatLng, zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP, disableDefaultUI: true } let elemento = document.getElementById('mapa'); let mapa = new google.maps.Map(elemento, mapOptions); } //ionViewDidLoad() { // console.log('ionViewDidLoad MapPage'); //} constructor(public navCtrl: NavController, public navParams: NavParams, platform: Platform) { platform.ready().then(() =>{ this.initPage(); }, (err) => { console.log(err); }); } }  
      E na index.html (só uma parte): <!--para o api do google maps .................................................................. --> <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com; script-src 'self' https://*.googleapis.com 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline';"> <title>Ionic App</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico"> <link rel="manifest" href="manifest.json"> <meta name="theme-color" content="#4e8ef7"> <!-- google maps .............................................................................. --> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?&sensor=false"></script> Talvez seja informação demais, mas, acho melhor que tenha mais do que menos.
    • Por tony_lu
      Ola pessoal tudo bem?
      Queria uma informação, como eu consigo pegar a latitude e longitude de um usuário para eu colocar em um mapa do google??
    • Por giovannaalves
      https://sandiego.eater.com/maps/best-barbecue-restaurants-san-diego
      Esse site tem uma funcionalidade que conforme vai mudando a postagem pela barra de rolagem, o mapa também altera a localização. Alguém pode me ajudar a fazer algo igual?
    • Por daviassumpcao
      Olá pessoal... estou trabalhando em um projeto onde tenho itens em meu banco de dados que eu gostaria de sugerir para os usuários do meu site assim que eles acessarem. Essa sugestão seria feita com base na localização deste usuário, exemplo: se ele estivessem Belo Horizonte, apareceriam ofertas para ele nessa cidade... como é feito nesse site: https://www.educamaisbrasil.com.br/

      Como é meu primeiro projeto nesse sentido, estou sem saber o que fazer.... o PHP faz isso? Tipo, obter o IP do usuário e fazer uma busca no BD para itens em sua localidade.... ou se alguem puder me ajudar, com qual tecnologia se faz isso... é JS... Ajax... Sei lá.

      Perdoe-me se postei essa questão em local errado.
       
      Abraços
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.