質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.33%

  • PHP

    21341questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    17532questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

フォームとjavascriptを用いた地図でのピンの蓄積

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 313

ohayou

score 2

マップを使ったWEBアプリケーション(図鑑のようなもの)をつくりたいと思っています。

フォームから得た緯度経度の値をleafletを用いて地図上にプロットし,それを蓄積できるようにしたいです。
現在プロットはできるのですが,ページ遷移すると投稿したマーカーが全て初期化されてしまい,マーカーが蓄積できません。
これはレイヤーにマーカーが追加できていないということでしょうか?

ページ遷移の流れとしては
1.javascript側で投稿する場所の緯度経度を決める。
2.1で決めた緯度経度をphpのフォームに飛ばす。そして,詳細情報記入。
3.javascript側でphpから送信された緯度経度を基にマーカ-を設置する。
です。

改善方法等あればどなたかご教授お願いいたします。

//地図生成
var map = L.map('map');
L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
  attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
}).addTo(map);
map.setView([○, ○], 12);

//クリック地点の緯度経度取得
map.on('click',function(e){
  var latitude=(Math.round(e.latlng.lat * 10000)) /10000;
  var longitude=(Math.round(e.latlng.lng * 10000)) /10000;

//テキストボックスに緯度経度代入
  document.getElementById('latitude').value=latitude;
  document.getElementById('longitude').value=longitude;

  var idokeido = L.marker(e.latlng, {
    draggable: true,
    title: "Resource location",
    alt: "Resource Location",
    riseOnHover: true,
    iconColor:'green'
  }).addTo(map)
    .bindPopup(e.latlng.toString());
  // Update marker on changing it's position
    idokeido.on("dragend", function (ev) {
    var chagedPos = ev.target.getLatLng();

    this.bindPopup(chagedPos.toString());
   });

});
//phpの変数をjavascriptの変数に変換
var lat = "<?php echo ($_POST['latitude']); ?>";
var lng = "<?php echo ($_POST['longitude']); ?>";

var latlng = [lat, lng];
var cc = "<?php echo ($_POST['comment']); ?>";

var toukou=L.marker(latlng).addTo(map);
toukou.bindPopup('<a href="#"><?php echo ($_POST['comment']); ?></a><br><?php echo ($_POST['image']); ?><br>');
//js-phpの変数設定
<?php
$latitude=$_POST['latitude'];
$longitude=$_POST['longitude'];
?>

<form action = "map.php" method = "post" enctype="multipart/form-data">
     ユーザ名<br>
<?php echo "<input type='text' name='name' value='". $hoji ."'><br />"; ?>
     カテゴリー<br>
        <select name="creature">
        <option value="shokubutu">植物</option>
        <option value="doubutu">動物</option>
        <option value="konchuu">昆虫</option>
        <option value="sakana">魚</option>
        </select><br>
     生物名<br />
        <input type="text" name="comment"><br />
    緯度経度<br>
<?php echo "<input type='text' name='latitude' value='". $latitude . "'<br>"; ?>
<?php echo "<input type='text' name='longitude' value='". $longitude ."'<br>"; ?>
     <br>画像<br>
        <input type="hidden" name="MAX_FILE_SIZE" value="300000">
        <input type="file" name="image"><br />
     パスワード<br>
        <input type="text" name="pass" size="5"><br />
        <input type="submit" name="submit" value="投稿"><br /><br />
</form>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • ohayou

    2018/12/06 19:30

    なるほどありがとうございます。データベースを使ってやってみようと思います。回答ありがとうございました!

    キャンセル

  • mts10806

    2018/12/06 20:07

    先に回答がついたのでコメントで済ませてしまいました。失礼しました。データベース利用の場合もそれはそれで壁にあたりやすいのでそのときはまた質問あげてみてください

    キャンセル

  • ohayou

    2018/12/10 14:51

    お返事遅れてしまって申し訳ございません。かしこまりました。頼りにしてます。

    キャンセル

回答 1

checkベストアンサー

+1

ご提示のソースコードでは、データを保存する部分がないようです。
ご提示されていない部分で保存されている可能性もありますが、保存されているマーカーを地図上にプロットする部分のコードもないようです。

質問者が動作させているコードが見える限りのとおりでしたら、保存と読み込みのコードを書く必要があります。
「マーカーの蓄積」を共有する必要がないのであれば LocalStorage を利用されるといいでしょう。利用の仕方をご存じなければ、まずそれを学習する必要があります。
そうでないなら、サーバに保存する必要がありますので、PHPで処理する必要があるでしょう。データベースの利用についてご存じなければ、それを学習する必要があります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/12/06 19:28

    データベースを使ってみようと思います。丁寧なご回答ありがとうございました。

    キャンセル

同じタグがついた質問を見る

  • PHP

    21341questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    17532questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。