Включить заголовок и href в изображениях из массива объектов

Question

У меня есть карта (фоновое изображение) на холсте и «маркеры» в некоторых городах (изображения дублируются из массива объектов и включены в холст drawImage()).

Теперь я должен включать атрибуты href и title в эти маркеры. Данные также находятся в одном массиве объектов.

код до сих пор:

var mkr = [ 
     {markerX: 222, markerY: 9, mkrTitle: "t1", mkrAction: "http://www.google.com"}, 
     {markerX: 210, markerY: 93, mkrTitle: "t2", mkrAction: "http://www.google.com"}, 
     {markerX: 122, markerY: 82, mkrTitle: "t3", mkrAction: "http://www.google.com"}, 
     {markerX: 103, markerY: 190, mkrTitle: "t4", mkrAction: "http://www.google.com"}, 
     {markerX: 96, markerY: 209, mkrTitle: "t5", mkrAction: "http://www.google.com"}, 
     {markerX: 122, markerY: 762, mkrTitle: "t6", mkrAction: "http://www.google.com"} 
    ] 

    var x = []; 
    var y = []; 
    var title = []; 
    var action = []; 

    Object.keys(mkr).forEach(function(key) { 

     var valX = mkr[key]["markerX"]; 
     var valY = mkr[key]["markerY"]; 
     var valT = mkr[key]["mkrTitle"]; 
     var valA = mkr[key]["mkrAction"]; 

     x.push(valX); 
     y.push(valY); 
     title.push(valT); 
     action.push(valA); 

     var c = document.getElementById("mCanvas"); 
     //EDIT: 
     var cLeft = c.offsetLeft; 
     var cTop = c.offsetTop; 
     // 
     var ctx = c.getContext("2d"); 
     var img = document.getElementById("marker"); 
     ctx.drawImage(img, val, val2); 

     //EDIT: 
    c.addEventListener('click', function(event) { 
       valX = event.pageX - cLeft, 
       valY = event.pageY - cTop; 
       console.log(x, y); 
       mkr.forEach(function(img) { 
        if (valY > img.top && valY < img.top + img.height && valX > img.left && valX < img.left + img.width) { 
         ctx.fillText = mkr.valA; 
         window.location.href = mkr.valA; 
        } 
       }); 

      }, false); 

    }); 

И HTML:

<img src="img/marker.png" id="marker" style="display: none;" /> 
<canvas id="mCanvas" width="295" height="809"></canvas> <!-- where are the markers --> 
<canvas id="mapCanvas" width="600" height="600"></canvas> <!-- where is the background image --> 

я могу извлечь данные из массива, но я не могу включить их в качестве атрибутов изображения. Я намерен добавить событие клика на каждое изображение (маркеры), которое у меня есть над картой, используя данные из элемента «mkrAction».

EDIT: Как было предложено, я включил код addEventListener, чтобы попробовать его, но просто это не сработало. Ничего не происходит, ни ошибок на консоли ... Где я делаю неправильно?

Answer 1

Возможно, вам нужно что-то вроде этого ...

Примечание: я использовал два различных маркеров, так что вы можете заметить, что работает.

Отредактировано: Я изменил код, чтобы сделать каждый элемент кликабельным. Вы получите предупреждение с именем элемента.

window.onload = function() { 
 
    mkr = [ 
 
     {markerX: 10, markerY: 80, mkrTitle: "t1", mkrAction: "http://www.google.com"}, 
 
     {markerX: 210, markerY: 93, mkrTitle: "t2", mkrAction: "http://www.google.com"}, 
 
     {markerX: 122, markerY: 82, mkrTitle: "t3", mkrAction: "http://www.google.com"}, 
 
     {markerX: 190, markerY: 190, mkrTitle: "t4", mkrAction: "http://www.google.com"}, 
 
     {markerX: 96, markerY: 209, mkrTitle: "t5", mkrAction: "http://www.google.com"}, 
 
     {markerX: 23, markerY: 262, mkrTitle: "t6", mkrAction: "http://www.google.com"} 
 
    ] 
 

 

 
    var x = []; 
 
    var y = []; 
 
    var title = []; 
 
    var action = []; 
 

 
    var c = document.getElementById("mCanvas"); 
 
    var elemLeft = c.offsetLeft; 
 
    var elemTop = c.offsetTop; 
 
    var ctx = c.getContext("2d"); 
 
    var img = document.getElementById("marker"); 
 

 
    mkr.forEach(function(key) { 
 
    var valX = key["markerX"]; 
 
    var valY = key["markerY"]; 
 
    var valTitle = key["mkrTitle"]; 
 
    var valAction = key["mkrAction"]; 
 

 
    x.push(valX); 
 
    y.push(valY); 
 
    title.push(valTitle); 
 
    action.push(valAction); 
 

 
    var c = document.getElementById("mCanvas"); 
 
    var ctx = c.getContext("2d"); 
 
    var img = document.getElementById("marker"); 
 
    ctx.drawImage(img, valX, valY); 
 
    }); 
 

 

 
    // Add event listener for `click` events. 
 
    c.addEventListener('click', function(event) { 
 
    var x = event.pageX - elemLeft, 
 
     y = event.pageY - elemTop; 
 

 
    // Collision detection between clicked offset and element. 
 
    mkr.forEach(function(element) { 
 
     if (y > element["markerY"] && y < element["markerY"] + 100 && 
 
     x > element["markerX"] && x < element["markerX"] + 100) { 
 
     alert('clicked on element: ' + element["mkrTitle"]); 
 
     } 
 
    }); 
 

 
    }, false); 
 
};

<img src="http://tsurumimexico.com/wp-content/uploads/2016/10/redmap-1.png" id="marker" style="display: none;" /> 
 
<img src="http://longboard-masterclass.com/wp-content/uploads/2016/10/Location_Icon_black_Longboard-Masterclass.png" id="marker2" style="display: none;" /> 
 
<!-- where are the markers --> 
 
<canvas id="mCanvas" width="400" height="400"></canvas> 
 
<!-- where is the background image --> 
 
<canvas id="mapCanvas" width="600" height="600"></canvas>