Opuscolo: aggiungere un collegamento ai marcatori

Question

Domanda molto semplice: come posso rendere selezionabili gli indicatori di mappa in Opuscolo e indirizzare l'utente a un'altra pagina? Ogni marcatore ha una sua pagina.

Ho provato quanto segue senza successo; in qualche modo tutti i marcatori puntano alla stessa pagina, che è l'ultimo URI assegnato.

var markers = [ 
    { coords: [51.505, -0.09], uri: '/some-page' }, 
    ... 
]; 

for(x in markers) 
{ 
    L.marker(markers[x].coords).on('click', function() { 
     window.location = markers[x].uri; 
    }).addTo(map); 
} 

Questo problema mi sta facendo impazzire.

Answer 1

OK, ho finalmente trovato una soluzione; quando un marcatore viene aggiunto alla mappa viene assegnato un ID chiamato "_leaflet_id". Questo può essere recuperato tramite l'oggetto di destinazione e anche impostato su un valore personalizzato dopo è stato aggiunto alla mappa.

Quindi la soluzione finale è semplicemente:

var x = markers.length; 

while(x--) 
{ 
    L.marker(markers[x].coords).on('click', function(e) { 
     window.location = markers[e.target._leaflet_id].uri; 
    }).addTo(map)._leaflet_id = x; 
} 

(ho sostituito il per-in loop con una rovesciata ciclo while)

Answer 2

Si potrebbe anche usare un popup che può visualizzare HTML

marker.bindPopup (htmlString);

Answer 3

ho trovato un codice simile che potrebbe essere di aiuto. ecco collegamento jsfiddle http://jsfiddle.net/farhatabbas/qeJ78/

$(document).ready(function() { 
     init_map(); 
     add_marker(); 
    }); 
    var map; 

    function init_map() { 
     map = L.map('map').setView([37.8, -96], 4); 
     L.tileLayer('http://{s}.tile.cloudmade.com/{key}/22677/256/{z}/{x}/{y}.png', { 
      attribution: 'Map data © 2011 OpenStreetMap contributors, Imagery © 2012 CloudMade', 
      key: 'BC9A493B41014CAABB98F0471D759707' 
     }).addTo(map); 
    } 

    function add_marker() { 
     var points = [ 
      ["P1", 43.059908, -89.442229, "http://www.url_address_01.com/"], 
      ["P2", 43.058618, -89.442032, "http://www.url_address_02.com/"], 
      ["P3", 43.058618, -86.441726, "http://www.url_address_03.com/"] 
     ]; 
     var marker = []; 
     var i; 
     for (i = 0; i < points.length; i++) { 
      marker[i] = new L.Marker([points[i][1], points[i][2]], { 
       win_url: points[i][3] 
      }); 
      marker[i].addTo(map); 
      marker[i].on('click', onClick); 
     }; 
    } 

    function onClick(e) { 
     console.log(this.options.win_url); 
     window.open(this.options.win_url); 
    }