teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問phpの入力フォームを使い、Leafletで表示している地図にマーカーと地点の説明をポップアップで表示したい

編集履歴

質問編集履歴

7

消す

2020/02/13 22:54

投稿

akican1219
akican1219

スコア6

title CHANGED
File without changes
body CHANGED
@@ -205,59 +205,6 @@
205
205
  </html>
206
206
  ```
207
207
 
208
- ### csvに出力する
209
- ```php
210
- <?php
211
208
 
212
- if(isset($_POST)==false )
213
- {
214
- echo '入力されておりません。';
215
- echo '<a href="input.php">入力フォームへ戻る</a>';
216
- exit();
217
- }
218
- ?>
219
- <!DOCTYPE html>
220
- <head>
221
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
222
- <title>入力完了!</title>
223
- </head>
224
- <body>
225
- <a href= "https://r4.quicca.com/~sairen78/f-1/f1.php" >地図に戻る</a>
226
-
227
- <?php
228
-
229
- $name = htmlspecialchars($_POST['name'], ENT_QUOTES,'UTF-8');
230
- $lat = htmlspecialchars($_POST['lat'], ENT_QUOTES,'UTF-8');
231
- $lug = htmlspecialchars($_POST['lug'], ENT_QUOTES, 'UTF-8');
232
- $daimei = htmlspecialchars($_POST['daimei'], ENT_QUOTES, 'UTF-8');
233
- $message = htmlspecialchars($_POST['message'], ENT_QUOTES,'UTF-8');
234
-
235
- $line = array($name, $lat, $lug, $daimei, $message, );
236
- //CSVファイルへの書き込み
237
- $file_name = "f-1.csv";
238
- $fp = fopen($file_name, 'a');
239
-
240
-
241
-
242
- $result = fputcsv($fp, $line);
243
- fclose($fp);
244
-
245
- if($result)
246
- {
247
- $result_message = "入力ありがとうございました!";
248
- }
249
- else
250
- {
251
- $result_message = "エラーが発生しました。";
252
- }
253
- echo '<hr/>';
254
- echo '<p>'.$result_message.'</p>';
255
- echo '<hr/>';
256
-
257
- ?>
258
- </body>
259
- </html>
260
- ```
261
-
262
209
  ご回答やご指摘いただいた点は修正しました。ありがとうございます。
263
210
  ご教授お願いします

6

追記

2020/02/13 22:54

投稿

akican1219
akican1219

スコア6

title CHANGED
File without changes
body CHANGED
@@ -1,7 +1,6 @@
1
1
  ### 実現したいこと
2
2
  phpの入力フォームで入力したものをcsvファイルに入れて、そのscvファイルに入っている位置情報や地点説明をマーカーで表示したい
3
- ### 現在起きている問題
3
+ ### $mapdataの出力結果
4
- 入力した内容が
5
4
  L.marker([38.24862452,140.3277254]).addTo(map).bindPopup('<h2>山形駅</h2><p>作成者あきかん</p><p>aaa
6
5
  </p>')
7
6
  </p>')のみ改行されています。

5

追記

2020/02/13 15:59

投稿

akican1219
akican1219

スコア6

title CHANGED
File without changes
body CHANGED
@@ -2,9 +2,10 @@
2
2
  phpの入力フォームで入力したものをcsvファイルに入れて、そのscvファイルに入っている位置情報や地点説明をマーカーで表示したい
3
3
  ### 現在起きている問題
4
4
  入力した内容が
5
- L.marker([38.24862452035,140.32772541046]).addTo(map).bindPopup('山形駅''スタバができた
5
+ L.marker([38.24862452,140.3277254]).addTo(map).bindPopup('<h2>山形駅</h2><p>作成者あきかん</p><p>aaa
6
- ')
6
+ </p>')
7
- 上記のように、勝手に')のみ改行されてマーカーが表示されません。
7
+ </p>')のみ改行されています。
8
+ 若干変えたのですが、こんな感じになります。
8
9
  #### 追記
9
10
  原因が、csvファイルの最後に,が付いていないことでした。
10
11
  そのつけ方がわかりません。 　　　　　　　　　　
@@ -17,7 +18,7 @@
17
18
  ```php
18
19
  <?php
19
20
 
20
- $filename = 'f-1.csv';
21
+ $filename = 'f-2.csv';
21
22
 
22
23
  $data = file($filename);
23
24
 
@@ -30,9 +31,8 @@
30
31
  //改行コード置換
31
32
  $popdata = str_replace( "\r\n", "", $data[4]);
32
33
  //Map表示用
33
- $mapdata .= $mapdata ."L.marker([" .$data[1] ."," .$data[2] ."]).addTo(map).bindPopup(" ."'" . $data[3] ."','" . $data[4] ."'" .")\n";
34
+ $mapdata = $mapdata ."L.marker([" .$data[1] ."," .$data[2] ."]).addTo(map).bindPopup(" ."'<h2>" . $data[3] ."</h2><p>作成者" . $data[0] ."</p><p>" . $popdata ."</p>'" .")\n";
34
35
 
