Google映射mapType坐标

Question

我在这里遇到了一些问题。

我想做什么。

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

问题

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

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个图块具有right x/y/z符号，因此所有图块都是此图块的后代。但我将无法使用其他磁贴从服务器获取数据。

问题

那么我该怎么做才能改变地图重复的其他图块的坐标，使其与主图块具有相同的坐标？或者你可以提供其他方法来解决这个问题。 任何帮助将不胜感激。

Answer 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;

      };

    }

Answer 2

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

你的标记表中不应该有'tile'字段，只有lat和lon。在服务器端脚本中，您将计算相关磁贴的角，并选择范围内的标记，例如：

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会为您处理包装。