如何使用 leaflet 在 map 中删除或不显示标记？
[英]How to remove or not show marker in map with leaflet?
问题描述
I have a property called Estado, that can have four values: aceite, concluido, recusado, emAvaliacao.
我有一个名为 Estado 的属性，它可以有四个值：aceite、concluido、recusado、emAvaliacao。 For each one of them I have a specific marker.对于它们中的每一个，我都有一个特定的标记。 However, if the Estado= recusado, the marker shouldn't appear on the map.但是，如果 Estado=recusado，则标记不应出现在 map 上。 Here is where is defined which marker should be used:这里定义了应该使用哪个标记：
$.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
I alread tried using:我已经尝试过使用：
map.removeLayer(ignicao)
But this doesn't work, saying that it cant create the item.但这不起作用，说它无法创建项目。
Can somebody help me with this error?有人可以帮我解决这个错误吗？
2 个解决方案
解决方案1
0 2020-07-06 09:49:21
I think you add the icon to the layer, but in the recusado if you don't define the icon.我认为您将图标添加到图层中，但如果您未定义图标，则在recusado中。
Exlude the creation of the icon ignicao when the property is recusado .当属性为recusado时排除图标ignicao的创建。
And you can call else if directly:你可以直接调用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
I need to add the code:我需要添加代码：
if (item.estado == recusado) {
map.removeLayer(marker)
}
after the marker is appended.附加标记后。 Like this:像这样：
$.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
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何在传单地图上添加和删除标记簇？ - How to add and remove marker clusters on a leaflet map?
如何使用 leaflet 从 map 中删除标记？ - How can I remove the marker from the map with leaflet?
如何使用 Leaflet 从 map 中删除标记？ - How can I remove a marker from map with Leaflet?
如何在Leaflet中删除标记分组？ - How to remove marker grouping in Leaflet?
如何在传单地图中仅添加一个标记 - How to add only one marker in leaflet map
如何在传单地图中设置标记图标？ - How to set marker icon in leaflet map?
在传单中，如何将标记设置到地图上的固定位置？ - In leaflet, how to set a marker to a fixed position on map?
如何按传单上的类型删除特定标记？ - How to remove specific marker by type on leaflet?
如何通过 Leaflet.MarkerClusterGroup 中的 ID 删除标记 - How to REMOVE a marker by ID in Leaflet.MarkerClusterGroup
传单-如何自动删除以前的标记 - Leaflet - how to remove previous marker automatically
相关标签