1

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

款式：

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

2 回答 2

1

只要您的叠加层不需要用户交互，Ocelot20 的答案就有效。如果是这样，您需要使用 Google 提供的 Polygon (etc) 类。

转发事件可能会起作用，但您完全受制于 Google，不会更改事件机制的一些小细节。而且，并非无关紧要，您必须在两个方向上转发事件：从 Google 的地图层到您的画布，以及从您的画布的透明部分到 Google 的地图层。

IE。使用多边形；）

于 2012-07-01T14:17:26.153 回答
1

`pointer-events' CSS 属性是您正在寻找的：

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

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

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

通过层转发鼠标事件

于 2012-07-01T13:07:28.327 回答