Bom dia amigos!
Neste pequeno tutorial, vamos completar três tarefas simples com você:
- Usando a API de geolocalização e Leaflet.js, determine a localização atual do usuário e exiba-a no mapa
- Implementamos transição animada entre cidades
- Implementamos a comutação entre endereços com obtenção preliminar do nome do objeto e suas coordenadas
O código do projeto está aqui .
Você pode brincar com o código aqui:
Determine a localização atual do usuário
A API de geolocalização permite ao usuário fornecer um aplicativo da web com seus dados de localização. O aplicativo usa o método Geolocation.getCurrentPosition () para solicitar esses dados . Este método usa um parâmetro obrigatório e dois opcionais: sucesso é uma função de retorno de chamada que recebe um objeto Posição quando a permissão é concedida, erro é uma função de retorno de chamada que recebe um objeto PosiçãoError quando o acesso é negado e opções é um objeto de configurações. É assim que parece no código:
navigator.geolocation.getCurrentPosition(success, error, {
//
enableHighAccuracy: true
})
function success({ coords }) {
//
const { latitude, longitude } = coords
const position = [latitude, longitude]
console.log(position) // [, ]
}
function error({ message }) {
console.log(message) // PositionError: User denied Geolocation
}
Exibindo a localização do usuário no mapa
Usaremos Leaflet.js como mapa . Este serviço é uma alternativa ao Google Maps e ao OpenStreetMap, inferior a eles em funcionalidade, mas cativante pela simplicidade da interface. Criamos uma marcação na qual conectamos os estilos e o script do mapa:
<head>
<!-- -->
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""
/>
<!-- -->
<script
src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""
></script>
<!-- -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- -->
<div id="map"></div>
<!-- -->
<button id="my_position">My Position</button>
<!-- - -->
<script src="script.js" type="module"></script>
</body>
Adicione estilos mínimos (style.css):
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: grid;
place-content: center;
place-items: center;
background-color: rgb(241, 241, 241);
}
#map {
width: 480px;
height: 320px;
border-radius: 4px;
box-shadow: 0 0 1px #222;
}
button {
padding: 0.25em 0.75em;
margin: 1em 0.5em;
cursor: pointer;
user-select: none;
}
Crie um módulo map.js com o seguinte conteúdo:
//
//
let map = null
let marker = null
// -
// , (tooltip)
export function getMap(position, tooltip) {
//
if (map === null) {
// , setView - (zoom)
map = L.map('map').setView(position, 15)
} else return
// -
//
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution:
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map)
//
L.marker(position).addTo(map).bindPopup(tooltip).openPopup()
}
Por fim, criamos script.js:
//
import { getMap } from './map.js'
//
document.getElementById('my_position').onclick = () => {
navigator.geolocation.getCurrentPosition(success, error, {
enableHighAccuracy: true
})
}
function success({ coords }) {
const { latitude, longitude } = coords
const currentPosition = [latitude, longitude]
// ,
getMap(currentPosition, 'You are here')
}
function error({ message }) {
console.log(message)
}
Abra index.html em um navegador, clique no botão, conceda permissão para receber dados de localização, veja nossa posição no mapa.
Bem. Se movendo.
Transição animada entre cidades
Suponha que temos um objeto com três cidades (Moscou, São Petersburgo, Yekaterinburg) e suas coordenadas (db / cities.json):
{
"Moscow": {
"lat": "55.7522200",
"lon": "37.6155600"
},
"Saint-Petersburg": {
"lat": "59.9386300",
"lon": "30.3141300"
},
"Ekaterinburg": {
"lat": "56.8519000",
"lon": "60.6122000"
}
}
Precisamos implementar uma mudança suave entre essas cidades no mapa.
Adicione um contêiner para cidades à marcação:
<div id="cities"></div>
Reescrevendo script.js:
import { getMap } from './map.js'
//
const $cities = document.getElementById('cities')
;(async () => {
//
const response = await fetch('./db/cities.json')
const cities = await response.json()
//
for (const city in cities) {
//
const $button = document.createElement('button')
// -
$button.textContent = city
//
const { lat, lon } = cities[city]
// ,
// data-
$button.dataset.city = city
$button.dataset.lat = lat
$button.dataset.lon = lon
//
$cities.append($button)
}
})()
//
$cities.addEventListener('click', ({ target }) => {
//
if (target.tagName !== 'BUTTON') return
// , data-
const { city, lat, lon } = target.dataset
const position = [lat, lon]
// ,
getMap(position, city)
})
Vamos também mudar um pouco o map.js:
let map = null
let marker = null
export function getMap(position, tooltip) {
if (map === null) {
map = L.map('map').setView(position, 15)
} else {
//
map.flyTo(position)
}
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution:
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map)
//
if (marker) {
map.removeLayer(marker)
}
marker = new L.Marker(position).addTo(map).bindPopup(tooltip).openPopup()
}
Abra index.html. Quando você pressiona o primeiro botão, imediatamente obtemos a posição e o nome da cidade. Quando você pressiona o segundo botão e os subsequentes, nos movemos suavemente entre as cidades.
Troca suave entre endereços
Suponha que temos três objetos com nomes e endereços (db / address.json):
{
" ": " , 2",
" ": " , 46",
"-": " , 97"
}
Precisamos implementar a alternância entre esses objetos no mapa. Mas como podemos fazer isso sem coordenadas? De jeito nenhum. Portanto, precisamos de alguma forma obter essas coordenadas. Para fazer isso, usaremos o serviço Nominatim do OpenStreetMap. Para obter informações sobre como formar corretamente uma string de consulta, clique aqui . Vou demonstrar apenas uma das opções possíveis.
Portanto, criamos um contêiner para endereços na marcação:
<div id="addresses"></div>
Reescrevendo script.js:
//
const $addresses = document.getElementById('addresses')
;(async () => {
//
const response = await fetch('./db/addresses.json')
const addresses = await response.json()
//
for (const place in addresses) {
//
const $button = document.createElement('button')
$button.textContent = place
//
const address = addresses[place]
//
const query = address.replace(
/([--]+)\s([--]+),\s([0-9--]+)/,
'$3+$1+$2,+'
)
// , , 2++,+
// data-
$button.dataset.address = address
$button.dataset.query = query
$addresses.append($button)
}
})()
//
$addresses.addEventListener('click', async ({ target }) => {
if (target.tagName !== 'BUTTON') return
// data-
const { address, query } = target.dataset
//
const response = await fetch(
`https://nominatim.openstreetmap.org/search?q=${query}&format=json&limit=1`
)
// format - , limit -
// ,
const { display_name, lat, lon } = (await response.json())[0]
//
const name = display_name.match(/[--\s(«\-»)]+/)[0]
const position = [lat, lon]
//
const tooltip = `${name}<br>${address}`
//
getMap(position, tooltip)
})
Abra index.html. Quando você pressiona o primeiro botão, imediatamente obtemos a posição e o nome do teatro. Quando você pressiona o segundo botão e os subseqüentes, nos movemos suavemente entre os cinemas.
Legal. Tudo funciona conforme o esperado.
Sobre isso, deixe-me sair. Espero que você tenha encontrado algo interessante para você. Obrigado pela atenção e tenha um bom dia.