Selamat siang teman!
Dalam tutorial kecil ini, kami akan menyelesaikan tiga tugas sederhana bersama Anda:
- Dengan menggunakan Geolocation API dan Leaflet.js, tentukan lokasi pengguna saat ini dan tampilkan di peta
- Kami menerapkan transisi animasi antar kota
- Kami mengimplementasikan perpindahan antar alamat dengan awal mendapatkan nama objek dan koordinatnya
Kode proyek ada di sini .
Anda dapat bermain dengan kode di sini:
Tentukan lokasi pengguna saat ini
Geolocation API memungkinkan pengguna untuk menyediakan aplikasi web dengan data lokasi mereka. Aplikasi menggunakan metode Geolocation.getCurrentPosition () untuk meminta data ini . Metode ini mengambil satu parameter wajib dan dua parameter opsional: sukses adalah fungsi panggilan balik yang menerima objek Posisi saat izin diberikan, kesalahan adalah fungsi panggilan balik yang menerima objek PositionError saat akses ditolak, dan opsi adalah objek setelan. Ini adalah tampilannya dalam kode:
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
}
Menampilkan lokasi pengguna di peta
Kami akan menggunakan Leaflet.js sebagai peta . Layanan ini adalah alternatif dari Google Maps dan OpenStreetMap, lebih rendah dari fungsinya, tetapi menawan dengan kesederhanaan antarmukanya. Kami membuat markup di mana kami menghubungkan gaya dan skrip peta:
<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>
Tambahkan gaya minimal (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;
}
Buat modul map.js dengan konten berikut:
//
//
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()
}
Terakhir, kami membuat 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)
}
Buka index.html di browser, klik tombol, berikan izin untuk menerima data lokasi, lihat posisi kita di peta.
Baik. Bergerak.
Transisi animasi antar kota
Misalkan kita memiliki sebuah objek dengan tiga kota (Moskow, St. Petersburg, Yekaterinburg) dan koordinatnya (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"
}
}
Kita perlu menerapkan peralihan yang mulus antara kota-kota ini di peta.
Tambahkan penampung untuk kota ke markup:
<div id="cities"></div>
Menulis ulang 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)
})
Mari kita juga sedikit mengubah 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()
}
Buka index.html. Saat Anda menekan tombol pertama, kami langsung mendapatkan posisi dan nama kota. Saat Anda menekan tombol kedua dan tombol berikutnya, kami dengan lancar berpindah antar kota.
Perpindahan yang mulus antar alamat
Misalkan kita memiliki tiga objek dengan nama dan alamat (db / address.json):
{
" ": " , 2",
" ": " , 46",
"-": " , 97"
}
Kita perlu mengimplementasikan peralihan di antara objek-objek ini di peta. Tapi bagaimana kita bisa melakukan ini tanpa koordinat? Tidak mungkin. Oleh karena itu, kita perlu mendapatkan koordinat ini. Untuk melakukan ini, kami akan menggunakan layanan Nominatim dari OpenStreetMap. Untuk informasi tentang cara membentuk string kueri dengan benar, lihat di sini . Saya akan mendemonstrasikan hanya satu dari kemungkinan opsi.
Jadi, kami membuat wadah untuk alamat di markup:
<div id="addresses"></div>
Menulis ulang 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)
})
Buka index.html. Saat Anda menekan tombol pertama, kami langsung mendapatkan posisi dan nama teater. Saat Anda menekan tombol kedua dan tombol berikutnya, kami dengan lancar berpindah di antara bioskop.
Keren. Semuanya bekerja seperti yang diharapkan.
Dalam hal ini, biarkan aku pergi. Saya harap Anda menemukan sesuatu yang menarik untuk diri Anda sendiri. Terima kasih atas perhatiannya dan semoga harimu menyenangkan.