我尝试更深入地了解 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: © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: © <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>'
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: '© <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/leaflet@1.6.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<div id="map"></div>
神不在的星期二
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.';
}
?>
感谢您的帮助！
- 3 回答
- 0 关注
- 105 浏览
添加回答
举报
0/150
提交
取消