谷歌地图 mapType 坐标答案

【问题标题】：Google maps mapType coordinates谷歌地图 mapType 坐标
【发布时间】：2012-10-18 18:10:28
【问题描述】：

这里有个小问题。

我想做什么。

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

问题

我想通过创建自己的mapType 并定义方法getTile() 来解决这个问题，该方法将负责使用x/y/z 表示法从服务器请求适当的图块，其中x，y 是图块的坐标，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 符号，因此所有图块都是该图块的后代。但我将无法使用其他磁贴从服务器获取数据。

问题

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

【问题讨论】：

标签： javascript google-maps maps tile

【解决方案1】：

屏幕截图中的所有图块都有正确的数字，而不仅仅是中间的 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 会为您处理包装。

【讨论】：

感谢您的帮助。但我认为使用 tile id 会稍微快一些。
我对此表示怀疑，因为对于“tile id”字段，您必须为每个缩放级别的每个标记重复输入。这样你的桌子就会变大很多。（听起来像是微软的“效率”）:-)
好吧，使用tile id，您可以检查是否已经从tile 加载了标记。从表中选择时只有一个比较，而不是两个。如果再增加一个 int(15) 列，您的表格不会变大。
好吧，你的应用是你的选择，但对我来说，每个标记只有 15 个条目似乎完全没有效率。我总是尝试将我的数据库标准化为 3NF：en.wikipedia.org/wiki/Third_normal_form
等等，进入是什么意思？也许你误会了。例如，使用这种用四键计算图块msdn.microsoft.com/en-us/library/bb259689.aspx 的技术，您只需要一个像test.local/getMarkersByTileId/0001 这样的请求，所有图块ID 为0001% 的标记都将被选中。一项。

【解决方案2】：

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

     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;

      };

    }

【讨论】：