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のマップレイヤーにイベントを転送する必要があります。

つまり。ポリゴンを使用します;）

于 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 に答える