Newer
Older
2024-C1232021_kanata / map.js
// 地図の初期化
        const map = L.map('map').setView([38.9122, 139.8360], 13);

        // 国土地理院の地図タイルレイヤーを追加
        L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
            attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>',
            maxZoom: 18,
            minZoom: 5
        }).addTo(map);

        // 地図をクリックしてマーカーと情報ウィンドウを追加
        map.on('click', (e) => {
            const { lat, lng } = e.latlng;
            addMarker(lat, lng);
        });

        // マーカーとコメント入力ウィンドウを追加
        function addMarker(lat, lng) {
            // マーカーの作成
            const marker = L.marker([lat, lng]).addTo(map);

            // ポップアップ(情報ウィンドウ)を作成
            const popupContent = `
                <div class="info-window">
                    <p>活動日記を入力してください:</p>
                    <textarea id="comment" rows="3" style="width:100%;"></textarea>
                    <button onclick="saveComment('${lat}', '${lng}')">保存</button>
                </div>
            `;
            marker.bindPopup(popupContent).openPopup();
        }

        // コメントを保存し、右側の履歴に追加
        function saveComment(lat, lng) {
            const comment = document.getElementById("comment").value;
            const timestamp = new Date().toLocaleString(); // 現在日時を取得

            // コメント履歴に追加するHTML要素を作成
            const commentEntry = `
                <div class="history-entry">
                    <p><strong>日時:</strong> ${timestamp}</p>
                    <p><strong>場所:</strong> 緯度 ${lat}, 経度 ${lng}</p>
                    <p><strong>活動日記:</strong> ${comment}</p>
                </div>
            `;
            document.getElementById("comments-list").innerHTML += commentEntry;

           
        }