良い一日、友達！
この小さなチュートリアルでは、3つの簡単なタスクを一緒に完了します。
- Geolocation APIとLeaflet.jsを使用して、ユーザーの現在の場所を特定し、それを地図上に表示します
- 都市間のアニメーション遷移を実装します
- オブジェクトの名前とその座標を事前に取得して、アドレス間の切り替えを実装します
プロジェクトコードは こちらです。
ここのコードで遊ぶことができます：
ユーザーの現在の場所を特定する
Geolocation APIを使用すると、ユーザーはWebアプリケーションに位置データを提供できます。アプリケーションは、Geolocation.getCurrentPosition（）メソッドを使用してこのデータを要求します 。このメソッドは、1つの必須パラメーターと2つのオプションパラメーターを取ります。successは、アクセス許可が付与されたときにPositionオブジェクトを受け取るコールバック関数、errorは、アクセスが拒否されたときにPositionErrorオブジェクトを受け取るコールバック関数、optionsは設定オブジェクトです。コードでは次のようになります。
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
}
マップ上にユーザーの場所を表示する
マップとしてLeaflet.jsを使用します 。このサービスは、Google MapsおよびOpenStreetMapの代替であり、機能的には劣りますが、インターフェイスのシンプルさに魅力を感じます。スタイルとマップスクリプトを接続するマークアップを作成します。
<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>
最小限のスタイル（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;
}
次の内容でmap.jsモジュールを作成します。
//
//
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()
}
最後に、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)
}
ブラウザでindex.htmlを開き、ボタンをクリックして、位置データを受信する権限を付与します。地図上での位置を確認してください。
結構です。先に進みます。
都市間のアニメーション遷移
3つの都市（モスクワ、サンクトペテルブルク、イェカテリンブルク）とそれらの座標（db / citys.json）を持つオブジェクトがあるとします。
{
"Moscow": {
"lat": "55.7522200",
"lon": "37.6155600"
},
"Saint-Petersburg": {
"lat": "59.9386300",
"lon": "30.3141300"
},
"Ekaterinburg": {
"lat": "56.8519000",
"lon": "60.6122000"
}
}
マップ上のこれらの都市間のスムーズな切り替えを実装する必要があります。
都市のコンテナをマークアップに追加します。
<div id="cities"></div>
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)
})
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()
}
index.htmlを開きます。最初のボタンを押すと、すぐに都市の位置と名前が表示されます。2番目以降のボタンを押すと、都市間をスムーズに移動します。
アドレス間のスムーズな切り替え
名前とアドレス（db /addresses.json）を持つ3つのオブジェクトがあるとします。
{
" ": " , 2",
" ": " , 46",
"-": " , 97"
}
マップ上のこれらのオブジェクト間の切り替えを実装する必要があります。しかし、どうすれば座標なしでこれを行うことができますか？ありえない。したがって、どういうわけかこれらの座標を取得する必要があります。これを行うには、OpenStreetMapのNominatimサービスを使用し ます。クエリ文字列を正しく形成する方法については、こちらを参照して ください。可能なオプションの1つだけを示します。
したがって、マークアップ内のアドレスのコンテナを作成します。
<div id="addresses"></div>
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)
})
index.htmlを開きます。最初のボタンを押すと、すぐに劇場の位置と名前が表示されます。2つ目以降のボタンを押すと、劇場間をスムーズに移動します。
涼しい。すべてが期待どおりに機能します。
これで、私は私の休暇を取りましょう。何か面白いものを見つけていただければ幸いです。ご清聴ありがとうございました。良い一日を。