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

google map as background to my canvas drawing

本文关键字：绘画 背景 布绘画 谷歌地图      更新时间：2023-09-26

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

我看到了许多代码示例，其中在div标签上使用了谷歌地图，但如何使用canvas获得它。

请看这是我试过的。

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

为什么不使用包含谷歌地图内容和画布的包装器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%;
}
相关文章：