モバイルの Leaflet
この例では、iPhone、iPad、Android などのモバイルデバイス用に調整されたフルスクリーンマップを作成する方法と、現在のユーザーの位置を簡単に検出して使用する方法を学習します
| この例をスタンドアロンで見る |
ページの準備
まず、HTML とページの CSS コードを見てみましょう。マップ div 要素をすべての利用可能なスペース（フルスクリーン）に広げるには、次の CSS コードを使用できます（注: この例では、高さのパーセンテージを使用しています。vh がより優れていると主張できますが、モバイル上で Google Chrome のバグが原因）。
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
width: 100vw;
}
また、モバイルブラウザにページの不要な拡大を無効にして、head セクションまたは HTML ページに次の行を配置して実際のサイズに設定する必要があります。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
マップの初期化
これで、クイックスタートガイドで行ったように JavaScript コードでマップを初期化し、全世界を表示します。
var map = L.map('map').fitWorld();
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);地理情報
Leaflet には、マップビューを検出された位置にズームする非常に便利なショートカットがあります。コード内の通常の setView メソッドの代わりに、setView オプションを備えた locate メソッドです。
map.locate({setView: true, maxZoom: 16});
ここでは、マップビューを自動的に設定するときの最大ズームとして 16 を指定します。ユーザーが自分の位置を共有することに同意し、それがブラウザによって検出されるとすぐに、マップはそれにビューを設定します。これで、フルスクリーンモバイルマップが動作するようになります。ただし、地理情報の特定が完了した後に何かを行う必要がある場合はどうでしょうか。locationfound イベントと locationerror イベントはそのためにあります。たとえば、locateAndSetView の呼び出しの前に locationfound イベントにイベントリスナーを追加することで、検出された場所にマーカーを追加し、ポップアップで精度を表示してみましょう。
function onLocationFound(e) {
var radius = e.accuracy;
L.marker(e.latlng).addTo(map)
.bindPopup("You are within " + radius + " meters from this point").openPopup();
L.circle(e.latlng, radius).addTo(map);
}
map.on('locationfound', onLocationFound);
素晴らしい！しかし、地理情報の特定が失敗した場合にエラーメッセージを表示することもできます。
function onLocationError(e) {
alert(e.message);
}
map.on('locationerror', onLocationError);
setView オプションが true に設定されており、地理情報の特定が失敗した場合、ビューは全世界に設定されます。
これでこの例は完了です。携帯電話で試してみてください。完成した例を表示 →