如何使用 leaflet 在 map 中刪除或不顯示標記？
[英]How to remove or not show marker in map with leaflet?
問題描述
我有一個名為 Estado 的屬性，它可以有四個值：aceite、concluido、recusado、emAvaliacao。 對於它們中的每一個，我都有一個特定的標記。 但是，如果 Estado=recusado，則標記不應出現在 map 上。 這里定義了應該使用哪個標記：
$.each(data, function (i, item) {
//identificação do tipo de marcador que deve aparecer de acordo com o estado da ignição
var ignicao;
if (item.estado == aceite) {
ignicao = L.icon({
iconUrl: '/icons/aceite.png',
iconSize: [35, 35], // size of the icon
});
}
else {
if (item.estado == emAvaliacao) {
ignicao = L.icon({
iconUrl: '/icons/emAvaliacao.png',
iconSize: [35, 35], // size of the icon
});
}
else {
if (item.estado == concluido) {
ignicao = L.icon({
iconUrl: '/icons/concluido.png',
iconSize: [35, 35], // size of the icon
});
}
else {
if (item.estado == recusado) {
map.removeLayer(item)
}
}
}
}
//colocar um marcador no mapa de acordo com a latitude e longitude fornecidas
var marker = new L.marker([item.latitude, item.longitude], { icon: ignicao })
.on('click', function onClick(e) {
var id = item.id;
//assim que um marcador for clicado é mostrado o popup das ignições
modal.style.display = "block";
//indicação do marcador que foi clicado
clickedmarker = e.target;
console.log(clickedmarker);
//vai buscar toda a informação correspondente ao id fornecido
getData(id, clickedmarker);
//Actividade dos botões presentes no popup das ignições
$(document).on('click', '#aceite', function () {
//se o estado for aceite, o botão respetivo estará desativado
if (item.estado == aceite) {
document.getElementById("aceite").disabled = true;
document.getElementById("recusado").disabled = false;
document.getElementById("concluido").disabled = false;
}
//se for clicado passará ao icon correspondente
else {
clickedmarker.setIcon(accepted);
//fecha o modal das avaliação da ignição
modal.style.display = "none";
//atualiza a base de dados com o novo estado
atualizaBD(id, Estado.aceite, item.latitude, item.longitude);
}
});
$(document).on('click', '#concluido', function () {
//se o estado for concluido, o botão respetivo estará desativado
if (item.estado == concluido) {
document.getElementById("concluido").disabled = true;
document.getElementById("aceite").disabled = false;
document.getElementById("recusado").disabled = false;
}
//se for clicado passará ao icon correspondente
else {
clickedmarker.setIcon(conclued);
//fecha o modal das avaliação da ignição
modal.style.display = "none";
//atualiza a base de dados com o novo estado
atualizaBD(id, Estado.concluido, item.latitude, item.longitude);
}
});
$(document).on('click', '#recusado', function () {
//se o estado for recusado, o marcador será removido do mapa
//clickedmarker.removeFrom(map);
//map.removeLayer(clickedmarker)
clickedmarker = null;
modal.style.display = "none";
//atualiza a base de dados com o novo estado
atualizaBD(id, Estado.recusado, item.latitude, item.longitude);
});
}).addTo(map);
//adiciona marador ao mapa
$('#json map').append(marker);
});// fim each
我已經嘗試過使用：
map.removeLayer(ignicao)
但這不起作用，說它無法創建項目。
有人可以幫我解決這個錯誤嗎？
2 個解決方案
解決方案1
0 2020-07-06 09:49:21
我認為您將圖標添加到圖層中，但如果您未定義圖標，則在recusado中。
當屬性為recusado時排除圖標ignicao的創建。
你可以直接調用else if ：
if (item.estado == aceite) {
ignicao = L.icon({
iconUrl: '/icons/aceite.png',
iconSize: [35, 35], // size of the icon
});
} else if (item.estado == emAvaliacao) {
ignicao = L.icon({
iconUrl: '/icons/emAvaliacao.png',
iconSize: [35, 35], // size of the icon
});
} else if (item.estado == concluido) {
ignicao = L.icon({
iconUrl: '/icons/concluido.png',
iconSize: [35, 35], // size of the icon
});
} else if (item.estado == recusado) {
map.removeLayer(item)
}
解決方案2
0 2020-07-06 11:01:43
我需要添加代碼：
if (item.estado == recusado) {
map.removeLayer(marker)
}
附加標記后。 像這樣：
$.each(data, function (i, item) {
//identificação do tipo de marcador que deve aparecer de acordo com o estado da ignição
var ignicao;
if (item.estado == aceite) {
ignicao = L.icon({
iconUrl: '/icons/aceite.png',
iconSize: [35, 35], // size of the icon
});
}
else {
if (item.estado == emAvaliacao) {
ignicao = L.icon({
iconUrl: '/icons/emAvaliacao.png',
iconSize: [35, 35], // size of the icon
});
}
else {
if (item.estado == concluido) {
ignicao = L.icon({
iconUrl: '/icons/concluido.png',
iconSize: [35, 35], // size of the icon
});
}
else {
if (item.estado == recusado) {
ignicao = L.icon({
iconUrl: '/icons/default.png',
iconSize: [35, 35], // size of the icon
});
}
}
}
}
//colocar um marcador no mapa de acordo com a latitude e longitude fornecidas
var marker = new L.marker([item.latitude, item.longitude], { icon: ignicao })
.on('click', function onClick(e) {
var id = item.id;
//assim que um marcador for clicado é mostrado o popup das ignições
modal.style.display = "block";
//indicação do marcador que foi clicado
clickedmarker = e.target;
console.log(clickedmarker);
//vai buscar toda a informação correspondente ao id fornecido
getData(id, clickedmarker);
//Actividade dos botões presentes no popup das ignições
$(document).on('click', '#aceite', function () {
//se o estado for aceite, o botão respetivo estará desativado
if (item.estado == aceite) {
document.getElementById("aceite").disabled = true;
document.getElementById("recusado").disabled = false;
document.getElementById("concluido").disabled = false;
}
//se for clicado passará ao icon correspondente
else {
clickedmarker.setIcon(accepted);
//fecha o modal das avaliação da ignição
modal.style.display = "none";
//atualiza a base de dados com o novo estado
atualizaBD(id, Estado.aceite, item.latitude, item.longitude);
}
});
$(document).on('click', '#concluido', function () {
//se o estado for concluido, o botão respetivo estará desativado
if (item.estado == concluido) {
document.getElementById("concluido").disabled = true;
document.getElementById("aceite").disabled = false;
document.getElementById("recusado").disabled = false;
}
//se for clicado passará ao icon correspondente
else {
clickedmarker.setIcon(conclued);
//fecha o modal das avaliação da ignição
modal.style.display = "none";
//atualiza a base de dados com o novo estado
atualizaBD(id, Estado.concluido, item.latitude, item.longitude);
}
});
$(document).on('click', '#recusado', function () {
//se o estado for recusado, o marcador será removido do mapa
//clickedmarker.removeFrom(map);
//map.removeLayer(clickedmarker)
map.removeLayer(marker)
clickedmarker = null;
modal.style.display = "none";
//atualiza a base de dados com o novo estado
atualizaBD(id, Estado.recusado, item.latitude, item.longitude);
});
}).addTo(map);
//adiciona marador ao mapa
$('#json map').append(marker);
if (item.estado == recusado) {
map.removeLayer(marker)
}
});// fim each
如何通過 Leaflet.MarkerClusterGroup 中的 ID 刪除標記
[英]How to REMOVE a marker by ID in Leaflet.MarkerClusterGroup
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.