phpの入力フォームを使い、Leafletで表示している地図にマーカーと地点の説明をポップアップで表示したい

実現したいこと

phpの入力フォームで入力したものをcsvファイルに入れて、そのscvファイルに入っている位置情報や地点説明をマーカーで表示したい

$mapdataの出力結果

L.marker([38.24862452,140.3277254]).addTo(map).bindPopup('<h2>山形駅</h2><p>作成者あきかん</p><p>aaa

</p>') </p>')のみ改行されています。若干変えたのですが、こんな感じになります。 #### 追記原因が、csvファイルの最後に,が付いていないことでした。そのつけ方がわかりません。　　　　　　　　　　 ```csv pm,38.24862452,140.3277254,題名,説明　←ここに入力フォームで入力完了した時点で,をつけたい


### ホーム画面
```php
<?php

$filename = 'f-2.csv';

$data = file($filename);

$mapdata = '';

foreach ($data as $line){
  // 配列
    //カンマで分割
     $data = explode(',',$line);
    //改行コード置換
    $popdata = str_replace( "\r\n", "", $data[4]);
    //Map表示用
    $mapdata = $mapdata ."L.marker([" .$data[1] ."," .$data[2] ."]).addTo(map).bindPopup(" ."'<h2>" . $data[3]  ."</h2><p>作成者" . $data[0]  ."</p><p>" . $popdata ."</p>'" .")\n";

}

?>
<!DOCTYPE html>
<html>
  <head>
    <title>テストページ</title>
  	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<link href="https://fonts.googleapis.com/css?family=Amatic+SC:700 rel="stylesheet">
  	     <link rel="stylesheet" href="css/haikei.css" />
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="">
     <link rel="stylesheet" href="css/Control.OSMGeocoder.css" />
    <script src="js/Control.OSMGeocoder.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">    
    <script src="js/bootstrap.min.js"></script>
    <script src="js/leaflet-search.min.js"></script>
   <link rel="stylesheet" href="css/Leaflet.Coordinates-0.1.5.css" />
    <script src="js/Leaflet.Coordinates-0.1.5.min.js"></script>

    <style type="text/css">
     <!--
      #mapid { height: 450px; width: 100%}
    -->
    </style>
  </head>
  <body>
  <br>
<h3><a href="https://r4.quicca.com/~sairen78/f-1/input.php">入力フォームはこちらから</a></h3>
 <div id="mapid"></div>
 <script src="./js/maps.js"></script><br>
<script>
<?php print $mapdata; ?>
</script>
  </body>
</html>

入力フォーム

php
1<!DOCTYPE html>
2<head>
3    <title>入力ページ</title>
4  	<meta charset="utf-8">
5  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="">
7    <link rel="stylesheet" href="./css/leaflet.css　"/>
8    <link rel="stylesheet" href="./css/L.Control.Sidebar.css" />
9    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
10    <script src="./js/L.Control.Sidebar.js"></script>
11    <style type="text/css">
12     <!--
13      #mapid { height: 400px; width: 100%}
14    -->
15    </style>
16</head>
17<body>
18<h1>test</h1>
19<p>必要事項を入力して『確認する』ボタンをクリックしてください</p>
20<p>地図をクリックすると緯度経度を調べることができます。<br>
21コピーアンドペースト等で入力フォームに入れてください</p>
22<form method="post" action="input_check.php">
23<table border="1px">
24<tr><td>ニックネーム<br>(全ての人が見れるので本名はさけてください)</td><td><input type="text" name="name"</td></tr>
25<tr><td>緯度を入力</td><td><input type="text" maxlength='11' name="lat"></td></tr>
26<tr><td>経度を入力</td><td><input type="text" maxlength='11' name="lug"></td></tr>
27<tr><td>場所の名前を!(題名)</td><td><input type="text" name="daimei"></td></tr>
28<tr><td>場所の説明</td>
29<td><textarea name="message" rows="5" cols="100"></textarea></td></tr>
30<tr><td colspan="2"><input type="submit" value="確認"></td><tr>
31<div id="map" style="height: 400px; width: 400px;"></div>
32 <script>
33    map.on('click', function(e) {
34    //クリック位置経緯度取得
35    lat = e.latlng.lat;
36    lng = e.latlng.lng;
37    //経緯度表示
38    alert("lat: " + lat + ", lng: " + lng);
39} );
40</script>
41 <script src="./js/map.js"></script>
42</body>
43</html>

確認フォーム

php
1<?php
2//フォームデータが空の場合は終了
3if(empty($_POST) )
4{
5echo '入力されておりません。';
6echo '<a href="input.php">入力フォームへ戻る</a>';
7exit();
8}
9
10?>
11<!DOCTYPE html>
12<head>
13<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
14<title>入力チェック</title>
15</head>
16<body>
17
18
19<p>内容を確認してください。</p>
20
21<?php
22//入力値の取得とチェック
23$name = htmlspecialchars($_POST['name'], ENT_QUOTES, 'UTF-8');
24if(empty($name))
25{
26echo 'お名前を入力してください';
27echo '<a href="input.php">入力フォームへ戻る</a>';
28exit();
29}
30$lat = htmlspecialchars($_POST['lat'], ENT_QUOTES, 'UTF-8');
31if(empty($lat))
32{
33echo '緯度を入力してください!半角でお願いします!';
34echo '<a href="input.php">入力フォームへ戻る</a>';
35exit();
36}
37$lug = htmlspecialchars($_POST['lug'], ENT_QUOTES, 'UTF-8');
38if(empty($lug))
39{
40echo '経度を入力してください!半角でお願いします!';
41echo '<a href="input.php">入力フォームへ戻る</a>';
42exit();
43}
44$daimei = htmlspecialchars($_POST['daimei'], ENT_QUOTES, 'UTF-8');
45if(empty($daimei))
46{
47echo '題名を入力してください!';
48echo '<a href="input.php">入力フォームへ戻る</a>';
49exit();
50}
51
52if(empty($_POST['message']))
53{
54echo '説明を書いてください!';
55echo '<a href="input.php">入力フォームへ戻る</a>';
56exit();
57}
58else
59{
60$message = $_POST['message'];
61}
62
63
64?>
65
66<form method="post" action="input_done.php">
67<table border="1px">
68<tr><td>お名前</td><td><?php echo $name; ?></td></tr>
69<tr><td>緯度</td><td><?php echo $lat; ?></td></tr>
70<tr><td>経度</td><td><?php echo $lug; ?></td></tr>
71<tr><td>題名</td><td><?php echo $daimei; ?></td></tr>
72<tr><td>場所の説明</td><td><?php echo nl2br($message); ?></td></tr>
73<tr><td colspan="2"><input type='button' onclick="history.back()" value="戻る">　<input type="submit" value="送信">　</td></tr>
74
75<input type="hidden" name="name" value="<?php echo $name; ?>" >
76<input type="hidden" name="lat" value="<?php echo $lat; ?>" >
77<input type="hidden" name="lug" value="<?php echo $lug; ?>" >
78<input type="hidden" name="daimei" value="<?php echo $daimei; ?>" >
79<input type="hidden" name="message" value="<?php echo $message; ?>" >
80
81
82</table>
83</form>
84</body>
85</html>

ご回答やご指摘いただいた点は修正しました。ありがとうございます。
ご教授お願いします

m.ts10806

2020/02/12 11:56

そもそもforeachで回したい配列いきなり上書きしてますが、この実装はまずいのでは。

m.ts10806

2020/02/12 11:58

それに、改行コードを置換したらしき結果の$popdataがどこにも使われてないような。

akican1219

2020/02/12 11:59

すみません、初めて使ってるので、どのようにすれば良いかご教授お願いします。

akican1219

2020/02/12 12:01

$popdataは、どこにも使ってないですが、この問題が解決したら使うかも知れなかったのでそのままにしていました。

m.ts10806

2020/02/12 12:07

>初めて使ってるので、どのようにすれば良いかご教授お願いします。 PHPが初めてということでしょうか。単に変数名変えればよいだけでは？ >$popdataは、どこにも使ってないですが、この問題が解決したら使うかも知れなかったのでそのままにしていました。でも「改行が出ているところ」って$data[4]ですよね。むしろ使わないことが問題になってるのでは。いずれにしても改行以前に ('山形駅''スタバができた ') ではJavaScriptのエラーです。引数なら[,]で区切らないと。

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

回答1件

ベストアンサー

既に指摘されていますが、,が出力されないのでそこでエラーになっていることと、変数を上書きしているのでそれが間違っています。

PHP
1$mapdata = ''; // foreachの前に追加

PHP
1// $mapdata = $mapdata ."L.marker([" .$data[1] ."," .$data[2] ."]).addTo(map).bindPopup(" ."'" . $data[3]  ."'" ."" ."'" . $data[4]  ."'" .")\n";
2//          ↓     bindPopupの後にも問題あり⇒                                                                     ↓
3   $mapdata .= $mapdata ."L.marker([" .$data[1] ."," .$data[2] ."]).addTo(map).bindPopup(" ."'" . $data[3]  ."','" . $data[4]  ."'" .")\n";

投稿2020/02/12 16:14

kei344

総合スコア69407

akican1219

2020/02/12 16:41

ご教授ありがとうございます。教えていただいた通りに編集を行ったのですが、改行される問題が変わりませんでした。ですが、csvファイルのデータの最後に,をつけてみたら直りましたが、1回1回データ入力するたびにデータの最後に,をつけなくてはならなく、なんとかならないかな、と思い探しているところです。別件にはなりますが、わかればご教授お願いします。

kei344

2020/02/12 16:54

改行については$data[4]じゃなく$popdataを使えばよいのでは。

akican1219

2020/02/13 11:44

$popdataに変えたのですが、変わりません...

kei344

2020/02/13 13:42

print $mapdata;の出力されたHTML（ブラウザで「ページのソースを表示」）を質問文に追記してみてください。

akican1219

2020/02/13 15:59

追記しました。よろしくお願いします

kei344

2020/02/13 16:27

こうしてみてください。 $popdata = str_replace( "\r\n", "", $data[4]); $popdata = str_replace( "\r", "", $popdata ); $popdata = str_replace( "\n", "", $popdata );

akican1219

2020/02/13 22:55

できました!ありがとうございます

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