Question

基本上我是根据用户输入在“画布”中绘制圆圈，我希望这些圆圈在Google地图上绘制为画布的背景。

我看到了代码示例的数量，其中谷歌地图用于div标签，但是如何使用画布来获取它。

请看这是我试过的。

<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
  function initialize() {
    var map_canvas = document.getElementById('map_canvas');
    var map_options = {
      center: new google.maps.LatLng(44.5403, -78.5463),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(map_canvas, map_options);
    var ctx = document.getElementById("map_canvas").getContext("2d");
    ctx.beginPath();
    ctx.fillStyle = "rgb(200,0,0)";
    ctx.arc(10, 10, 12, 0, Math.PI * 2, false);
    ctx.fill();
    ctx.font = 'bold 10pt Courier';
    ctx.fillStyle = 'white';
    ctx.textAlign = 'center';
    ctx.fillText(10, 10, 13);
    ctx.closePath();
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<canvas id="map_canvas"></canvas>
</body>
</html>

Answer 1

为什么不使用包含google-maps内容和画布的包装div（包含所需尺寸）。例如，您可以将画布绝对定位（top: 0; right: 0; bottom: 0; left: 0;以使用它的父级全尺寸，并像z-index: 10一样明确地将它放在地图上。）

根据您的源代码制作的jsFiddle：https://jsfiddle.net/v7d6qyh0/

<强> HTML

<div id="canvas-wrapper">
  <canvas id="map_canvas"></canvas>
  <canvas id="my_canvas"></canvas>
</div>

<强> JS

function initialize() {
  var map_canvas = document.getElementById('map_canvas');
  var map_options = {
    center: new google.maps.LatLng(44.5403, -78.5463),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(map_canvas, map_options);
  var ctx = document.getElementById("my_canvas").getContext("2d");
  ctx.beginPath();
  ctx.fillStyle = "rgb(200,0,0)";
  ctx.arc(10, 10, 12, 0, Math.PI * 2, false);
  ctx.fill();
  ctx.font = 'bold 10pt Courier';
  ctx.fillStyle = 'white';
  ctx.textAlign = 'center';
  ctx.fillText(10, 10, 13);
  ctx.closePath();
}
google.maps.event.addDomListener(window, 'load', initialize);

更改var ctx =的行获取不同的画布。

<强> CSS

* { box-sizing: border-box; margin: 0; padding: 0; }

#canvas-wrapper {
  position: relative;
  margin: 20px;
}

#map_canvas {
  border: 2px solid blue;
  box-shadow: inset 0 0 7px 1px blue;
}

#my_canvas {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 10;
  border: 2px solid red;
}

//更新：

使用Map和Canvas工作的新jsFiddle：https://jsfiddle.net/y4zgfqmr/（由于缺少API-Key而使用您的坐标，因此将地图显示为Iframe。）

<强> HTML

<div id="canvas-wrapper">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2843.7718513478367!2d-78.54848868412537!3d44.540303802631506!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNDTCsDMyJzI1LjEiTiA3OMKwMzInNDYuNyJX!5e0!3m2!1sde!2sde!4v1461144974851" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
  <div id="my_canvas-container">
    <canvas id="my_canvas" width="600" height="450"></canvas>
  </div>
</div>

<强> JS

var ctx = document.getElementById("my_canvas").getContext("2d");
ctx.beginPath();
ctx.fillStyle = "rgb(200,0,0)";
ctx.arc(320, 190, 12, 0, Math.PI * 2, false);
ctx.fill();
ctx.font = 'bold 10pt Courier';
ctx.fillStyle = 'white';
ctx.textAlign = 'center';
ctx.fillText(10, 320, 193);
ctx.closePath();

<强> CSS

* { box-sizing: border-box; margin: 0; padding: 0; }

#canvas-wrapper {
  display: inline-block;
  position: relative;
  margin: 20px;
}

#my_canvas-container {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 10;
}
#my_canvas-container > #my_canvas {
  width: 100%;
  height: 100%;
}

谷歌地图作为我的画布绘图的背景

1 个答案: