Как открыть всплывающее окно маркера с ссылкой за пределы карты?

Question

У меня есть карта с лифтом с несколькими маркерами.

Каждый из маркеров имеют сходную HTML для

<img class="leaflet-marker-icon leaflet-clickable leaflet-zoom-animated" src="leaflet/dist/images/marker-icon.png" style="margin-left: -12px; margin-top: -41px; width: 25px; height: 41px; transform: translate(435px, 200px); z-index: 200;" title="location_1"> 

При нажатии на маркер открывается над маркером всплывающее.

Что я пытаюсь сделать, это добавить ссылки за пределами карты, относящиеся к каждому маркеру.

Каждый из маркеров имеет уникальный заголовок. Так что я мог просто создать список ссылок HTML, с названием как идентификатор такого как

<a class="location_1">location 1</a> 
<a class="location_2">location 2</a> 

Затем связать эти ссылки на соответствующий маркер на карте листовки?

Как бы я смог достичь этого?

Answer 1

Если вы добавите маркеры в массив, было бы довольно просто проверить их на атрибуты вашего элемента.

Например:

var markers = []; 
var marker1 = L.marker([51.497, -0.09],{title:"marker_1"}).addTo(map).bindPopup("Marker 1"); 
markers.push(marker1); 
var marker2 = L.marker([51.495, -0.083],{title:"marker_2"}).addTo(map).bindPopup("Marker 2"); 
markers.push(marker2); 
var marker3 = L.marker([51.49, -0.097],{title:"marker_3"}).addTo(map).bindPopup("Marker 3"); 
markers.push(marker3); 

function markerFunction(id){ 
    for (var i in markers){ 
     var markerID = markers[i].options.title; 
     if (markerID == id){ 
      markers[i].openPopup(); 
     }; 
    } 
} 

$("a").click(function(){ 
    markerFunction($(this)[0].id); 
}); 

Смотрите он работает в этом fiddle