Ulotka: Dodaj link do znaczników

Dość proste pytanie: Jak zrobić kliknięcie znaczników mapy w folderze Ulotka i skierować użytkownika na inną stronę? Każdy znacznik ma swoją własną stronę.Ulotka: Dodaj link do znaczników

Próbowałem następujące rzeczy bez powodzenia; w jakiś sposób wszystkie znaczniki wskazują tę samą stronę, która jest ostatnim przypisanym identyfikatorem URI.

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

Ten numer doprowadza mnie do szału.

Źródło

2012-12-19 Ivar

OK, w końcu doszedłem do rozwiązania; po dodaniu znacznika do mapy otrzymuje identyfikator o nazwie "_leaflet_id". Można go pobrać przez obiekt docelowy, a także ustawić niestandardową wartość po, która została dodana do mapy.

więc ostateczne rozwiązanie jest po prostu:

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

(I otrzymuje za w pętli z odwróconej pętli while)

Źródło

2012-12-19 15:38:36 Ivar

Nie powinieneś używać pętli 'for..in' do iterowania tablic. Poza tym przeciekasz 'x' do globalnego zasięgu; użyj 'var'. – josh3736

Masz rację - zamiast tego zmieniłem na pętlę while. Dziękuję Ci. – Ivar

Można również użyć popup, który może wyświetlać HTML

marker.bindPopup (htmlString);

Źródło

2012-12-23 18:14:05 dnns

Prawda, ale użytkownik musi kliknąć dwa razy zamiast jednego. – Ivar

Znaczniki mapy zwykle nie otwierają nowego adresu URL, więc preferowanym sposobem jest wyskakujące okienko. Możesz wyzwolić go automatycznie, a on po prostu wyświetli lub najechał. Użytkownik powinien wiedzieć, co się stanie, gdy wejdzie w interakcję z obiektami, które im dajesz, w przeciwnym razie zostaniesz sfrustrowany. – knownasilya

Znalazłem podobny kod, który może ci pomóc. tutaj jest 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); 
    }

Źródło

2015-08-18 09:00:27 Mou

Ulotka: Dodaj link do znaczników

Odpowiedz

Powiązane problemy