19 - モバイル対応と現在地表示

学習内容: ブラウザの位置情報APIを使用して現在地を地図上に表示します。

ポイント:

注意:

位置情報: 未取得
// 現在地を取得して移動
map.locate({
    setView: true,
    maxZoom: 16
});

// 位置取得成功時
map.on('locationfound', function(e) {
    const radius = e.accuracy / 2;

    L.marker(e.latlng)
        .addTo(map)
        .bindPopup(`現在地（精度: ${radius}m）`);

    L.circle(e.latlng, {
        radius: radius
    }).addTo(map);
});

// 位置取得失敗時
map.on('locationerror', function(e) {
    alert('位置情報を取得できませんでした: ' + e.message);
});