Newer
Older
Loremap / otanisys / maruike_gps.js
@otani otani on 3 Sep 2018 5 KB cgi
// 例: 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);