差分

このページの2つのバージョン間の差分を表示します。

--- leaflet:geolocation [2018/10/06 10:42] – 管理者
+++ leaflet:geolocation [2018/10/06 13:00] (現在) – [Leaflet 現在位置を中心にする] 管理者
@@ 行 1: / 行 1: @@
+====== 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>
+<script src="https://www.achiachi.net/blog/_outside/leaflet/v1/leaflet.js"></script>
+<script>
+  function currentPos(){
+    //エラー処理
+    if (navigator.geolocation === false) {
+      alert("位置情報を取得できません。ブラウザが対応していません。");
+    }
+    //位置情報取得オプション(高精度(true/false)/タイムアウト(ms)/有効期限(ms))
+    //enableHighAccuracyをtrueにするとGPSから取得できる。しかし取得時間が長くなるのとバッテリー消費に注意が必要
+    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://www.achiachi.net/blog/_outside/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://c.tile.openstreetmap.org/{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>
+</html>
+----
+===== ソースコード =====
+HTML部分
+<code HTML>
+<!-- 現在位置に移動するボタン -->
+<p><button onClick="currentPos()">現在地に移動</button></p>
+<div id="mapid" style="width: 100%; height: 400px;"></div>
+</code>
+JavaScript部分
+<code 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>
+</code>
+----
+===== 説明 =====
+マップの基本部分は[[map]]をご覧ください、ここでは変更部分のみ説明します。
+HTML部分にプログラムを実行するためのボタンを設置します。
+<code HTML>
+<p><button onClick="currentPos()">現在地に移動</button></p>
+</code>
+位置情報の取得は、HTML5から実装されたgeolocation APIを使います。
+geolocation APIはGPSやIPアドレス・公衆無線LAN・携帯基地局などの情報から位置情報を取得します。
+処理の流れは、(1)で未対応ブラウザを排除し、(2)～(4)で動作設定をした後に、(5)の位置情報取得のコマンドを実行、成功すればコールバックで(3)を実行し失敗すれば(4)を実行します。
+<code javascript>
+  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);
+  }
+</code>
+**geolocationAPIのオプション**
+<code javascript>
+var options = {
+  enableHighAccuracy: false,
+  timeout: 5000,
+  maximumAge: 0
+};
+</code>
+ * **enableHighAccuracy**
+   * 高精度(GPS)で取得するか？、高精度で取得する場合はtrue、使用しない場合はfalseを指定します。高精度モードはGPSを使用するた位置の取得に時間がかかるのと電池消費が激しいので注意して下さい。端末に高精度モードが存在しない場合はtrue・falseどちらも同じ結果を返します
+ * **timeout**
+   * タイムアウト時間、ミリ秒で指定します。高精度モードを使用する場合は長めに指定して下さい。
+ * **maximumAge**
+   * 位置情報の有効期限、ミリ秒で指定します。0を指定すると最新の情報を取得します。数値を指定すると指定時間内に取得した情報を再利用します(未確認：GPSの連続使用による電池の消耗を抑えれると推測？)