将画布中的点击事件传递到div元素

Question

将画布中的点击事件传递到div元素

3

我正在尝试将fabricJS与Google Maps相结合。我所做的是在地图div上放置一个画布，以显示地图上的形状。问题是谷歌地图事件不再被触发。我在互联网上搜寻了解决方案，并发现css标签"pointer-event"应该将点击事件传递到底层层，但这对我没有用。我还尝试使用"addDomListener"添加事件，但也没有运气。点击事件会被触发，但 "google.maps.event.trigger"却没有。我刚刚开始，所以还没有什么花哨的东西可看。我是网页开发的新手，所以我想在浪费时间于不可能的事情之前在这里问问。这是我的HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #holder {
            height:700px;
            width: 700px;
            position:relative;

        }
        #canvasholder{
            height: 700px;
            width: 700px;
            position: absolute;
        }
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map-canvas {
            position: absolute;

            height: 700px;
            width: 700px;
            z-index: -1;
        }
        #canvas{
            position: absolute;
            height: 700px;
            widht: 700px;
            pointer-events: none;
            opacity: 1;
            z-index: 1;
        }
    </style>
</head>
<body>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<div id="holder">
    <div id="canvasholder">
        <canvas id="canvas"></canvas>
    </div>
    <div id="map-canvas"></div>
</div>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAJ4aYR2NFbLLzh_tkya-rE40gCl-hPpLc&callback=initMap"
        async defer></script>
<script src="./app.js"></script>

</body>
</html>

我的Javascript文件：

var map;
var canvas;
function initMap() {
    map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: {lat: -34.397, lng: 150.644},
        zoom: 8
    });
    google.maps.event.addDomListener(document.getElementById("canvasholder").firstElementChild, "click", function(e){
        google.maps.event.trigger(map, "click", e);
    })
    canvas = new fabric.Canvas("canvas");
    canvas.setHeight(700);
    canvas.setWidth(700);
    canvas.setBackgroundColor('', canvas.renderAll.bind(canvas));
    canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
}

- Essometer

相关问题：如何向画布元素添加一个简单的onClick事件处理程序？ - geocodezip

你可能打错了字，正确的语法是：pointer-events:none;（注意“events”是复数形式）。 - markE

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- geocodezip · Accepted Answer

你可以使用以下代码在地图上触发一个点击事件。如果你的示例中没有其他Google地图对象（标记、多边形、折线等），这种方法将不起作用，你需要判断点击是否落在它们之一上，并触发其点击事件。

从相关问题修改而来：

如何为canvas元素添加简单的onClick事件处理程序？

document.getElementById("canvasholder").addEventListener("click", getPosition, false);

function getPosition(event) {
  var x = event.x;
  var y = event.y;

  var canvas = document.getElementById("canvas");

  x -= canvas.offsetLeft;
  y -= canvas.offsetTop;

  console.log("x:" + x + " y:" + y);

  // propagate click to map
  var latLng = projection.fromContainerPixelToLatLng(new google.maps.Point(x, y));
  google.maps.event.trigger(map, 'click', {
    latLng: latLng
  });
}

概念证明fiddle

代码片段：

var map;
var canvas;

function initMap() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 8
  });

  MyOverlay.prototype = new google.maps.OverlayView();
  MyOverlay.prototype.onAdd = function() {}
  MyOverlay.prototype.onRemove = function() {}
  MyOverlay.prototype.draw = function() {}

  function MyOverlay(map) {
    this.setMap(map);
  }

  var overlay = new MyOverlay(map);
  var projection;

  // Wait for idle map
  google.maps.event.addListener(map, 'idle', function() {
    // Get projection
    projection = overlay.getProjection();
  })



  google.maps.event.addDomListener(document.getElementById("canvasholder").firstElementChild, "click", function(e) {
    console.log("click:" + e)
    google.maps.event.trigger(map, "click", e);
  });
  document.getElementById("canvasholder").addEventListener("click", getPosition, false);

  function getPosition(event) {
    var x = event.x;
    var y = event.y;

    var canvas = document.getElementById("canvas");

    x -= canvas.offsetLeft;
    y -= canvas.offsetTop;

    console.log("x:" + x + " y:" + y);

    // propagate click to map
    var latLng = projection.fromContainerPixelToLatLng(new google.maps.Point(x, y));
    google.maps.event.trigger(map, 'click', {
      latLng: latLng
    });
  }
  google.maps.event.addListener(map, "click", function(e) {
    console.log("click:" + e.latLng);
    var marker = new google.maps.Marker({
      position: e.latLng,
      map: map,
      title: e.latLng.toUrlValue(6),
      icon: {
        url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
        size: new google.maps.Size(7, 7),
        anchor: new google.maps.Point(3.5, 3.5)
      }
    });
  });
  canvas = new fabric.Canvas("canvas");
  canvas.setHeight(700);
  canvas.setWidth(700);
  canvas.setBackgroundColor('', canvas.renderAll.bind(canvas));
  canvas.add(new fabric.Circle({
    radius: 30,
    fill: '#f55',
    top: 100,
    left: 100
  }));
}
google.maps.event.addDomListener(window, "load", initMap);

#holder {
  height: 700px;
  width: 700px;
  position: relative;
}
#canvasholder {
  height: 700px;
  width: 700px;
  position: absolute;
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map-canvas {
  position: absolute;
  height: 700px;
  width: 700px;
  z-index: -1;
}
#canvas {
  position: absolute;
  height: 700px;
  widht: 700px;
  pointer-events: none;
  opacity: 1;
  z-index: 1;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<div id="holder">
  <div id="canvasholder">
    <canvas id="canvas"></canvas>
  </div>
  <div id="map-canvas"></div>
</div>