小册子:如何基于从API获取的JSON创建标记标签

Question

显示要按的点。当单击一个点时，会弹出一个带有文本的菜单。我已经能够设置点，但是当我尝试从数据库中检索数据时，当单击一个点时，它显示不显示标记特定信息。

for (pointer of pointers) {
title.textContent = "No description available.";
if (item.objDescription) {
title.textContent = item.objDescription;
}
div.appendChild(title);
menu.appendChild(div);
}
}

我哪里做错了?我需要的指针只显示自己的文本，而不是每一个文本从数据库。

编辑:

问题标题已更新，以更好地反映所需的解决方案。

Answer 1

响应正常，并且用于迭代响应JSON对象的代码似乎也没问题。

我不知道openobjectMenu的代码是什么，但从我所看到的，你正在创建div，并且已经将它们添加到id为objectMenuBody的元素中(很可能在你的html代码上)。这使得它们从一开始就可见。

我猜你正在使用传单，因为你的代码中有L.marker。

我认为我认为你想做的是添加标签的标记，所以最有可能使用marker.bindPopup("<b>Hello world!</b><br>I am a popup.")是正确的方式去。

这里有一个例子https://leafletjs.com/examples/quick-start/。

所以你写的不是这段代码:

const div = document.createElement("div");
const title = document.createElement("h2");
const lineBreak = document.createElement('br');
const image = document.createElement("img");
image.setAttribute("src", "images/default.png");
image.setAttribute("alt", "Default image");
title.textContent = "No description available.";
if (item.objDescription) {
title.textContent = item.objDescription;
}
div.appendChild(title);
div.appendChild(lineBreak);

你只需要用你应该传递给.bindPopup方法的HTML直接构建一个字符串。

快速的例子:

const pp = `<div><h2>${item.objDescription}</h2><img src="${item.image64}" /></div>`;
const marker = L.marker([item.lat, item.lon]).addTo(map);
marker.bindPopup(pp);