Leaflet: Ajouter un lien vers les marqueurs

Question assez simple: Comment faire pour que les marqueurs de carte dans le dépliant soient cliquables et redirigent l'utilisateur vers une autre page? Chaque marqueur a sa propre page.Leaflet: Ajouter un lien vers les marqueurs

J'ai essayé ce qui suit sans succès; d'une manière ou d'une autre, tous les marqueurs pointent vers la même page, qui est le dernier URI assigné.

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); 
}

Ce problème me rend vraiment fou.

Source

2012-12-19 Ivar

D'accord, j'ai finalement trouvé une solution; Lorsqu'un marqueur est ajouté à la carte, il reçoit un identifiant appelé "_leaflet_id". Cela peut être récupéré à travers l'objet cible, et également mis à une valeur personnalisée après il a été ajouté à la carte.

donc la solution finale est tout simplement:

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; 
}

(j'ai remplacé la boucle for-in avec une inversion en boucle)

Source

2012-12-19 15:38:36 Ivar

Vous ne devriez pas utiliser une boucle 'for..in' pour itérer des tableaux. En outre, vous fuyez 'x' dans la portée globale; utilisez 'var'. – josh3736

Vous avez raison - j'ai changé pour une boucle while à la place. Je vous remercie. – Ivar

Vous pouvez également utiliser un pop-up qui peut afficher HTML

marker.bindPopup (htmlString);

Source

2012-12-23 18:14:05 dnns

True, mais l'utilisateur doit cliquer deux fois au lieu d'un. – Ivar

Les marqueurs de carte n'ouvrent généralement pas une nouvelle URL, donc une fenêtre contextuelle serait le moyen préféré. Vous pouvez le déclencher automatiquement, et il s'affichera simplement, ou en vol stationnaire. L'utilisateur doit savoir ce qui va se passer lorsqu'il interagit avec les objets que vous lui donnez, sinon vous aurez des utilisateurs frustrés. – knownasilya

J'ai trouvé un code similaire qui pourrait vous aider. here is jsfiddle link 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 &copy; 2011 OpenStreetMap contributors, Imagery &copy; 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); 
    }

Source

2015-08-18 09:00:27 Mou

Leaflet: Ajouter un lien vers les marqueurs

Répondre

Questions connexes