Question

我正在尝试将fabricJS与Google地图结合使用。我所做的是在地图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 }));
}

Answer 1

您可以使用以下代码触发地图上的点击。您的示例中没有任何其他Google地图对象（标记，多边形，折线等），这不适合直接使用，您必须确定点击是否落在其中一个上并触发其点击事件要发生这种情况。

从相关问题修改：

How do I add a simple onClick event handler to a canvas element?

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
  });
}

proof of concept 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>

将点击事件从画布传播到div

1 个答案: