Google Maps API V3 - 防止包装ImageMapType

时间:2012-07-10 10:20:29

标签: javascript google-maps google-maps-api-3 imagemap

请注意:

这个问题与我在stackoverflow上找到的问题非常类似。

Google Maps v3 ImageMapType Prevent Wrapping

但是,上述问题和答案对我的示例/问题不起作用,因为我需要能够在任何缩放级别查看我的所有图像,更重要的是我需要绘图工具才能正常工作。


我的情景:

我使用ImageMapType制作了自定义谷歌地图,它还有DrawingManager库和工具。

我的问题:

乍一看,所有工作都很顺利,但是如果您要绘制任何标记或多边形然后平移地图,则标记/多边形会重复或在视图中的地图区域内移动。

在地图上绘制大型多边形时会出现同样的问题,因为在绘制多边形时,您会注意到正在绘制的直线会突然捕捉到多边形的错误边。

我的问题:

如何防止包装问题,以便所有标记都不会移动或复制,以便绘图工具无需捕捉到多边形的另一面?


在线示例:

http://jsbin.com/ecujug/5/edit#javascript,live

问题视频:

https://dl.dropbox.com/u/14037764/Development/stackoverflow/map-drawing/issue.html

期望效果:

http://www.maplib.net/map.php?id=1236

2 个答案:

答案 0 :(得分:13)

而不是1-3缩放级别,您应该在更高级别工作,并为图像选择(0,0)平铺以外的其他来源。您需要的只是简单的数学。默认情况下,您的地图将以LatLng(0,0)点为中心(正如您在MapOptions中提到的那样),将执行计算在那一点上。

理论

在任何缩放时,都有2^zoom x 2^zoom个瓷砖:

                           zoom
  _______________________ 2
  |_|_|_|_|_|_|_|_|_|_|_|
  |_|_|_|_|_|_|_|_|_|_|_|
  |_|_|_|_|_|_|_|_|_|_|_|          
  |_|_|_|_|_|_|_|_|_|_|_|          
  |_|_|_|_|_|_|_|_|_|_|_|
  |_|_|_|_|_|_|_|_|_|_|_|          
  |_|_|_|_|_|_|_|_|_|_|_|
  |_|_|_|_|_|_|_|_|_|_|_|
  |_|_|_|_|_|_|_|_|_|_|_|
  |_|_|_|_|_|_|_|_|_|_|_| 
  zoom
 2

由于LatLng(0,0)是中心GPS点,包含该点的图块应该是tile-sheet的中心图块:

                           zoom
  _______________________ 2
  |                     |
  |                     |
  |                     |           zoom
  |                     |          2         zoom-1
  |          o----------|-------*  ------ = 2
  |          |_|        |            2
  |          |          |
  |          |          |
  |          |          |
  |__________|__________| 
  zoom       |
 2           |  zoom-1
             * 2

因此,在任何zoom级别,中央磁贴都有(2^(zoom-1), 2^(zoom-1))个坐标。该图块将是映射的origin。通过从当前图块的坐标中减去原点坐标,我们将有coordinate-space,就像我们在{{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

Live demo

答案 1 :(得分:3)

似乎很明显 - 谷歌地图认为这是一个完整的地球,所以它是圆的。为什么你在最小(地球范围)缩放级别上工作?谷歌地图认为这只是一小块土地,不超过1°,你就完成了。