目次

Leaflet 現在位置を中心にする

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

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

デモ

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

ソースコード

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

* timeout

* maximumAge