这个问题与我在stackoverflow上发现的这个问题非常相似.
Google Maps v3 ImageMapType Prevent Wrapping
但是,上述问题和答案对我的示例/问题不起作用,因为我需要能够以任何缩放级别查看我的所有图像,更重要的是我需要绘图工具正常工作.
我的场景：
我有一个使用ImageMapType的自定义google地图,它还具有DrawingManager库和工具.
我的问题：
乍一看,所有的工作都很好,但是如果要绘制任何标记或多边形,然后平移地图,标记/多边形将重复或移动到视图中的地图区域.
当在绘制多边形时绘制大多边形时也会出现同样的问题,您将注意到,绘制的线将突然捕捉到多边形的错误边.
我的问题：
如何避免包装问题,以便所有的标记都不会移动或重复,以便绘图工具不会碰到多边形的另一面呢？
在线示例：
http://jsbin.com/ecujug/5/edit#javascript,live
视频的问题：
https://dl.dropbox.com/u/14037764/Development/stackoverflow/map-drawing/issue.html
理想效果：
解决方法
理论
在任何缩放,总共有2 ^ zoom x 2 ^ zoom tiles：
zoom _______________________ 2 |_|_|_|_|_|_|_|_|_|_|_| |_|_|_|_|_|_|_|_|_|_|_| |_|_|_|_|_|_|_|_|_|_|_| |_|_|_|_|_|_|_|_|_|_|_| |_|_|_|_|_|_|_|_|_|_|_| |_|_|_|_|_|_|_|_|_|_|_| |_|_|_|_|_|_|_|_|_|_|_| |_|_|_|_|_|_|_|_|_|_|_| |_|_|_|_|_|_|_|_|_|_|_| |_|_|_|_|_|_|_|_|_|_|_| zoom 2
由于LatLng(0,0)是中心GPS点,所以包含该点的瓦片应该是瓦片的中心瓦片：
zoom
_______________________ 2
| |
| |
| | zoom
| | 2 zoom-1
| o----------|-------* ------ = 2
| |_| | 2
| | |
| | |
| | |
|__________|__________|
zoom |
2 | zoom-1
* 2
因此,在任何缩放级别,中心平铺具有(2 ^(zoom-1),2 ^(zoom-1))坐标.该图块将是映射的起源.通过从当前图块的坐标中减去原点坐标,我们将拥有像1-3个缩放级别一样工作的坐标空间,当原点为(0,0)时,瓦.
履行
首先,选择较高的缩放级别,例如：
var MIN_ZOOM = 11,MAX_ZOOM = 13;
映射将由getNormalizedCoord函数完成：
function getNormalizedCoord(coord,zoom) {
//Amount of total tiles:
// MIN_ZOOM -> 1 tile
// MIN_ZOOM+1 -> 2 tiles
// MIN_ZOOM+2 -> 4 tiles
var totalTiles = 1 << (zoom - MIN_ZOOM),y = coord.y,x = coord.x;
var originx = 1 << (zoom-1),originy = 1 << (zoom-1);
if(y < originx || y >= originx + totalTiles ||
x < originx || x >= originx + totalTiles){
return null;
}
x -= originx;
y -= originy;
return { x:x,y:y };
}
最后,ImageMapOptions应该是：
var siteMapOptions = {
getTileUrl: function (coord,zoom) {
var normalizedCoord = getNormalizedCoord(coord,zoom);
if (normalizedCoord) {
return 'https://edocstorage.blob.core.windows.net/siteimages/2fa9fc72-23a7-41ed-86a1-b83a3ba04790/_siteTiles/tile_' +
(zoom-MIN_ZOOM) + '_' +
normalizedCoord.x + '-' +
normalizedCoord.y + '.png';
} else {
return 'content/tilecutter/empty.jpg';
}
},tileSize: new google.maps.Size(256,256),maxZoom: MAX_ZOOM,minZoom: MIN_ZOOM,radius: 1738000,name: "Site Plan"
};
