1

Resulta que para agregar marcadores a este mapa se utiliza: L.marker(["+latitud+","+longitud+"]).addTo(map).bindPopup('"+titulo+"');

entonces si escribo manualmente esta linea varias veces en el javascript cambiando yo mismo los valores, si aparecen varios marcadores en el mapa.

pero sucede que al momento de querer automatizarlo para que vaya agregando marcadores solo he logrado que o remplace el mismo marcador, o que el primer marcador lo marca pero al agregar mas valores no aparece ningun marcador

se les ocurre alguna solucion o alternativa?

Aqui el codigo JavaScript:

    var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    osmAttrib = '&copy; <a href="http://adamix.net">Amadis Suarez</a> contributors',
    osm = L.tileLayer(osmUrl, {maxZoom: 20, attribution: osmAttrib});
var map = L.map('divMap').setView([19,-71.2132746], 7).addLayer(osm);

var latitud = localStorage.getItem("Latitud");
var longitud = localStorage.getItem("Longitud");
var titulo = localStorage.getItem("Titulo");

var cont = localStorage.getItem("contador");

document.write("<script>");
for (i = 0; i < cont; i++) {
    document.write(localStorage.getItem("Marcador"));
}
document.write("</script>");

Aqui el codigo html:

<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
</head>
<body>
    <h1 class="titulo-mapa">Mapa</h1>

    <div class="container d-flex justify-content-center">
         <div id="divMap" class="map map-home" style="margin:12px 0 12px 0;width:650px;height:450px;"></div>

    </div>
<script src="js\mapa.js"></script>

</body>
</html>

Gracias de antemano!

1 respuesta 1

0

Aqui tengo una alternativa para añadir varios marcadores a un mapa. Dentro del código se explica la solución.

<h1 class="titulo-mapa">Mapa</h1>
<div class="container d-flex justify-content-center">
     <div id="divMap" class="map map-home" style="margin:12px 0 12px 0;width:650px;height:450px;"></div>

</div>
<script>
    var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        osmAttrib = '&copy; <a href="http://adamix.net">Amadis Suarez</a> contributors',
        osm = L.tileLayer(osmUrl, {maxZoom: 20, attribution: osmAttrib});
    var map = L.map('divMap').setView([19,-71.2132746], 7).addLayer(osm);

    
    // -----solución-------
    // creamos un arreglo que contenga los puntos geográficos deseados
    datos = [
        { 'latitud': 19.01, 'longitud': -71.21 },
        { 'latitud': 19.29, 'longitud': -72.10 },
        { 'latitud': 19.05, 'longitud': -71.48 },
        { 'latitud': 19.15, 'longitud': -71.89 },
        { 'latitud': 19.00, 'longitud': -72.11 },
        // adicionar mas puntos geográficos aqui
    ];

    // ciclo: crea y adiciona los marcadores a partir de "datos"
    for (var i=0; datos.length; i++) {
        L.marker([datos[i].latitud, datos[i].longitud]).addTo(map);        
    };
    // --------- 0 ---------

          
</script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.