javascript - 如何在不阻止鼠标交互的情况下在 Google map 上覆盖某些内容？

Question

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

样式:

<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

只要您的覆盖不需要用户交互，Ocelot20 的答案就有效。如果他们这样做，您需要使用 Google 提供的多边形(等)类。

转发事件可能有效，但您完全受制于 Google 不更改事件机制的一些小细节。而且，重要的是，您必须在两个方向上转发事件:从 Google 的 map 层到您的 Canvas ，以及从您 Canvas 的透明部分到 Google 的 map 层。

即。使用多边形 ;)