// 例: getCurrentPosition() var gpsmarker = L.marker(marumap.getCenter()).addTo(marumap); gpsmarker.bindPopup("startで補足開始").openPopup(); //var marumarker = L.marker([139.819,38.893]).addTo(marumap);//丸池(仮) var marumarker = L.marker([38.893, 139.819]).addTo(marumap);//丸池(仮) marumarker.bindPopup("丸池").openPopup(); var maxTrial = 0 //GPSの取得回数 →そんなものはなか\った var watchId = null;// 最初はnullにしておく var array_latLing = []; //配列を作成 var array_desc = []; var array_vie = []; var maruike = L.geoJson(null, { onEachFeature: function(f,layer) { let p = f.properties; let geo = f.geometry; if (p) { let name = p.name, desc = p.description , viewer = p.viewer; let lati= geo.coordinates ; array_latLing.push(lati[1]);//末尾に入れる array_latLing.push(lati[0]); array_desc.push(desc); array_vie.push(viewer); let popup = "<h3>" + name + "</h3>" + "<p>" + (desc||"") + "</p>"+"<h3>" + viewer + "</h3>"+"<h3>" + lati + "</h3>"; layer.bindPopup(popup); } } }); // geojson外部ファイルの読み込みは次の行 var gjl = omnivore.geojson("maruike_debug.geojson", null, maruike); // ↑引数は順に: ファイル, 解析オプション, カスタムレイヤ //gjl.on("ready", function() { // 'ready'ここでオブジェクトが中心になるように表示させる // marumap.fitBounds(gjl.getBounds()); // 読み取り失敗時は x3'error' イベント //}); gjl.addTo(marumap); L.control.layers(null, {"maruike": gjl}).addTo(marumap); function start() { if (tag.value == '') { alert('名前を埋めて') //return; }else { tryWatchGPS() } } function tryWatchGPS() { //start button 押すとGPS取得開始\ if (watchId) { watchId = null; } watchId = navigator.geolocation.watchPosition( onSuccess, onError, { //取得okならonSuccessに noならonErrorに maximumAge: 0, timeout: 2000, enableHighAccuracy: true }); // alert("Start!"); } //maximumAge 0ならキャッシュを利用せず必ずGPSを取得する //アラート(スタート)を押したら2000ミリ杪間取得する //enableHighAccuracyは高制度GPS取得をする。デフォルトはfalse ///// チート用 function cheat() { push_button = "cheat" ; coords = L.latLng([38.8933,139.8192]); tryWatchGPSstop(); onSuccess() } document.getElementById('cheat').addEventListener('click', cheat); function onSuccess(pos) { // if (push_button === "cheat"){ tryWatchGPSstop() latlng = L.latLng([38.8933,139.8192]); marumap.panTo(latlng); gpsmarker.setPopupContent( "ここは "+latlng+"です.(チート)" ).openPopup().setLatLng(latlng); // dist(); // } /// ここまでチート用 // latlng = L.latLng([pos.coords.latitude, pos.coords.longitude]); // latlng = L.latLng([coords.lat, coords.lng]); //デバック用につくった marumap.panTo(latlng); gpsmarker.setPopupContent( "ここは "+latlng+"です." ).openPopup().setLatLng(latlng); dist();//距離計算 tryWatchGPS();//GPS取得をroop } function onError(err) { restN =(++maxTrial)+"回目目試行します。"; gpsmarker.setPopupContent("捕捉失敗:"+restN).openPopup(); } function tryWatchGPSstop() { //stop button押すとGPS取得やめるよ navigator.geolocation.clearWatch(watchId); gpsmarker.setPopupContent("取得を止めました").openPopup(); } /////距離計算(仮)とポップアップ(遊び) var maruike = 0 function dist() { var distance = 300 //単位はm var ido = 1 var keido = 0 for(var i = 0; i <= array_desc.length - 1; ++i){ var center = new L.latLng(array_latLing[keido] , array_latLing[ido]); keido = keido + 2; ido = ido + 2; //var center = new L.latLng(array_latLing[i] , array_latLing[++i]); //alert(center) var latlng = L.latLng([38.8933,139.8192]);//距離計算デバック用latlng var hoge = center.distanceTo(latlng); //距離計算 if (hoge <= distance){ marumarker.setPopupContent(array_desc[i]).openPopup(); //ここのmarumarkerをgeoJsonから作成したmarkerの座標にする.and 属性によって表示内容を変える } } } document.getElementById('dist').addEventListener('click', dist); ///ここまで //ajax的cgiの処理 一回封印する function dbAccess() { //cgiからデータ受け取りのやつを書く function respond(){ marumarker.setPopupContent("cgiからデータきたよ。書いてないけどね").openPopup(); if (this.readyState == 4) { // 4のときデータ受信完了 //alert(this.responseText) //console.log(responseText) //var resp = JSON.parse(this.responseText); // 受信文字列取得(JSON) //var resp = JSON(this.responseText); // 受信文字列取得(JSON) alert("uwaaaaaaaaaa") } } function submit() { // 「AJAX送信」ボタンを押したときの処 // var val = document.forms[0].elements['val2']; var tag = document.getElementById('tag'); // 後で変える CGIに送るデータや送り先 if (tag) { var conn = new XMLHttpRequest(); conn.open('POST', './maruike.cgi'); // POSTメソッドでCGIへ送る cgiファイルは実行権を与えること conn.setRequestHeader( // 送信ヘッダを定義 'Content-Type', 'application/x-www-form-urlencoded'); // 送信データは 変数1=値1&変数2=値2... で送るが、 // 値の部分に&などが入ってもよいよう encodeURIComponent() する alert(tag.value) conn.send('tag='+encodeURIComponent(tag.value)); conn.onreadystatechange = respond; // イベントリスナ登録 } } document.getElementById('db').addEventListener('click', submit); } document.addEventListener('DOMContentLoaded', dbAccess) document.getElementById('send').addEventListener('click', start); document.getElementById('stop').addEventListener('click', tryWatchGPSstop);