Leaflet 現在位置を中心にする

GPSなどから取得した位置情報を使い、地図の中心位置に表示します。

注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」

デモ

下記の「現在地に移動」ボタンをクリックするとPCやスマートフォンのGPS・公衆無線LAN・携帯電話基地局・IPアドレスなどから位置情報を取得し地図の中心に表示します。

ブラウザの仕様上位置情報を取得する際にプライバシー保護の観点からユーザーに同意画面が表示されます。
- サーバー側で位置情報の収集はしていません。
- 初回設定後の同意変更はブラウザの設定画面などから行います。
低精度モードで位置情報を取得しているため誤差が大きいです。
HTML5非対応のブラウザでは位置情報を取得できません。
位置情報が取得できない場合はエラーが表示されます。

ソースコード

HTML部分

<!-- 現在位置に移動するボタン -->
<p><button onClick="currentPos()">現在地に移動</button></p>
 
<div id="mapid" style="width: 100%; height: 400px;"></div>

JavaScript部分

<script src="https://【自分のサーバーアドレスとパス】/leaflet/v1/leaflet.js"></script>
<script>
 
<code javascript>
  function currentPos(){
 
    //APIに対応していないブラウザを排除
    if (navigator.geolocation === false) {
      alert("位置情報を取得できません。ブラウザが対応していません。");
    }
 
    //位置情報取得オプションを設定(後述)
    var options = {
      enableHighAccuracy: false,
      timeout: 5000,
      maximumAge: 0
    };
 
    //取得成功時の動作設定
    function success(pos) {
        var lat=pos.coords.latitude; //緯度
        var lon=pos.coords.longitude; //経度
        mymap.setView([ lat,lon ]); //地図を移動
    }
 
    //取得失敗時(タイムアウトなど)の動作設定
    function error(err) {
      alert("位置情報を取得できませんでした。デバイスに位置情報を取得できる装置が無い、または取得に時間がかかっている、またはデバイスやブラウザ設定でブロックされています");
    }
 
    //コマンドを実行
    navigator.geolocation.getCurrentPosition(success, error, options);
  }
 
  function cssLoad(cssFile){
    if(document.all){
      document.createStyleSheet(cssFile);
    }else{
      var link = document.createElement("link");
      link.rel = "stylesheet";
      link.href = cssFile;
      link.type = "text/css"
      document.getElementsByTagName('head')[0].appendChild(link);
    }
  }
  cssLoad("https://【自分のサーバーアドレスとパス】/leaflet/v1/leaflet.css");
  function addOnload(evtFunc){
    if(window.addEventListener) {
      window.addEventListener('load', evtFunc, false);
    } else if(window.attachEvent){ //IE用
      window.attachEvent('onload', evtFunc);
    } else {
      //alert('window.onload エラー');
    }
  }  
  var mymap;
  addOnload(function(){
    mymap = L.map('mapid');
      L.tileLayer('https://【タイルサーバーのアドレスとパス】/{z}/{x}/{y}.png', {
      maxZoom: 18,
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors, '
    }).addTo(mymap);
    L.control.scale({imperial:false}).addTo(mymap);
    mymap.setView([35.6896, 139.6918], 8);
  });
</script>

説明

マップの基本部分はLeaflet - OpenStreetMap表示をご覧ください、ここでは変更部分のみ説明します。

HTML部分にプログラムを実行するためのボタンを設置します。

<p><button onClick="currentPos()">現在地に移動</button></p>

位置情報の取得は、HTML5から実装されたgeolocation APIを使います。

geolocation APIはGPSやIPアドレス・公衆無線LAN・携帯基地局などの情報から位置情報を取得します。

処理の流れは、(1)で未対応ブラウザを排除し、(2)～(4)で動作設定をした後に、(5)の位置情報取得のコマンドを実行、成功すればコールバックで(3)を実行し失敗すれば(4)を実行します。

  function currentPos(){
 
    //(1)APIに対応していないブラウザを排除
    if (navigator.geolocation === false) {
      alert("位置情報を取得できません。ブラウザが対応していません。");
    }
 
    //(2)位置情報取得オプションを設定(後述)
    var options = {
      enableHighAccuracy: false,
      timeout: 5000,
      maximumAge: 0
    };
 
    //(3)取得成功時の動作設定
    function success(pos) {
        var lat=pos.coords.latitude; //緯度
        var lon=pos.coords.longitude; //経度
        mymap.setView([ lat,lon ]); //地図を移動
    }
 
    //(4)取得失敗時(タイムアウトなど)の動作設定
    function error(err) {
      alert("位置情報を取得できませんでした。デバイスに位置情報を取得できる装置が無い、または取得に時間がかかっている、またはデバイスやブラウザ設定でブロックされています");
    }
 
    //(5)コマンドを実行
    navigator.geolocation.getCurrentPosition(success, error, options);
  }

geolocationAPIのオプション

var options = {
  enableHighAccuracy: false,
  timeout: 5000,
  maximumAge: 0
};

* enableHighAccuracy

高精度(GPS)で取得するか？、高精度で取得する場合はtrue、使用しない場合はfalseを指定します。高精度モードはGPSを使用するた位置の取得に時間がかかるのと電池消費が激しいので注意して下さい。端末に高精度モードが存在しない場合はtrue・falseどちらも同じ結果を返します

* timeout

タイムアウト時間、ミリ秒で指定します。高精度モードを使用する場合は長めに指定して下さい。

* maximumAge

位置情報の有効期限、ミリ秒で指定します。0を指定すると最新の情報を取得します。数値を指定すると指定時間内に取得した情報を再利用します(未確認：GPSの連続使用による電池の消耗を抑えれると推測？)

あちあち情報局

目次

Leaflet 現在位置を中心にする

デモ

ソースコード

説明