Question

我在Canvas上有一张地图（背景图片），在某些城市有一些“标记”（图像与一组对象重复，并通过drawImage（）包含在Canvas中。）

现在我必须在这些标记中包含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>

在“对象数组”的图像中包含标题和href

1 个答案: