0
283
VistasVincule más ventanas emergentes al mismo marcador o combine el contenido de las ventanas emergentes
Tengo un JSON en el que hay lugares con sus coordenadas y su contenido textual para insertar en la ventana emergente del marcador relativo.
Si en el JSON hay 2 veces el mismo lugar (con las mismas coordenadas), tengo que vincular 2 ventanas emergentes con sus respectivos contenidos en el mismo marcador (o como máximo tengo que actualizar la ventana emergente con el nuevo contenido manteniendo el antiguo una).
<html> <head> <!-- Libraries leaflet/jquery for may project--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script> </head> <body> <div id="map" style="width:100%; height: 100%"></div> <script> // my json data var data = [ { "name" : "Location A", "lat" :"27", "long" : "29", "popupContent" : "content 1" }, { "name" : "Location B", "lat" :"51", "long" : "12", "popupContent" : "content 2" }, { "name" : "Location A", "lat" :"27", "long" : "29", "popupContent" : "content 3" } ] //init leaflet map var map = new L.Map('map'); L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors', maxZoom: 18 }).addTo(map); var italy = new L.LatLng(42.504154,12.646361); map.setView(italy, 6); //iterate my json data and create markers with popups for(let key in data){ L.marker([data[key].lat,data[key].long]).bindPopup(data[key].popupContent).addTo(map) } </script> </body> </html>Con este código, el tercer lugar anula el primero, y tengo un solo marcador y una sola ventana emergente con "contenido 3" escrito.
Me gustaría 2 ventanas emergentes (una con "contenido 1" escrito y otra con "contenido 3") o una sola ventana emergente con los dos contenidos.
1 Respuestas
Responde la pregunta0
La forma más fácil de abordar un caso de uso similar es simplemente usar un complemento de agrupamiento, generalmente Leaflet.markercluster , para que separe sus Marcadores que están en la misma posición o muy cerca (en realidad, su tercer lugar no "anula" el primero, en el sentido de reemplazar, simplemente se sienta encima de él, en el sentido de superposición).
La ventaja añadida es que separa de forma natural los marcadores que están muy cerca uno del otro, pero aún en posiciones ligeramente diferentes, que las heurísticas siguientes no captarán.
var mcg = L.markerClusterGroup(); //iterate my json data and create markers with popups for(let key in data){ L.marker(latLng).addTo(mcg) // Add into the MCG instead of directly to the map. } mcg.addTo(map);Demostración: https://plnkr.co/edit/B0XF5SSpQ27paWt1
Ahora, en su caso, es posible que no desconfíe de los marcadores cercanos, pero realmente tiene datos que se aplican a los mismos lugares (en sus data , el nombre y las coordenadas de los elementos 1 y 3 son idénticos).
En ese caso, una solución podría ser simplemente reelaborar sus datos primero (posiblemente en tiempo de ejecución) para fusionar el contenido emergente de todos los elementos que tienen el mismo nombre y/o coordenadas (dependiendo de cómo pueda identificar exactamente elementos idénticos).
Por ejemplo, usando Lodash groupBy :
var groupedData = _.groupBy(data, "name"); // Depends on how you identify identical items //iterate my json data and create markers with popups for(let key in groupedData){ var items = groupedData[key]; // Coordinates of first item, all items of this group are supposed to be on same place var latLng = [items[0].lat, items[0].long]; // Merge all popup contents var popupContent = items.map(item => item.popupContent).join("<br/>") L.marker(latLng).bindPopup(popupContent).addTo(map) } 
Demostración: https://plnkr.co/edit/D7TzdaBVRvJr2sid