35
-
36
36
  }
37
37
 
38
38
  ?>
@@ -42,29 +42,29 @@
42
42
  <title>テストページ</title>
43
43
  <meta charset="utf-8">
44
44
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
45
-
45
+ <link href="https://fonts.googleapis.com/css?family=Amatic+SC:700 rel="stylesheet">
46
+ <link rel="stylesheet" href="css/haikei.css" />
47
+ <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
46
48
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="">
49
+ <link rel="stylesheet" href="css/Control.OSMGeocoder.css" />
50
+ <script src="js/Control.OSMGeocoder.js"></script>
47
- <link href="css/bootstrap.min.css" rel="stylesheet">
51
+ <link href="css/bootstrap.min.css" rel="stylesheet">
48
- <link rel="stylesheet" href="./css/leaflet.css　"/>
49
- <link rel="stylesheet" href="./css/L.Control.Sidebar.css" />
50
- <link rel="stylesheet" href="css/leaflet-search.min.css">
51
-
52
- <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
53
- <script src="./js/L.Control.Sidebar.js"></script>
54
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
55
52
  <script src="js/bootstrap.min.js"></script>
56
53
  <script src="js/leaflet-search.min.js"></script>
54
+ <link rel="stylesheet" href="css/Leaflet.Coordinates-0.1.5.css" />
57
- <title>入力チェック</title>
55
+ <script src="js/Leaflet.Coordinates-0.1.5.min.js"></script>
56
+
58
57
  <style type="text/css">
59
58
  <!--
60
- #mapid { height: 400px; width: 100%}
59
+ #mapid { height: 450px; width: 100%}
61
60
  -->
62
61
  </style>
63
62
  </head>
64
63
  <body>
64
+ <br>
65
- <a href="https://r4.quicca.com/~sairen78/f-1/input.php">入力フォームはこちらから</a>
65
+ <h3><a href="https://r4.quicca.com/~sairen78/f-1/input.php">入力フォームはこちらから</a></h3>
66
- <div id="map" style="height: 450px; width: 100%;"></div>
66
+ <div id="mapid"></div>
67
- <script src="./js/map.js"></script>
67
+ <script src="./js/maps.js"></script><br>
68
68
  <script>
69
69
  <?php print $mapdata; ?>
70
70
  </script>

4

別の問題が発生

2020/02/13 15:58

投稿

akican1219
akican1219

スコア6

title CHANGED
File without changes
body CHANGED
@@ -1,6 +1,5 @@
1
1
  ### 実現したいこと
2
2
  phpの入力フォームで入力したものをcsvファイルに入れて、そのscvファイルに入っている位置情報や地点説明をマーカーで表示したい
