A los usuarios se les muestran puntos para presionar. Al hacer clic en un punto, aparece un menú con texto. Pude establecer puntos, pero cuando trato de recuperar datos de mi base de datos al hacer clic en un punto, muestra que no muestra la información específica del marcador.
for (pointer of pointers) { title.textContent = "No description available."; if (item.objDescription) { title.textContent = item.objDescription; } div.appendChild(title); menu.appendChild(div); } }¿Qué hice mal? Necesito que los punteros solo muestren su propio texto y no todos los textos de la base de datos.
EDITAR :
El título del problema se actualizó para reflejar mejor la solución deseada.
La respuesta está bien, y su código para iterar en el objeto JSON de respuesta también parece estar bien.
No sé cuál es el código para openobjectMenu , pero por lo que puedo ver, está creando los divs y ya los está agregando dentro de un elemento con id objectMenuBody (muy probablemente en su código html). Esto hace que sean visibles desde el principio.
Supongo que está usando Leaflet debido al L.marker en su código.
Creo que lo que quieres hacer es agregar etiquetas a los marcadores, por lo que lo más probable es que usar el marker.bindPopup("<b>Hello world!</b><br>I am a popup.") es la forma correcta de Vamos.
Tienes un ejemplo aquí https://leafletjs.com/examples/quick-start/ .
Entonces, en lugar de este código, escribiste:
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); Simplemente construiría directamente una cadena con el HTML que debería pasar al método .bindPopup .
Ejemplo rápido:
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);