0

我这里有个小问题。

我想做的事。

在我的服务器上，我有一个带有标记的表格，其中包含 lat、lng、tile字段。表格中有很多标记，所以我通过用户可见的图块来请求它们。让它发挥应有的作用是我的最终目标。

问题

我想通过创建自己的mapType和定义方法来解决这个问题，该方法getTile()将负责使用x/y/z符号从服务器请求适当的切片，其中 x,y 是切片的坐标，z 是缩放级别。您可以在此处找到更多相关信息。有我的代码（我在这里使用jquery-ui-map 插件）：

function ServerFetchMapType() {

      this.tileSize = new google.maps.Size(256,256);
      this.maxZoom = 15;
      this.name = "Server Tile #s";
      this.alt  = "Server Data Tile Map Type";

      this.getTile = function(coord, zoom, ownerDocument){

        //Data for request
        var x = coord.x;
        var y = coord.y;
        var z = zoom;

        //Here i will make an ajax request for markers in this tile

        //Visualization
        var div = ownerDocument.createElement('DIV');
        div.innerHTML = 'X:' + coord.x + ' Y:' +  coord.y + ' Z:' +  zoom;
        div.style.width = this.tileSize.width + 'px';
        div.style.height = this.tileSize.height + 'px';
        div.style.fontSize = '10';
        div.style.borderStyle = 'solid';
        div.style.borderWidth = '1px';
        div.style.borderColor = '#AAAAAA';
        return div;

      };

    }

    var test = new ServerFetchMapType();

    $('#map_canvas').gmap();
    $('#map_canvas').gmap('get', 'map').overlayMapTypes.insertAt(0, test);

一切正常，但后来我发现了一个缺点，我将说明它：

在此处输入图像描述

如您所见，图片中心只有 4 个图块具有正确 x/y/z的符号，因此所有图块都是该图块的后代。但我将无法使用其他图块从服务器获取数据。

问题

那么我能做些什么来改变地图只是重复的其他图块的坐标与主图块具有相同的坐标呢？或者您可以提供其他方法来解决此问题。任何帮助将不胜感激。

4

2 回答 2

1

一位非常好的人帮助我以这种方式解决了这个问题：

     function ServerFetchMapType() {

      this.tileSize = new google.maps.Size(256,256);
      this.maxZoom = 15;
      this.name = "Server Tile #s";
      this.alt  = "Server Data Tile Map Type";

      this.getTile = function(coord, zoom, ownerDocument){

        var dim = Math.pow(2, zoom);

        //Data for request
        var x = Math.abs( coord.x ) % dim;
        var y = Math.abs( coord.y ) % dim;
        var z = zoom;



        //Visualization D
        var div = ownerDocument.createElement('DIV');        
        div.innerHTML = 'X:' + Math.abs( coord.x ) % dim  + ' Y:' +  Math.abs( coord.y ) % dim + ' Z:' +  zoom;

        div.style.width = this.tileSize.width + 'px';
        div.style.height = this.tileSize.height + 'px';
        div.style.fontSize = '10';
        div.style.borderStyle = 'solid';
        div.style.borderWidth = '1px';
        div.style.borderColor = '#AAAAA9';
        return div;

      };

    }
于 2012-10-29T15:36:07.843 回答
0

屏幕截图中的所有图块都有正确的数字，而不仅仅是中间的 4。

您的标记表中不应该有“平铺”字段，只有纬度和经度。在您的服务器端脚本中，您将计算相关图块的角并选择范围内的标记，例如：

Select * from markersTable 
where lat >= tile_SW_Lat and lat <= tile_NE_Lat 
and lon >= tile_SW_lon and lon <= tile_NE_lon

在所有情况下，您都知道 tile(x,y) 值是 0 或正整数。API 会为您处理包装。

于 2012-10-29T15:28:11.363 回答