在對象數組中包含標題和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」項目中的數據在地圖上添加每個圖像（標記）上的點擊事件。

編輯： 至於建議，我已經包括的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>