Newer
Older
Loremap / otanisys / maruike_gps.js
@otani otani on 4 Sep 2018 4 KB add timer
var gpsmarker = L.marker(marumap.getCenter()).addTo(marumap);
gpsmarker.bindPopup("startで補足開始").openPopup();

var maxTrial = 0           //GPSの取得回数 →そんなものはなか\った
var watchId = null;// 最初はnullにしておく
var all = document.getElementById('all')
var array_latLing = []; //配列を作成
var array_name = [];
var array_desc = [];
var array_vie = [];
var array_layer = [];
    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_name.push(name)
		array_desc.push(desc);
		array_vie.push(viewer);
		array_layer.push(layer)
		let popup = "<h3>" + name + "</h3>";
		layer.bindPopup(popup);	
	    }
        }
    });

var gjl = omnivore.geojson("maruike_debug.geojson", null, maruike);

    gjl.addTo(marumap);
    L.control.layers(null, {"maruike": gjl}).addTo(marumap);

function start() {
	if (tag.value == '') {
	    alert('名前を埋めて')
	}else {
	    all.textContent = "5秒後に取得開始"
	    setTimeout(tryWatchGPS, 5000);
	}
}

function tryWatchGPS() { //start button 押すとGPS取得開始\
    all.textContent = "GPS取得開始";
    if (watchId) {
	watchId = null;
    }    
    watchId = navigator.geolocation.watchPosition(
	onSuccess, onError, {
	    maximumAge: 0, timeout: 2000, enableHighAccuracy: true
	});
    
}
 
///// チート用
function cheat() {
    all.textContent = "GPS取得完了";
    tryWatchGPSstop();	
     latlng = L.latLng([38.8933,139.8192]);
    marumap.panTo(latlng);
    gpsmarker.setPopupContent(
	"ここは "+latlng+"です.(チート)"
    ).openPopup().setLatLng(latlng);
    dist()    
  }
document.getElementById('cheat').addEventListener('click', cheat);
 

function onSuccess(pos) {
    all.textContent = "GPS取得完了";
    latlng = L.latLng([pos.coords.latitude, pos.coords.longitude]);
    marumap.panTo(latlng);
    gpsmarker.setPopupContent(
	"ここは "+latlng+"です."
    ).openPopup().setLatLng(latlng);
    dist();//距離計算
}

function onError(err) {
    all.textContent = "GPS取得失敗";    
    restN =(++maxTrial)+"回目目試行します。";
    gpsmarker.setPopupContent("捕捉失敗:"+restN).openPopup();
    //setTimeout(tryWatchGPS,5000);
}
 
function tryWatchGPSstop() { //stop button押すとGPS取得やめるよ
    navigator.geolocation.clearWatch(watchId);
    all.textContent = "GPS取得終了";    
    gpsmarker.setPopupContent("取得を止めました").openPopup();
}

/////距離計算とpopup
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 array_idokedo = new L.latLng(array_latLing[keido] , array_latLing[ido]);	
	keido = keido + 2;
	ido = ido + 2;
	//var latlng = L.latLng([38.8933,139.8192]);//距離計算デバック用latlng
	var dist3 = array_idokedo.distanceTo(latlng); //距離計算
	if (dist3 <= distance){
	    array_layer[i].setPopupContent("<h3>" + array_name[i] + "</h3>" + "<p>" +array_desc[i] + "</p>"  ).openPopup();
	}
    }
    all.textContent = "5秒後に取得開始";
    setTimeout(tryWatchGPS, 5000); 
 }
document.getElementById('dist').addEventListener('click', dist);
 
///ここまで
 
 
//ajax的cgiの処理 一回封印する
function dbAccess() {
//cgiからデータ受け取りのやつを書く
    function respond(){
	array_layer[0].setPopupContent("cgiからデータきたよ。書いてないけどね").openPopup();

    }
    function submit() {		// 「AJAX送信」ボタンを押したときの処
	var val = document.forms[0].elements['tag'];
	var tag = document.getElementById('tag');
	// 後で変える CGIに送るデータや送り先
	if (val) {
	    var conn = new XMLHttpRequest();
	    conn.open('POST', './maruike.cgi');

	    conn.setRequestHeader(		// 送信ヘッダを定義
		'Content-Type', 'application/x-www-form-urlencoded');
	    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);