私のキャンバスの背景としてのGoogleマップ

基本的に私はキャンバスの背景としてGoogleの地図上に描かれた「キャンバス」のサークルをユーザー入力に基づいて描いています。私のキャンバスの背景としてのGoogleマップ

私はdivタグよりもGoogleマップを使用するコードサンプルを見ましたが、キャンバスで取得する方法はいくつかありました。

これは私が試したものです。

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

出典

2016-04-20 rakesh sinha

Googleマップのコンテンツとキャンバスを含むラッパーdiv（必要なサイズ）を使用しないのはなぜですか。たとえば、キャンバスの絶対座標（top: 0; right: 0; bottom: 0; left: 0;）を配置すると、それは親のフルディメンションを使用し、z-index: 10のようにマップ上に確実に配置できます。あなたのソースコードから作られた

A jsFiddle：var ctx =は異なるキャンバスを得るためhttps://jsfiddle.net/v7d6qyh0/

HTML

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

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

は、行を変更しました。

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

// UPDATE：地図とキャンバス取り組んで

新jsFiddle：欠落が原因APIキーにインラインフレームとしてhttps://jsfiddle.net/y4zgfqmr/（地図は、しかし、あなたと座標）。

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>

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%; 
}

出典

2016-04-20 09:25:28 Seika85

は、これは私の大学のプロジェクトが軌道に乗るには十分ですが、私は、マップ上でクリックしない、それを移動したり、ズームすることができますどちらも見ますそれ。私は多くのhtml経験を持つ開発者ではありませんが、私は自分のプロジェクトを完成させるためにUIを開発する必要があります。 –

実際に地図上にキャンバスレイヤーを配置したくないのですが、地図上にマーカーを置くことはできますか？（描いた円が動いたら、地図を動かせばいいですか？） – Seika85

サークルは一定ではありませんマップをドラッグしてサークルを目的の場所に調整できます。私はキャンバスの層のために私はそれにアクセスすることができません知っている。 –

私のキャンバスの背景としてのGoogleマップ

答えて

関連する問題