我正在开发一个显示来自数据库的图像的应用程序。我想在我的应用程序中添加地图的功能。喜欢
我创建了一个不可见的网格并在该网格中显示来自数据库的图像。数据库中的每个图像都有地址（行，列）。我想在各自的网格 ID 中显示所有图像。
滚动（它应该在滚动时将请求发送到服务器并使用新图像更新页面。）
缩放（它应该放大或缩小，并将请求发送到服务器并使用新图像更新页面，大小取决于放大或缩小值。）
我不想下载所有图像，我只想更新特定区域以防缩放、滚动等。
以下是我的代码，我用于显示和滚动。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#overscroll { width: 500px; height: 500px; overflow: hidden; border: solid 1px #000; margin: 30px auto; position: relative; }
#overscroll ul { width: 2500px; margin:0; padding: 0; }
#overscroll li { display: block; float: left; width: 100px; height: 100px; background-color: #FFF; }
#overscroll li.alt { background-color: #C00; }
#overscroll li.no-drag { background-color: #000; color: #FFF; }
#overscroll li.last { clear: both; visibility: hidden; height: 0; padding: 0; }
</style>
</head>
<body>
<?php
$dbCon = mysql_connect("localhost", "root", "");
$db = mysql_select_db("db");
$sql = "SELECT * FROM images";
$result = mysql_query ($sql);
$rows = 3;
$cols = 3;
$zoom = 1;
echo "<div id='overscroll'>";
echo "<table width='600px' border='1'>";
for ($i=1; $i<=$rows; $i++){
echo "<tr>";
for ($j=1; $j<=$cols; $j++){
$data = mysql_fetch_array($result);
if ($data[3] != '')
echo "<td align='center'><img src='{$data[3]}' width=100 height=100></td>";
else
echo "<td align='center'><img src='abc.jpg' width=100 height=100></td>";
}
echo "</tr>";
}
?>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="jquery.overscroll.js"></script>
<script>
$(function(o){
o = $("#overscroll").overscroll({
cancelOn: '.no-drag',
//hoverThumbs: true,
//persistThumbs: true,
//showThumbs: false,
scrollLeft: 200,
scrollTop: 100
}).on('overscroll:dragstart overscroll:dragend overscroll:driftstart overscroll:driftend', function(event){
console.log(event.type);
});
$("#link").click(function(){
if(!o.data("dragging")) {
console.log("clicked!");
} else {
return false;
}
});
});
</script>
</body>
</html>
我正在使用一个 javascript 插件。
我应该使用 html5 画布吗？对于那种应用程序，如果是，那么任何人都可以给我一些开源参考。我怎样才能完成这项任务？我已经检查了 ajax-zoom 和其他地图 api，但它不是适合我的解决方案。我无法在地理服务器上工作。
请帮忙