基本上，我根据用户输入在“ Canvas ”中绘制圆圈，并且我希望这些圆圈在谷歌地图上绘制作为 Canvas 的背景。
我看到了一些代码示例，其中谷歌地图在 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>
最佳答案
为什么不使用包含 google-maps 内容和 Canvas 的包装 div(具有所需的尺寸)。例如，您可以将 Canvas 绝对定位(top:0；right:0；bottom:0；left:0；)以使用其父级的完整尺寸，例如z-index:10 code> 明确地将其放在 map 上)。
根据您的源代码制作的 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 = 的行以获得不同的 Canvas 。
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%;
}
关于javascript - 谷歌地图作为我的 Canvas 绘图的背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36737819/