3
- [作っているサイトです](https://r4.quicca.com/~sairen78/f-1/f1.php)
4
3
  ### 現在起きている問題
5
4
  入力した内容が
6
5
  L.marker([38.24862452035,140.32772541046]).addTo(map).bindPopup('山形駅''スタバができた

3

csv追記

2020/02/13 15:46

投稿

akican1219
akican1219

スコア6

title CHANGED
File without changes
body CHANGED
@@ -10,7 +10,7 @@
10
10
  原因が、csvファイルの最後に,が付いていないことでした。
11
11
  そのつけ方がわかりません。 　　　　　　　　　　
12
12
  ```csv
13
- 8,38.24862452,140.3277254,題名,a　←ここに入力フォームで入力完了した時点で,をつけたい
13
+ pm,38.24862452,140.3277254,題名,説明　←ここに入力フォームで入力完了した時点で,をつけたい
14
14
 
15
15
  ```　　　
16
16
 
@@ -262,4 +262,4 @@
262
262
  ```
263
263
 
264
264
  ご回答やご指摘いただいた点は修正しました。ありがとうございます。
265
- ご教授お願いします。
265
+ ご教授お願いします

2

csv追記

2020/02/12 16:52

投稿

akican1219
akican1219

スコア6

title CHANGED
File without changes
body CHANGED
@@ -9,8 +9,11 @@
9
9
  #### 追記
10
10
  原因が、csvファイルの最後に,が付いていないことでした。
11
11
  そのつけ方がわかりません。 　　　　　　　　　　
12
- 　　　　　　　　　　
12
+ ```csv
13
13
  8,38.24862452,140.3277254,題名,a　←ここに入力フォームで入力完了した時点で,をつけたい
14
+
15
+ ```　　　
16
+
14
17
  ### ホーム画面
15
18
  ```php
16
19
  <?php

1

別の問題が発生

2020/02/12 16:50

投稿

akican1219
akican1219

スコア6

title CHANGED
File without changes
body CHANGED
@@ -6,16 +6,21 @@
6
6
  L.marker([38.24862452035,140.32772541046]).addTo(map).bindPopup('山形駅''スタバができた
7
7
  ')
8
8
  上記のように、勝手に')のみ改行されてマーカーが表示されません。
9
+ #### 追記
10
+ 原因が、csvファイルの最後に,が付いていないことでした。
11
+ そのつけ方がわかりません。 　　　　　　　　　　
12
+ 　　　　　　　　　　
13
+ 8,38.24862452,140.3277254,題名,a　←ここに入力フォームで入力完了した時点で,をつけたい
9
14
  ### ホーム画面
10
15
  ```php
11
16
  <?php
12
17
 
13
- // SJISのCSVファイル
14
- $filename = '.csv';
18
+ $filename = 'f-1.csv';
15
19
 
16
20
  $data = file($filename);
17
21
 
18
- // UTF-8のCSVデータを1行ずつ処理する
22
+ $mapdata = '';
23
+
19
24
  foreach ($data as $line){
20
25
  // 配列
21
26
  //カンマで分割
@@ -23,8 +28,9 @@
23
28
  //改行コード置換
24
29
  $popdata = str_replace( "\r\n", "", $data[4]);
25
30
  //Map表示用
26
- $mapdata = $mapdata ."L.marker([" .$data[1] ."," .$data[2] ."]).addTo(map).bindPopup(" ."'" . $data[3] ."'" ."" ."'" . $data[4] ."'" .")\n";
31
+ $mapdata .= $mapdata ."L.marker([" .$data[1] ."," .$data[2] ."]).addTo(map).bindPopup(" ."'" . $data[3] ."','" . $data[4] ."'" .")\n";
27
32
 
33
+
28
34
  }
29
35
 
30
36
  ?>
@@ -34,11 +40,19 @@
34
40
  <title>テストページ</title>
35
41
  <meta charset="utf-8">
36
42
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
43
+
37
44
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="">
45
+ <link href="css/bootstrap.min.css" rel="stylesheet">
38
46
  <link rel="stylesheet" href="./css/leaflet.css　"/>
39
47
  <link rel="stylesheet" href="./css/L.Control.Sidebar.css" />
48
+ <link rel="stylesheet" href="css/leaflet-search.min.css">
49
+
40
50
  <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
41
51
  <script src="./js/L.Control.Sidebar.js"></script>
52
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
53
+ <script src="js/bootstrap.min.js"></script>
54
+ <script src="js/leaflet-search.min.js"></script>
55
+ <title>入力チェック</title>
42
56
  <style type="text/css">
43
57
  <!--
44
58
  #mapid { height: 400px; width: 100%}
@@ -47,7 +61,7 @@
47
61
  </head>
48
62
  <body>
49
63
  <a href="https://r4.quicca.com/~sairen78/f-1/input.php">入力フォームはこちらから</a>
50
- <div id="map" style="height: 600px; width: 100%;"></div>
64
+ <div id="map" style="height: 450px; width: 100%;"></div>
51
65
  <script src="./js/map.js"></script>
52
66
  <script>
53
67
  <?php print $mapdata; ?>
@@ -189,4 +203,60 @@
189
203
  </body>
190
204
  </html>
191
205
  ```
206
+
207
+ ### csvに出力する
208
+ ```php
209
+ <?php
210
+
211
+ if(isset($_POST)==false )
212
+ {
213
+ echo '入力されておりません。';
214
+ echo '<a href="input.php">入力フォームへ戻る</a>';
215
+ exit();
216
+ }
217
+ ?>
218
+ <!DOCTYPE html>
219
+ <head>
220
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
221
+ <title>入力完了!</title>
222
+ </head>
223
+ <body>
224
+ <a href= "https://r4.quicca.com/~sairen78/f-1/f1.php" >地図に戻る</a>
225
+
226
+ <?php
227
+
228
+ $name = htmlspecialchars($_POST['name'], ENT_QUOTES,'UTF-8');
229
+ $lat = htmlspecialchars($_POST['lat'], ENT_QUOTES,'UTF-8');
230
+ $lug = htmlspecialchars($_POST['lug'], ENT_QUOTES, 'UTF-8');
231
+ $daimei = htmlspecialchars($_POST['daimei'], ENT_QUOTES, 'UTF-8');
232
+ $message = htmlspecialchars($_POST['message'], ENT_QUOTES,'UTF-8');
233
+
234
+ $line = array($name, $lat, $lug, $daimei, $message, );
235
+ //CSVファイルへの書き込み
236
+ $file_name = "f-1.csv";
237
+ $fp = fopen($file_name, 'a');
238
+
239
+
240
+
241
+ $result = fputcsv($fp, $line);
242
+ fclose($fp);
243
+
244
+ if($result)
245
+ {
246
+ $result_message = "入力ありがとうございました!";
247
+ }
248
+ else
249
+ {
250
+ $result_message = "エラーが発生しました。";
251
+ }
252
+ echo '<hr/>';
253
+ echo '<p>'.$result_message.'</p>';
254
+ echo '<hr/>';
255
+
256
+ ?>
257
+ </body>
258
+ </html>
259
+ ```
260
+
261
+ ご回答やご指摘いただいた点は修正しました。ありがとうございます。
192
262
  ご教授お願いします。