0

我正在开发一个显示来自数据库的图像的应用程序。我想在我的应用程序中添加地图的功能。喜欢

  1. 我创建了一个不可见的网格并在该网格中显示来自数据库的图像。数据库中的每个图像都有地址（行，列）。我想在各自的网格 ID 中显示所有图像。

  2. 滚动（它应该在滚动时将请求发送到服务器并使用新图像更新页面。）

  3. 缩放（它应该放大或缩小，并将请求发送到服务器并使用新图像更新页面，大小取决于放大或缩小值。）

  4. 我不想下载所有图像，我只想更新特定区域以防缩放、滚动等。

以下是我的代码，我用于显示和滚动。

 <!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，但它不是适合我的解决方案。我无法在地理服务器上工作。

请帮忙

4

1 回答 1

0

使用http://openlayers.org/进行调查

于 2012-08-07T12:45:13.690 回答