外部ライブラリneko.jsを使います
var GPS_DATA; function myGps(pos) { var myIdo = pos.coords.latitude; var myKeido = pos.coords.longitude; GPS_DATA = [myIdo, myKeido]; dataSave(); //console.log(GPS_DATA); } ///----ここからデータセーブのライブラリ var myData = localStorage;//”localstorage”というのは変えてはいけない function dataSave() { var myDate = new Date().toLocaleString(); //var myPos = GPS_DATA.toString(); //myData.setItem(myDate, myPos); myData.setItem(myDate, JSON.stringify(GPS_DATA));//日付にJSON形式に変換したGPS座標を入力 //console.log(GPS_DATA); showData(); } function showData(){ var result = ""; for(var i=0; i <5; i++){//5個表示 var k = myData.key(i); result += k + " , " + JSON.parse(myData.getItem(k)) + "<br />"; } // var k = myData.key(i); //上のループで作成されたテキストを表示する document.getElementById("myReturn").innerHTML = result; //console.log(result); } function erase() { myData.clear(); } ////ここまで
これを使うhtmlです
<!DOCTYPE html> <html> <head> <title>nekoライブラリ</title> <meta charset="UTF-8"> <script src="./neko.js"></script> </head> <body> <div id="myReturn"></div> <input type="button" value="この場所を記録する" onclick="gpsget()"> <input type="button" value="これまでの結果5件表示" onclick="showData()"> <input type="button" value="データ消去" onclick="erase()"> <script type="text/javascript"> //---GPSはここから function gpsget(){ if(window.confirm('GPSを記録しますか?')){ if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(myGps);//GPS取得用 } }else{ window.alert('キャンセルされました'); // 警告ダイアログを表示 } } </script> </body> </html>