猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

如何通过Leaflet标记删除MySQL数据库中的行？

我尝试更深入地了解 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

            });

    


皈依舞
浏览 107回答 3
3回答

MMTTMM

如果你的'<a&nbsp;href="#"&nbsp;&nbsp;id&nbsp;=&nbsp;"delete"&nbsp;data-value&nbsp;=&nbsp;id&nbsp;>delete</a>'以某种方式结束delete()在某处调用函数并向其传递data-value属性，您可能需要做的就是编写它，以便使用定义时的 ID 的实际值：'<a&nbsp;href="#"&nbsp;&nbsp;id&nbsp;=&nbsp;"delete"&nbsp;data-value&nbsp;=&nbsp;"'&nbsp;+&nbsp;id&nbsp;+&nbsp;"'&nbsp;>delete</a>'
0

ITMISS

这样你就可以在弹出窗口中找到删除功能marker.on('popupopen', function(e) {&nbsp; // your delete function});更新示例let config = {&nbsp; minZoom: 7,&nbsp; maxZomm: 18,};const zoom = 16;const lat = 52.2297700;const lon = 21.0117800;let points = [&nbsp; [52.230020586193795, 21.01083755493164, 'point 1'],&nbsp; [52.22924516170657, 21.011320352554325, 'point 2'],&nbsp; [52.229511304688444, 21.01270973682404, 'point 3'],&nbsp; [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', {&nbsp; attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);// loop that adds many markers to the mapfor (let i = 0; i < points.length; i++) {&nbsp; const lat = points[i][0];&nbsp; const lng = points[i][1];&nbsp; const popupText = `<button data-value="test-${i+1}" class="delete">${points[i][2]}</button>`;&nbsp; marker = new L.marker([lat, lng])&nbsp; &nbsp; .bindPopup(popupText)&nbsp; &nbsp; .addTo(map);&nbsp; marker.on('popupopen', function(e) {&nbsp; &nbsp; const btns = document.querySelectorAll('.delete');&nbsp; &nbsp; btns.forEach(btn => {&nbsp; &nbsp; &nbsp; btn.addEventListener('click', () => {&nbsp; &nbsp; &nbsp; &nbsp; alert(btn.getAttribute('data-value'));&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; })&nbsp; });}* {&nbsp; margin: 0;&nbsp; padding: 0}html {&nbsp; height: 100%}body,html,#map {&nbsp; height: 100%;&nbsp; margin: 0;&nbsp; padding: 0}<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" /><script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script><div id="map"></div>
0

神不在的星期二

最终代码：最后我设法将所有内容拼凑在一起，getUsers()进行一些调整：function getUsers() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.getJSON("getData.php", function (data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (var i = 0; i < data.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var location&nbsp; &nbsp; = new L.LatLng(data[i].lat, data[i].lng);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var id&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; = data[i].id;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var species&nbsp; &nbsp; &nbsp;= data[i].species;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var diameter&nbsp; &nbsp; = data[i].average_diameter;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var quality&nbsp; &nbsp; &nbsp;= data[i].quality;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var damage&nbsp; &nbsp; &nbsp; = data[i].damage;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var notes&nbsp; &nbsp; &nbsp; &nbsp;= data[i].additional_information;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var popupText&nbsp; &nbsp;= `<button data-value= "${data[i].id}" class="delete">Delete</button>`;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var marker&nbsp; &nbsp; &nbsp; = new L.marker([data[i].lat, data[i].lng], {icon: greenIcon}).addTo(map);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; marker.bindPopup("ID:"+ id + "<br>" + "Species: " + species + "<br>" + "Diameter: " + diameter +"cm" + "<br>" +"Quality: " + quality + "<br>" +"Damage: " + damage + "<br>" +"Notes: " + notes + "<br>" + "<br>" + popupText);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; marker.on('popupopen',function(e){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const btns = document.querySelectorAll('.delete');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; btns.forEach(btn => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; btn.addEventListener('click', () => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var id = btn.getAttribute('data-value');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'POST',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: 'delete.php',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {id1:id},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function(data){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert(data);},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: function(data){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert('Something went wrong.');}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }并且还delete.php进行了一些调整：<?php&nbsp; &nbsp;&nbsp; &nbsp; $id= $_POST['id1'];&nbsp; &nbsp; $connect = mysqli_connect("localhost", "root", "", "useraccounts");&nbsp;&nbsp;&nbsp; &nbsp; $sql = "DELETE FROM geomarker WHERE id = ($id)";&nbsp;&nbsp;&nbsp; &nbsp; $result = mysqli_query($connect, $sql);&nbsp;&nbsp;&nbsp; &nbsp; if($result){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo 'Data successfully deleted.';&nbsp; &nbsp; &nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo 'There were erros while deleting the data.';&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;?>&nbsp;&nbsp;感谢您的帮助！
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

PHP
php如何把参数放在Http Request Heade？？？？ 1 回答