【Javascript】canvas上でクリックされた座標のデータ蓄積保存方法について

前提・実現したいこと

【javascript】で作成しています。
canvas内でクリックされた座標の値を、
メモ帳/Excel等何でもよいのでデータベースとして保存していきたいです。

最終的にはそのデータを引き出して、まとめてcanvas上に表示することです。

発生している問題・エラーメッセージ

そもそも駆け出し初心者のため他ファイルへのデータ蓄積方法がわかりません。
初歩的な質問でしたらすみません...

該当のソースコード

javascript
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5	<meta charset=Shift_JIS>
6	<link rel="stylesheet" href="Sample.css">
7	<title>現在地の取得と表示</title>
8  <script type="text/javascript">
9  <!--
10	var i = 0;
11	var cnt;
12	var isDraw=false;
13
14  function init(){
15		/*Canvas描画のテンプレ*/
16		var c = document.getElementById("canvas");
17		   cnt = c.getContext("2d");
18
19  	/*タイマーの初期化と設定*/
20  	window.setInterval("getGeoLocation()",3000);
21
22		/*クリック位置の指定*/
23		c.addEventListener("click",draw,false);
24  }
25
26  function showMap(position) {
27      /*現在地の取得、表示*/
28      var coords = position.coords;
29      var x=coords.longitude;
30      var y=coords.latitude;
31  	    gps.innerHTML= i + " 回目の取得,　経度： " + x + "度,　緯度："+ y +"度";
32
33			/*現在地情報の座標化*/
34			var lx = (x-130.43816002511197)/0.00451095458519*500;
35			var ly = (y-33.69516398003343)/0.000959185543116*500;
36				coo.innerHTML= i + " 回目の取得,　x座標(経)： " + lx + ",　y座標(緯)："+ ly ;
37
38			/*現在地を描く*/
39			cnt.globalCompositeOperation = "source-over";
40      cnt.fillStyle = "rgba(242,143,143,.2)";
41      cnt.fillRect(0, 0, 0, 0);
42      cnt.globalCompositeOperation = "lighter";
43
44			cnt.beginPath();
45					cnt.fillStyle = "rgba(244,117,117,1)";
46					cnt.arc(lx,ly, 3, 0, Math.PI*2.0, true);
47					cnt.closePath();
48					cnt.fill();
49
50  }
51
52	function draw(e){
53			/*クリック位置の取得*/
54			 var tx=e.clientX;
55			 var ty=e.clientY;
56
57			 /*クリック位置を描く*/
58			 cnt.beginPath();
59			 		cnt.fillStyle = "rgba(117,190,244,1)";
60			 		cnt.arc(tx, ty, 3, 0, Math.PI*2.0, true);
61			 		cnt.closePath();
62			 		cnt.fill();
63
64	}
65
66  function handleError(error) {
67      /*取得失敗のアラートを表示する*/
68      alert('位置情報を取得できません。');
69  }
70
71  function getGeoLocation(){
72      if (navigator.geolocation && typeof navigator.geolocation.getCurrentPosition == 'function') {
73          /*位置情報を取得可能な場合*/
74					move.innerHTML="GeoLocation実行中"
75		      i++;
76          navigator.geolocation.getCurrentPosition(showMap,handleError);
77      }
78      else {
79          /*位置情報を取得不可能な場合*/
80					move.innerHTML="GeoLocation実行不可"
81          handleError();
82      }
83  }
84  //-->
85  </script>
86  <style type="text/css">
87     canvas { background-color:#FFF; border: 1px solid #999; }
88   </style>
89</head>
90
91<body　onload="init()">
92  <canvas id="canvas" width="500" height="500"></canvas>
93  <a href="javascript:void(0);" onclick="init();">現在の位置を確認する</a>
94  <div id="move">GeoLocation</div>
95	<div id="gps">現在位置</div>
96	<div id="coo">座標位置</div>
97</body>
98
99</html>
100

行動規範の内容に同意します

回答2件

蓄積はDB上にして必要に応じてAjaxで取り出して表示とかでしょうか。
サーバーサイドの言語を使いたくないのであればIndexedDBというのもあります。

投稿2018/07/11 01:21

m.ts10806

総合スコア80850

ベストアンサー

これはGoogleMapなんですかね？

ざっと見たところ、ですが、何をやりたいかにもよりますが、今のままではデータを蓄積したとしても、蓄積された座標情報から地図上に再描画することは出来ないように思います。

/*クリック位置の取得*/
var tx=e.clientX;
var ty=e.clientY;

これではCanvas内のX,Y座標と取ることになり、見た目、その位置に点は打てますが、地図をスライドしてもその位置は同時にスライドしない、打った地点をDBから復元出来ない、となりそうです。

GooleMapなどの地図描画であれば、地図上をクリックしたイベントでその経度・緯度が取得出来ますので、そのイベント内で取得した経度緯度をAjaxでサーバに送ってあげ、サーバのMySQL等のDBに蓄積する、となります。その後、必要に応じてAjaxで取り出し、点を再描画、となりますね。すみませんが自力で調べましょう。その上でまた詰まったら投稿して下さい。

なお直接ブラウザからローカルWindowsのメモ帳やExcelに溜めるのは、全く違うテクニックになると思います。基本的に、ブラウザから自分のPCのメモ帳やEXCELには書き出し出来ない、と思っていた方がいいですよ。
（出来なくはないんですが・・）

投稿2018/07/11 01:36

編集2018/07/11 01:38