我正在开发一个显示数据库中图像的应用程序。 我想在我的应用程序中添加地图的功能。
-
我创建了一个不可见的网格，并在该网格中显示数据库中的图像。 数据库中的每个图像都有类似（行，列）的地址。 我想在各自的网格 ID 中显示所有图像。
-
滚动（它应该在滚动时将请求发送到服务器，并使用新图像更新页面。
-
缩放（它应放大 IR，并将请求发送到服务器，并使用"放大"或"缩小"值上具有大尺寸或小尺寸的新图像更新页面。
我 不想下载所有图像，我只想在缩放，滚动等情况下更新特定区域。
以下是我用于显示和滚动的代码。
<!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，但它不是适合我的解决方案。 我无法在地理服务器上工作。
请帮忙
使用 http://openlayers.org/进行调查