Javascript 如何在谷歌地图上覆盖一些东西，而不阻止鼠标的交互？

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

风格：

<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>

#我的画布{
边框：1px实心#9C9898；
}
#帆布包装{
位置：相对位置；
}/*使其成为定位的父对象*/
#地图画布{
位置：绝对位置；
顶部：0px；
左：0px；
z指数：-1；
}

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>

函数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）；
}
函数drawLine（）{
var canvas=document.getElementById（“myCanvas”）；
var context=canvas.getContext（“2d”）；
context.beginPath（）；
上下文。移动到（100100）；
lineTo（400400）；
context.lineWidth=9；
stroke（）；
};
函数init（）{
loadMap（）；
抽绳（）；
}

HTML:

---

您要查找的是“指针事件”CSS属性：

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

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

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

---

只要覆盖层不需要用户交互，Ocelot20的答案就有效。如果需要，您需要使用Google提供的多边形（etc）类

转发事件可能有效，但你完全受谷歌的摆布，没有改变事件机制的一些小细节。而且，并非无足轻重的是，您必须在两个方向上转发事件：从谷歌地图层到画布，从画布的透明部分到谷歌地图层

例如，使用多边形；）

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