我在画布中有一张地图的图像,我想像使用 HTML5 和 jQuery 的谷歌地图界面一样。我想执行以下操作:
• Double click on pan in without changing the size of the containing div
• Click on a building to bring up a pop up of information on that building
• Click and drag to pan
我现在拥有的代码是画布中的图像。我发现了几个在图像上显示“缩放”的代码,但要么调整容器 div 的大小,要么不是一种平滑且响应迅速的方式,它只是跳转到更大的尺寸,我希望缩放动画。
地图上将有几座建筑物被“固定”,用户可以点击这些建筑物来显示有关该建筑物的信息。
代码如下:
JS:
$( document ).ready( function() {
var canvas = document.getElementById( 'canvas' );
var context = null;
var map = null;
if( canvas.getContext )
{
context = canvas.getContext( '2d' );
$( '#map' ).load( function( evt ) {
context.drawImage( evt.currentTarget, 10, 10 );
} );
map = new Image();
map.onload = function() {
context.drawImage( this, 20, 20 );
};
map.src = 'images/asu_poly_map.png';
} else {
alert( 'Your browser does not support canvas.' );
}
} );
HTML:
<div id="map">
<canvas id="canvas" width="1055" height="600"></canvas>
</div>
CSS:
#map {
margin:0 auto;
margin-top : 180px;
width : 1200px;
}
编辑添加:我假设它会与此类似,但无法弄清楚如何将其应用于来自服务器的图像,该图像正在绘制到画布上。