我嘗試更深入地了解 Leaflet + MySQL Connection，但我開始失去概述。我有一個geomarkers包含多個標(biāo)記的數(shù)據(jù)庫，其中存儲了不同的屬性。我想為用戶應(yīng)用一項功能，通過單擊標(biāo)記彈出框中的“刪除”來刪除不感興趣的標(biāo)記。但這里變得復(fù)雜了。如何獲取所選標(biāo)記的單個 id（從數(shù)據(jù)庫）（單擊 PopUp 中的刪除），以及如何將其傳遞給 PHP 命令，以便該點(diǎn)將在數(shù)據(jù)庫中刪除？我使用了該$_Post方法來上傳數(shù)據(jù)，但在這種情況下認(rèn)為行不通。<!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貢獻(xiàn)1869條經(jīng)驗 獲得超4個贊
如果你的
'<a href="#" id = "delete" data-value = id >delete</a>'
以某種方式結(jié)束delete()在某處調(diào)用函數(shù)并向其傳遞data-value屬性，您可能需要做的就是編寫它，以便使用定義時的 ID 的實際值：
'<a href="#" id = "delete" data-value = "' + id + "' >delete</a>'
ITMISS
TA貢獻(xiàn)1871條經(jīng)驗 獲得超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貢獻(xiàn)1963條經(jīng)驗 獲得超6個贊
最終代碼：
最后我設(shè)法將所有內(nèi)容拼湊在一起，getUsers()進(jìn)行一些調(diào)整：
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進(jìn)行了一些調(diào)整：
<?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 關(guān)注
- 145 瀏覽
添加回答
舉報
0/150
提交
取消