亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何通過Leaflet標記刪除MySQL數據庫中的行?

如何通過Leaflet標記刪除MySQL數據庫中的行?

PHP
皈依舞 2023-08-06 10:46:43
我嘗試更深入地了解 Leaflet + MySQL Connection,但我開始失去概述。我有一個geomarkers包含多個標記的數據庫,其中存儲了不同的屬性。我想為用戶應用一項功能,通過單擊標記彈出框中的“刪除”來刪除不感興趣的標記。但這里變得復雜了。如何獲取所選標記的單個 id(從數據庫)(單擊 PopUp 中的刪除),以及如何將其傳遞給 PHP 命令,以便該點將在數據庫中刪除?我使用了該$_Post方法來上傳數據,但在這種情況下認為行不通。<!DOCTYPE html><html><head>    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"/>    <link rel="stylesheet" href="http://leaflet.github.io/Leaflet.draw/leaflet.draw.css"/>    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Norican"></head><body>    <div id="map" >        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>        <!--<script type="text/javascript" src="assets/bootstrap/js/bootstrap.min.js"></script>-->        <script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>        <script src="http://leaflet.github.io/Leaflet.draw/leaflet.draw.js"></script>        <script>            $(document).ready(function() {            getUsers();            });            var map = L.map('map').setView([47.000,-120.554],13);            mapLink =            '<a href="http://openstreetmap.org">OpenStreetMap</a>';            L.tileLayer(            'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {            attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)',            maxZoom: 18,            }).addTo(map);                var greenIcon = L.icon({            iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-green.png',            iconSize:     [30, 38], // size of the icon            });    
查看完整描述

3 回答

?
MMTTMM

TA貢獻1869條經驗 獲得超4個贊

如果你的

'<a href="#"  id = "delete" data-value = id >delete</a>'

以某種方式結束delete()在某處調用函數并向其傳遞data-value屬性,您可能需要做的就是編寫它,以便使用定義時的 ID 的實際值:

'<a href="#"  id = "delete" data-value = "' + id + "' >delete</a>'


查看完整回答
反對 回復 2023-08-06
?
ITMISS

TA貢獻1871條經驗 獲得超8個贊

這樣你就可以在彈出窗口中找到刪除功能


marker.on('popupopen', function(e) {

  // your delete function

});

更新示例

let config = {

  minZoom: 7,

  maxZomm: 18,

};

const zoom = 16;

const lat = 52.2297700;

const lon = 21.0117800;


let points = [

  [52.230020586193795, 21.01083755493164, 'point 1'],

  [52.22924516170657, 21.011320352554325, 'point 2'],

  [52.229511304688444, 21.01270973682404, 'point 3'],

  [52.23040500771883, 21.012146472930908, 'point 4']

];


const map = L.map('map', config).setView([lat, lon], zoom);


L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'

}).addTo(map);


// loop that adds many markers to the map

for (let i = 0; i < points.length; i++) {

  const lat = points[i][0];

  const lng = points[i][1];

  const popupText = `<button data-value="test-${i+1}" class="delete">${points[i][2]}</button>`;


  marker = new L.marker([lat, lng])

    .bindPopup(popupText)

    .addTo(map);


  marker.on('popupopen', function(e) {


    const btns = document.querySelectorAll('.delete');

    btns.forEach(btn => {

      btn.addEventListener('click', () => {

        alert(btn.getAttribute('data-value'));

      })

    })


  });


}

* {

  margin: 0;

  padding: 0

}


html {

  height: 100%

}


body,

html,

#map {

  height: 100%;

  margin: 0;

  padding: 0

}

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />


<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>


<div id="map"></div>


查看完整回答
反對 回復 2023-08-06
?
神不在的星期二

TA貢獻1963條經驗 獲得超6個贊

最終代碼:


最后我設法將所有內容拼湊在一起,getUsers()進行一些調整:


function getUsers() {

                $.getJSON("getData.php", function (data) {

                for (var i = 0; i < data.length; i++) {

                var location    = new L.LatLng(data[i].lat, data[i].lng);

                var id          = data[i].id;

                var species     = data[i].species;

                var diameter    = data[i].average_diameter;

                var quality     = data[i].quality;

                var damage      = data[i].damage;

                var notes       = data[i].additional_information;


                var popupText   = `<button data-value= "${data[i].id}" class="delete">Delete</button>`;

                

                var marker      = new L.marker([data[i].lat, data[i].lng], {icon: greenIcon}).addTo(map);

                                    marker.bindPopup("ID:"+ id + "<br>" + "Species: " + species + "<br>" + "Diameter: " + diameter +"cm" + "<br>" +"Quality: " + quality + "<br>" +"Damage: " + damage + "<br>" +"Notes: " + notes + "<br>" + "<br>" + popupText);

                                    

                            

                                marker.on('popupopen',function(e){

                                    

                                        const btns = document.querySelectorAll('.delete');

                                            btns.forEach(btn => {

                                            btn.addEventListener('click', () => {

                                            

                                            var id = btn.getAttribute('data-value');

                                            

                                                $.ajax({

                                                    type: 'POST',

                                                    url: 'delete.php',

                                                    data: {id1:id},

                                                    success: function(data){

                                                        alert(data);},

                                                    error: function(data){

                                                        alert('Something went wrong.');}

                        

                        

                                                });

                                            

                                            })

                                            });


                                        

                                    

                                    

                                });                 

                }

                


                })

            }

并且還delete.php進行了一些調整:


<?php   


    $id= $_POST['id1'];


    $connect = mysqli_connect("localhost", "root", "", "useraccounts");  

    $sql = "DELETE FROM geomarker WHERE id = ($id)";  

    $result = mysqli_query($connect, $sql);  

    if($result){

            echo 'Data successfully deleted.';

        }else{

            echo 'There were erros while deleting the data.';

        }

    

?>  

感謝您的幫助!


查看完整回答
反對 回復 2023-08-06
  • 3 回答
  • 0 關注
  • 147 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號