Question

我想在谷歌地图上画一些东西。所以我虽然在地图上画了一个画布，然后绘制东西，只是这阻碍了与地图的交互。我怎样才能绘制一些东西，但让地图的其余部分保持互动？相关代码段：

样式：

<style>
#myCanvas {
    border: 1px solid #9C9898;
}
#canvas-wrap {
    position:relative;
} /* Make this a positioned parent */
#map_canvas {
    position:absolute;
    top:0px;
    left:0px;
    z-index: -1;
}
</style>

使用Javascript：

<script type="text/javascript">
function loadMap() {
  var fenway = new google.maps.LatLng(42.345573,-71.098326);
  var mapOptions = {center: fenway, zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP };
  var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}

function drawLine(){
  var canvas = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");
  context.beginPath();
  context.moveTo(100, 100);
  context.lineTo(400, 400);
  context.lineWidth = 9;
  context.stroke();
};

function init(){
  loadMap();
  drawLine();
}
</script>

HTML：

<div id="canvas-wrap">
  <canvas id="myCanvas" width="600px" height="600px"></canvas>
  <div id="map_canvas" style="width: 600px; height: 600px"></div>
</div>

Answer 1

`pointer-events'CSS属性是你正在寻找的东西：

#map_canvas {
    position:absolute;
    top:0px;
    left:0px;
    z-index: -1;
    pointer-events:none;
}

这基本上会使画布对鼠标事件透明。

编辑 - 显然这只适用于某些浏览器。这是一个更复杂但跨浏览器兼容的方法：

Forwarding Mouse Events Through Layers

Answer 2

只要您的叠加层不需要用户互动，Ocelot20的答案就会起作用。如果他们这样做，您需要使用Google提供的Polygon（etc）类。

转发活动可能有效，但您完全受Google支配，不会更改活动机制的一些细节。并且，并非无足轻重，您必须在两个方向上转发事件：从Google的地图图层到画布，从画布的透明部分到Google的地图图层。

IE中。使用多边形;）

如何在Google地图上叠加内容，而不会阻止鼠标互动？

2 个答案: