<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Arquivos geolocalização html5 - Web-Zoneware</title>
	<atom:link href="https://webzoneware.com/tag/geolocalizacao-html5/feed/" rel="self" type="application/rss+xml" />
	<link>https://webzoneware.com/tag/geolocalizacao-html5/</link>
	<description>Mais do que apenas uma academia web.</description>
	<lastBuildDate>Wed, 21 Oct 2026 03:53:32 +0000</lastBuildDate>
	<language>pt-BR</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	

<image>
	<url>https://webzoneware.com/wp-content/uploads/icon-webzoneware-150x150.png</url>
	<title>Arquivos geolocalização html5 - Web-Zoneware</title>
	<link>https://webzoneware.com/tag/geolocalizacao-html5/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>API de Geolocalização no HTML5: Guia Prático &#124; Web Academy</title>
		<link>https://webzoneware.com/web-academy/curso-html/geolocalizacao-api-html5/</link>
					<comments>https://webzoneware.com/web-academy/curso-html/geolocalizacao-api-html5/#respond</comments>
		
		<dc:creator><![CDATA[Web-Zoneware]]></dc:creator>
		<pubDate>Wed, 21 Oct 2026 03:51:17 +0000</pubDate>
				<category><![CDATA[Curso de HTML & HTML5]]></category>
		<category><![CDATA[api de geolocalização]]></category>
		<category><![CDATA[geolocalização html5]]></category>
		<category><![CDATA[latitude e longitude html5]]></category>
		<category><![CDATA[navigator geolocation]]></category>
		<category><![CDATA[watchposition javascript]]></category>
		<guid isPermaLink="false">https://webzoneware.com/?p=29339</guid>

					<description><![CDATA[<p>A API de Geolocalização do HTML5 permite que aplicações web solicitem e obtenham a localização física aproximada ou exata (latitude e longitude) do dispositivo do usuário. Com essa tecnologia nativa do navegador, é possível construir experiências altamente contextuais — como encontrar a filial mais próxima de uma loja, calcular taxas de entrega em tempo real, [&#8230;]</p>
<p>O post <a href="https://webzoneware.com/web-academy/curso-html/geolocalizacao-api-html5/">API de Geolocalização no HTML5: Guia Prático | Web Academy</a> apareceu primeiro em <a href="https://webzoneware.com">Web-Zoneware</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p class="wzw-lesson-lead">
    A <strong>API de Geolocalização do HTML5</strong> permite que aplicações web solicitem e obtenham a localização física aproximada ou exata (latitude e longitude) do dispositivo do usuário. Com essa tecnologia nativa do navegador, é possível construir experiências altamente contextuais — como encontrar a filial mais próxima de uma loja, calcular taxas de entrega em tempo real, traçar trajetos e preencher endereços automaticamente.
</p>
<h2>1. Privacidade, Segurança e o Requisito Obrigatório do HTTPS</h2>
<p>
    Por se tratar de um dado altamente sensível de privacidade, o consórcio W3C e os fabricantes de navegadores implementaram duas barreiras invioláveis de segurança:
</p>
<ol>
<li>
        <strong>Contexto Seguro Obrigatório (HTTPS):</strong> A API de Geolocalização é completamente bloqueada em sites que rodam no protocolo inseguro <code>http://</code>. A única exceção admitida pelos navegadores é o ambiente de desenvolvimento local (<code>http://localhost</code>).
    </li>
<li>
        <strong>Consentimento Explícito do Usuário:</strong> O navegador <em>nunca</em> entrega as coordenadas sem que o usuário aprove expressamente o pedido em uma caixa de diálogo nativa. O visitante tem o poder de autorizar uma única vez, autorizar sempre ou bloquear permanentemente o acesso.
    </li>
</ol>
<h2>2. Fontes de Localização: Como o Navegador Descobre Onde Você Está?</h2>
<p>
    Nos bastidores, o navegador combina diferentes tecnologias de hardware e rede para triangular a posição:
</p>
<ul>
<li><strong>Smartphones e Tablets:</strong> Utilizam chips de GPS integrados (precisão cirúrgica de 3 a 10 metros), aliados à triangulação de torres de celular (GSM/5G) e redes Wi-Fi próximas.</li>
<li><strong>Computadores Desktop e Notebooks:</strong> Recorrem ao mapeamento de roteadores Wi-Fi conhecidos e geolocalização por IP reverso (precisão em nível de bairro ou cidade).</li>
</ul>
<h2>3. Métodos Principais de navigator.geolocation</h2>
<p>
    A API é acessada através do objeto global <code>navigator.geolocation</code>, que disponibiliza três métodos essenciais:
</p>
<div class="wzw-table-responsive">
<table class="wzw-tech-table">
<thead>
<tr>
<th>Método</th>
<th>Assinatura</th>
<th>Finalidade</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>getCurrentPosition()</code></td>
<td><code>(sucesso, erro, opcoes)</code></td>
<td>Captura uma única fotografia das coordenadas geográficas no momento da chamada.</td>
</tr>
<tr>
<td><code>watchPosition()</code></td>
<td><code>(sucesso, erro, opcoes)</code></td>
<td>Monitora continuamente o deslocamento do usuário e executa o callback sempre que a posição mudar.</td>
</tr>
<tr>
<td><code>clearWatch()</code></td>
<td><code>(watchId)</code></td>
<td>Interrompe o monitoramento contínuo para economizar a bateria do dispositivo.</td>
</tr>
</tbody>
</table>
</div>
<h2>4. Estrutura do Objeto de Coordenadas (GeolocationCoordinates)</h2>
<p>
    Quando o usuário autoriza o acesso, a função de sucesso recebe um objeto com os seguintes atributos:
</p>
<ul>
<li><code>coords.latitude</code>: Latitude decimal (ex: <code>-23.550520</code>).</li>
<li><code>coords.longitude</code>: Longitude decimal (ex: <code>-46.633308</code>).</li>
<li><code>coords.accuracy</code>: Nível de precisão da medição expressa em metros.</li>
<li><code>coords.altitude</code>: Altitude em metros acima do nível do mar (se suportado pelo hardware).</li>
<li><code>coords.speed</code>: Velocidade instantânea de deslocamento em metros por segundo.</li>
<li><code>coords.heading</code>: Direção da bússola em graus (0° a 360°), onde 0° representa o Norte geográfico.</li>
</ul>
<h2>5. Implementação Prática: Captura de Coordenadas com Tratamento de Erros</h2>
<p>
    Abaixo criamos uma interface completa com botão de ação, exibição dos dados formatados e captura dos 3 cenários clássicos de erro previstos pela especificação:
</p>
    <div class="wzw-ide-card" id="wzw-code-87458" data-lang="html">
        <div class="wzw-ide-header">
            <div class="wzw-ide-dots" aria-hidden="true">
                <span class="wzw-dot wzw-dot-red"></span>
                <span class="wzw-dot wzw-dot-amber"></span>
                <span class="wzw-dot wzw-dot-green"></span>
            </div>
            <div class="wzw-ide-meta">
                <span class="wzw-ide-lang-badge">HTML5</span>
                                <span class="wzw-ide-lines-count">15 linhas</span>
            </div>
            <div class="wzw-ide-actions">
                <button type="button" class="wzw-ide-btn wzw-ide-wrap-btn" onclick="wzwToggleCodeWrap('wzw-code-87458', this)" title="Alternar quebra automática de linhas">
                    ⇄ Wrap
                </button>
                <button type="button" class="wzw-ide-btn wzw-ide-copy-btn" onclick="wzwCopyCodeBlock('wzw-code-87458', this)" aria-label="Copiar código para a área de transferência">
                    📋 <span class="wzw-copy-text">Copiar Código</span>
                </button>
            </div>
        </div>
        <div class="wzw-ide-body">
            <pre class="wzw-ide-pre" tabindex="0"><code class="wzw-ide-code"><span class="wzw-code-line"><span class="wzw-tk-tag">&lt;div</span> <span class="wzw-tk-attr">class</span>=<span class="wzw-tk-str">&quot;wzw-geo-card&quot;</span><span class="wzw-tk-tag">&gt;</span></span>
<span class="wzw-code-line">    <span class="wzw-tk-tag">&lt;h3&gt;</span>📍 Minha Posição Atual<span class="wzw-tk-tag">&lt;/h3&gt;</span></span>
<span class="wzw-code-line">    <span class="wzw-tk-tag">&lt;p&gt;</span>Clique no botão abaixo para capturar suas coordenadas em tempo real:<span class="wzw-tk-tag">&lt;/p&gt;</span></span>
<span class="wzw-code-line">    </span>
<span class="wzw-code-line">    <span class="wzw-tk-tag">&lt;button</span> <span class="wzw-tk-attr">id</span>=<span class="wzw-tk-str">&quot;btnLocalizar&quot;</span> <span class="wzw-tk-attr">class</span>=<span class="wzw-tk-str">&quot;btn-geo&quot;</span><span class="wzw-tk-tag">&gt;</span>Obter Minha Localização<span class="wzw-tk-tag">&lt;/button&gt;</span></span>
<span class="wzw-code-line">    </span>
<span class="wzw-code-line">    <span class="wzw-tk-tag">&lt;div</span> <span class="wzw-tk-attr">id</span>=<span class="wzw-tk-str">&quot;geoResultado&quot;</span> <span class="wzw-tk-attr">class</span>=<span class="wzw-tk-str">&quot;geo-info&quot;</span> <span class="wzw-tk-attr">style</span>=<span class="wzw-tk-str">&quot;display: none;&quot;</span><span class="wzw-tk-tag">&gt;</span></span>
<span class="wzw-code-line">        <span class="wzw-tk-tag">&lt;p&gt;</span><span class="wzw-tk-tag">&lt;strong&gt;</span>Latitude:<span class="wzw-tk-tag">&lt;/strong&gt;</span> <span class="wzw-tk-tag">&lt;span</span> <span class="wzw-tk-attr">id</span>=<span class="wzw-tk-str">&quot;lblLat&quot;</span><span class="wzw-tk-tag">&gt;</span>-<span class="wzw-tk-tag">&lt;/span&gt;</span><span class="wzw-tk-tag">&lt;/p&gt;</span></span>
<span class="wzw-code-line">        <span class="wzw-tk-tag">&lt;p&gt;</span><span class="wzw-tk-tag">&lt;strong&gt;</span>Longitude:<span class="wzw-tk-tag">&lt;/strong&gt;</span> <span class="wzw-tk-tag">&lt;span</span> <span class="wzw-tk-attr">id</span>=<span class="wzw-tk-str">&quot;lblLng&quot;</span><span class="wzw-tk-tag">&gt;</span>-<span class="wzw-tk-tag">&lt;/span&gt;</span><span class="wzw-tk-tag">&lt;/p&gt;</span></span>
<span class="wzw-code-line">        <span class="wzw-tk-tag">&lt;p&gt;</span><span class="wzw-tk-tag">&lt;strong&gt;</span>Precisão do Sinal:<span class="wzw-tk-tag">&lt;/strong&gt;</span> <span class="wzw-tk-tag">&lt;span</span> <span class="wzw-tk-attr">id</span>=<span class="wzw-tk-str">&quot;lblPrecisao&quot;</span><span class="wzw-tk-tag">&gt;</span>-<span class="wzw-tk-tag">&lt;/span&gt;</span> metros<span class="wzw-tk-tag">&lt;/p&gt;</span></span>
<span class="wzw-code-line">        <span class="wzw-tk-tag">&lt;a</span> <span class="wzw-tk-attr">id</span>=<span class="wzw-tk-str">&quot;linkMapa&quot;</span> <span class="wzw-tk-attr">href</span>=<span class="wzw-tk-str">&quot;#&quot;</span> <span class="wzw-tk-attr">target</span>=<span class="wzw-tk-str">&quot;_blank&quot;</span> <span class="wzw-tk-attr">rel</span>=<span class="wzw-tk-str">&quot;noopener&quot;</span> <span class="wzw-tk-attr">class</span>=<span class="wzw-tk-str">&quot;btn-mapa&quot;</span><span class="wzw-tk-tag">&gt;</span>Abrir no OpenStreetMap ↗<span class="wzw-tk-tag">&lt;/a&gt;</span></span>
<span class="wzw-code-line">    <span class="wzw-tk-tag">&lt;/div&gt;</span></span>
<span class="wzw-code-line">&nbsp;</span>
<span class="wzw-code-line">    <span class="wzw-tk-tag">&lt;div</span> <span class="wzw-tk-attr">id</span>=<span class="wzw-tk-str">&quot;geoFeedback&quot;</span> <span class="wzw-tk-attr">class</span>=<span class="wzw-tk-str">&quot;geo-mensagem&quot;</span><span class="wzw-tk-tag">&gt;</span><span class="wzw-tk-tag">&lt;/div&gt;</span></span>
<span class="wzw-code-line"><span class="wzw-tk-tag">&lt;/div&gt;</span></span>
</code></pre>
            <textarea class="wzw-ide-raw" aria-hidden="true" tabindex="-1" readonly>&lt;div class=&quot;wzw-geo-card&quot;&gt;
    &lt;h3&gt;📍 Minha Posição Atual&lt;/h3&gt;
    &lt;p&gt;Clique no botão abaixo para capturar suas coordenadas em tempo real:&lt;/p&gt;
    
    &lt;button id=&quot;btnLocalizar&quot; class=&quot;btn-geo&quot;&gt;Obter Minha Localização&lt;/button&gt;
    
    &lt;div id=&quot;geoResultado&quot; class=&quot;geo-info&quot; style=&quot;display: none;&quot;&gt;
        &lt;p&gt;&lt;strong&gt;Latitude:&lt;/strong&gt; &lt;span id=&quot;lblLat&quot;&gt;-&lt;/span&gt;&lt;/p&gt;
        &lt;p&gt;&lt;strong&gt;Longitude:&lt;/strong&gt; &lt;span id=&quot;lblLng&quot;&gt;-&lt;/span&gt;&lt;/p&gt;
        &lt;p&gt;&lt;strong&gt;Precisão do Sinal:&lt;/strong&gt; &lt;span id=&quot;lblPrecisao&quot;&gt;-&lt;/span&gt; metros&lt;/p&gt;
        &lt;a id=&quot;linkMapa&quot; href=&quot;#&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot; class=&quot;btn-mapa&quot;&gt;Abrir no OpenStreetMap ↗&lt;/a&gt;
    &lt;/div&gt;

    &lt;div id=&quot;geoFeedback&quot; class=&quot;geo-mensagem&quot;&gt;&lt;/div&gt;
&lt;/div&gt;</textarea>
        </div>
    </div>
    
    <div class="wzw-ide-card" id="wzw-code-68573" data-lang="javascript">
        <div class="wzw-ide-header">
            <div class="wzw-ide-dots" aria-hidden="true">
                <span class="wzw-dot wzw-dot-red"></span>
                <span class="wzw-dot wzw-dot-amber"></span>
                <span class="wzw-dot wzw-dot-green"></span>
            </div>
            <div class="wzw-ide-meta">
                <span class="wzw-ide-lang-badge">JavaScript</span>
                                <span class="wzw-ide-lines-count">64 linhas</span>
            </div>
            <div class="wzw-ide-actions">
                <button type="button" class="wzw-ide-btn wzw-ide-wrap-btn" onclick="wzwToggleCodeWrap('wzw-code-68573', this)" title="Alternar quebra automática de linhas">
                    ⇄ Wrap
                </button>
                <button type="button" class="wzw-ide-btn wzw-ide-copy-btn" onclick="wzwCopyCodeBlock('wzw-code-68573', this)" aria-label="Copiar código para a área de transferência">
                    📋 <span class="wzw-copy-text">Copiar Código</span>
                </button>
            </div>
        </div>
        <div class="wzw-ide-body">
            <pre class="wzw-ide-pre" tabindex="0"><code class="wzw-ide-code"><span class="wzw-code-line"><span class="wzw-tk-kw">const</span> btn = document.<span class="wzw-tk-fn">getElementById</span>(<span class="wzw-tk-str">&#039;btnLocalizar&#039;</span>);</span>
<span class="wzw-code-line"><span class="wzw-tk-kw">const</span> painelResultado = document.<span class="wzw-tk-fn">getElementById</span>(<span class="wzw-tk-str">&#039;geoResultado&#039;</span>);</span>
<span class="wzw-code-line"><span class="wzw-tk-kw">const</span> painelMensagem = document.<span class="wzw-tk-fn">getElementById</span>(<span class="wzw-tk-str">&#039;geoFeedback&#039;</span>);</span>
<span class="wzw-code-line">&nbsp;</span>
<span class="wzw-code-line">btn.<span class="wzw-tk-fn">addEventListener</span>(<span class="wzw-tk-str">&#039;click&#039;</span>, () =&gt; {</span>
<span class="wzw-code-line">    <span class="wzw-tk-comment">// 1. Verifica se o navegador tem suporte à API</span></span>
<span class="wzw-code-line">    <span class="wzw-tk-kw">if</span> (!(<span class="wzw-tk-str">&#039;geolocation&#039;</span> in navigator)) {</span>
<span class="wzw-code-line">        painelMensagem.textContent = <span class="wzw-tk-str">&#039;Seu navegador não possui suporte à Geolocalização.&#039;</span>;</span>
<span class="wzw-code-line">        painelMensagem.className = <span class="wzw-tk-str">&#039;geo-mensagem erro&#039;</span>;</span>
<span class="wzw-code-line">        <span class="wzw-tk-kw">return</span>;</span>
<span class="wzw-code-line">    }</span>
<span class="wzw-code-line">&nbsp;</span>
<span class="wzw-code-line">    painelMensagem.textContent = <span class="wzw-tk-str">&#039;Solicitando permissão e aguardando satélites...&#039;</span>;</span>
<span class="wzw-code-line">    painelMensagem.className = <span class="wzw-tk-str">&#039;geo-mensagem info&#039;</span>;</span>
<span class="wzw-code-line">&nbsp;</span>
<span class="wzw-code-line">    <span class="wzw-tk-comment">// 2. Opções de ajuste fino (PositionOptions)</span></span>
<span class="wzw-code-line">    <span class="wzw-tk-kw">const</span> opcoes = {</span>
<span class="wzw-code-line">        enableHighAccuracy: <span class="wzw-tk-kw">true</span>,<span class="wzw-tk-comment"> // Força uso do GPS no celular</span></span>
<span class="wzw-code-line">        timeout: <span class="wzw-tk-num">10000</span>,<span class="wzw-tk-comment">          // Tempo limite de 10 segundos</span></span>
<span class="wzw-code-line">        maximumAge: <span class="wzw-tk-num">0</span><span class="wzw-tk-comment">            // Não aceita posições antigas em cache</span></span>
<span class="wzw-code-line">    };</span>
<span class="wzw-code-line">&nbsp;</span>
<span class="wzw-code-line">    <span class="wzw-tk-comment">// 3. Execução da busca de coordenadas</span></span>
<span class="wzw-code-line">    navigator.geolocation.<span class="wzw-tk-fn">getCurrentPosition</span>(sucessoLocalizacao, erroLocalizacao, opcoes);</span>
<span class="wzw-code-line">});</span>
<span class="wzw-code-line">&nbsp;</span>
<span class="wzw-code-line"><span class="wzw-tk-comment">// Callback executado quando o usuário autoriza</span></span>
<span class="wzw-code-line"><span class="wzw-tk-kw">function</span> <span class="wzw-tk-fn">sucessoLocalizacao</span>(posicao) {</span>
<span class="wzw-code-line">    <span class="wzw-tk-kw">const</span> lat = posicao.coords.latitude;</span>
<span class="wzw-code-line">    <span class="wzw-tk-kw">const</span> lng = posicao.coords.longitude;</span>
<span class="wzw-code-line">    <span class="wzw-tk-kw">const</span> precisao = Math.<span class="wzw-tk-fn">round</span>(posicao.coords.accuracy);</span>
<span class="wzw-code-line">&nbsp;</span>
<span class="wzw-code-line">    document.<span class="wzw-tk-fn">getElementById</span>(<span class="wzw-tk-str">&#039;lblLat&#039;</span>).textContent = lat.<span class="wzw-tk-fn">toFixed</span>(<span class="wzw-tk-num">6</span>);</span>
<span class="wzw-code-line">    document.<span class="wzw-tk-fn">getElementById</span>(<span class="wzw-tk-str">&#039;lblLng&#039;</span>).textContent = lng.<span class="wzw-tk-fn">toFixed</span>(<span class="wzw-tk-num">6</span>);</span>
<span class="wzw-code-line">    document.<span class="wzw-tk-fn">getElementById</span>(<span class="wzw-tk-str">&#039;lblPrecisao&#039;</span>).textContent = precisao;</span>
<span class="wzw-code-line">&nbsp;</span>
<span class="wzw-code-line">    <span class="wzw-tk-comment">// Link dinâmico para mapa interativo</span></span>
<span class="wzw-code-line">    <span class="wzw-tk-kw">const</span> linkMapa = document.<span class="wzw-tk-fn">getElementById</span>(<span class="wzw-tk-str">&#039;linkMapa&#039;</span>);</span>
<span class="wzw-code-line">    linkMapa.href = <span class="wzw-tk-str">`https://www.openstreetmap.org/?mlat=${lat}&amp;mlon=${lng}#map=16/${lat}/${lng}`</span>;</span>
<span class="wzw-code-line">&nbsp;</span>
<span class="wzw-code-line">    painelResultado.style.display = <span class="wzw-tk-str">&#039;block&#039;</span>;</span>
<span class="wzw-code-line">    painelMensagem.textContent = <span class="wzw-tk-str">&#039;Localização obtida com sucesso!&#039;</span>;</span>
<span class="wzw-code-line">    painelMensagem.className = <span class="wzw-tk-str">&#039;geo-mensagem sucesso&#039;</span>;</span>
<span class="wzw-code-line">}</span>
<span class="wzw-code-line">&nbsp;</span>
<span class="wzw-code-line"><span class="wzw-tk-comment">// Callback executado em caso de falha ou recusa</span></span>
<span class="wzw-code-line"><span class="wzw-tk-kw">function</span> <span class="wzw-tk-fn">erroLocalizacao</span>(erro) {</span>
<span class="wzw-code-line">    painelResultado.style.display = <span class="wzw-tk-str">&#039;none&#039;</span>;</span>
<span class="wzw-code-line">    painelMensagem.className = <span class="wzw-tk-str">&#039;geo-mensagem erro&#039;</span>;</span>
<span class="wzw-code-line">&nbsp;</span>
<span class="wzw-code-line">    <span class="wzw-tk-kw">switch</span> (erro.code) {</span>
<span class="wzw-code-line">        <span class="wzw-tk-kw">case</span> erro.PERMISSION_DENIED:</span>
<span class="wzw-code-line">            painelMensagem.textContent = <span class="wzw-tk-str">&#039;Você recusou a permissão de acesso à sua localização.&#039;</span>;</span>
<span class="wzw-code-line">            <span class="wzw-tk-kw">break</span>;</span>
<span class="wzw-code-line">        <span class="wzw-tk-kw">case</span> erro.POSITION_UNAVAILABLE:</span>
<span class="wzw-code-line">            painelMensagem.textContent = <span class="wzw-tk-str">&#039;As informações de localização estão indisponíveis no momento.&#039;</span>;</span>
<span class="wzw-code-line">            <span class="wzw-tk-kw">break</span>;</span>
<span class="wzw-code-line">        <span class="wzw-tk-kw">case</span> erro.TIMEOUT:</span>
<span class="wzw-code-line">            painelMensagem.textContent = <span class="wzw-tk-str">&#039;O tempo limite para obter a localização foi atingido.&#039;</span>;</span>
<span class="wzw-code-line">            <span class="wzw-tk-kw">break</span>;</span>
<span class="wzw-code-line">        <span class="wzw-tk-kw">default</span>:</span>
<span class="wzw-code-line">            painelMensagem.textContent = <span class="wzw-tk-str">&#039;Ocorreu um erro desconhecido ao tentar localizar.&#039;</span>;</span>
<span class="wzw-code-line">    }</span>
<span class="wzw-code-line">}</span>
</code></pre>
            <textarea class="wzw-ide-raw" aria-hidden="true" tabindex="-1" readonly>const btn = document.getElementById(&#039;btnLocalizar&#039;);
const painelResultado = document.getElementById(&#039;geoResultado&#039;);
const painelMensagem = document.getElementById(&#039;geoFeedback&#039;);

btn.addEventListener(&#039;click&#039;, () =&gt; {
    // 1. Verifica se o navegador tem suporte à API
    if (!(&#039;geolocation&#039; in navigator)) {
        painelMensagem.textContent = &#039;Seu navegador não possui suporte à Geolocalização.&#039;;
        painelMensagem.className = &#039;geo-mensagem erro&#039;;
        return;
    }

    painelMensagem.textContent = &#039;Solicitando permissão e aguardando satélites...&#039;;
    painelMensagem.className = &#039;geo-mensagem info&#039;;

    // 2. Opções de ajuste fino (PositionOptions)
    const opcoes = {
        enableHighAccuracy: true, // Força uso do GPS no celular
        timeout: 10000,          // Tempo limite de 10 segundos
        maximumAge: 0            // Não aceita posições antigas em cache
    };

    // 3. Execução da busca de coordenadas
    navigator.geolocation.getCurrentPosition(sucessoLocalizacao, erroLocalizacao, opcoes);
});

// Callback executado quando o usuário autoriza
function sucessoLocalizacao(posicao) {
    const lat = posicao.coords.latitude;
    const lng = posicao.coords.longitude;
    const precisao = Math.round(posicao.coords.accuracy);

    document.getElementById(&#039;lblLat&#039;).textContent = lat.toFixed(6);
    document.getElementById(&#039;lblLng&#039;).textContent = lng.toFixed(6);
    document.getElementById(&#039;lblPrecisao&#039;).textContent = precisao;

    // Link dinâmico para mapa interativo
    const linkMapa = document.getElementById(&#039;linkMapa&#039;);
    linkMapa.href = `https://www.openstreetmap.org/?mlat=${lat}&amp;mlon=${lng}#map=16/${lat}/${lng}`;

    painelResultado.style.display = &#039;block&#039;;
    painelMensagem.textContent = &#039;Localização obtida com sucesso!&#039;;
    painelMensagem.className = &#039;geo-mensagem sucesso&#039;;
}

// Callback executado em caso de falha ou recusa
function erroLocalizacao(erro) {
    painelResultado.style.display = &#039;none&#039;;
    painelMensagem.className = &#039;geo-mensagem erro&#039;;

    switch (erro.code) {
        case erro.PERMISSION_DENIED:
            painelMensagem.textContent = &#039;Você recusou a permissão de acesso à sua localização.&#039;;
            break;
        case erro.POSITION_UNAVAILABLE:
            painelMensagem.textContent = &#039;As informações de localização estão indisponíveis no momento.&#039;;
            break;
        case erro.TIMEOUT:
            painelMensagem.textContent = &#039;O tempo limite para obter a localização foi atingido.&#039;;
            break;
        default:
            painelMensagem.textContent = &#039;Ocorreu um erro desconhecido ao tentar localizar.&#039;;
    }
}</textarea>
        </div>
    </div>
    
<div class="wzw-playground-action-bar">
    <span class="wzw-playground-desc">🧪 <strong>Quer testar a captura de coordenadas geográficas no seu navegador?</strong></span><br />
    <a href="https://webzoneware.com/web-academy/playground-web/" class="wzw-btn-playground" target="_blank" rel="noopener">⚡ Abrir no Playground IDE &rarr;<br />
    </a>
</div>
<div class="wzw-pro-tip">
<h4>💡 Dica Pro de UX: O Momento Certo de Solicitar Permissão</h4>
<p>
        Nunca dispare <code>getCurrentPosition()</code> logo ao carregar a página inicial (evento <code>DOMContentLoaded</code>). Isso assusta o visitante e faz a taxa de rejeição da permissão ultrapassar 80%!
    </p>
<p>
        <strong>A boa prática de mercado:</strong> Explique com clareza o benefício antes de disparar o pop-up nativo (ex: &#8220;Clique para calcular a entrega mais rápida até sua casa&#8221;). Quando o usuário entende o valor imediato, a taxa de aprovação sobe para mais de 90%.
    </p>
</div>
<h2>6. Ferramentas Relacionadas &#038; Próximos Passos</h2>
<p>
    Aprofunde seus conhecimentos explorando as ferramentas e módulos complementares da plataforma:
</p>
<ul>
<li><a href="https://webzoneware.com/ferramentas-do-desenvolvedor-web/">Central do Desenvolvedor Web</a>: Conversores de dados, formatadores de JSON e utilitários para depuração de APIs.</li>
<li><a href="https://webzoneware.com/ferramentas-de-imagens/">Hub Master de Imagens</a>: Ferramentas para otimizar ícones e marcadores personalizados de mapa.</li>
<li><a href="https://webzoneware.com/web-academy/html/drag-and-drop-api-html5/">Lição 36: Drag and Drop API</a>: Crie interfaces interativas com arraste de pontos no mapa.</li>
<li><a href="https://webzoneware.com/web-academy/html/web-storage-localstorage-sessionstorage/">Lição 38: Web Storage: LocalStorage &#038; SessionStorage</a>: Aprenda a salvar a cidade ou o CEP do usuário no navegador sem depender de cookies.</li>
</ul>
<h2>7. Referências Técnicas &#038; Especificações Oficiais</h2>
<ul>
<li><a href="https://www.w3.org/TR/geolocation/" target="_blank" rel="noopener">W3C Geolocation API Specification (Recommendation)</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API" target="_blank" rel="noopener">MDN Web Docs: Using the Geolocation API</a></li>
<li><a href="https://web.dev/articles/user-location" target="_blank" rel="noopener">Google Web Fundamentals: Designing Great Geolocation Experiences</a></li>
</ul>
<p><!-- Schema.org TechArticle JSON-LD --><br />
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "TechArticle",
  "headline": "API de Geolocalização no HTML5: Coordenadas e Mapas",
  "description": "Aprenda a obter a posição geográfica do usuário no HTML5 com navigator.geolocation, tratamento de erros e HTTPS seguro.",
  "url": "https://webzoneware.com/web-academy/html/geolocalizacao-api-html5/",
  "inLanguage": "pt-BR",
  "proficiencyLevel": "Intermediate",
  "articleSection": "Web Academy - Curso de HTML & HTML5 Completo",
  "author": {
    "@type": "Organization",
    "name": "Web-ZoneWare",
    "url": "https://webzoneware.com"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Web-ZoneWare",
    "logo": {
      "@type": "ImageObject",
      "url": "https://webzoneware.com/wp-content/themes/astra-child/assets/images/logo.png"
    }
  }
}
</script></p>
<p>O post <a href="https://webzoneware.com/web-academy/curso-html/geolocalizacao-api-html5/">API de Geolocalização no HTML5: Guia Prático | Web Academy</a> apareceu primeiro em <a href="https://webzoneware.com">Web-Zoneware</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://webzoneware.com/web-academy/curso-html/geolocalizacao-api-html5/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
