Javascript Google Maps API V3-防止ImageMapType包装

请注意：

这个问题与我在stackoverflow上发现的问题非常相似

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

---

我的场景：

我有一个使用

ImageMapType

的自定义谷歌地图，它还有

DrawingManager

库和工具

我的问题：

乍一看，所有这些都可以很好地工作，但是如果您要绘制任何标记或多边形，然后平移地图，则标记/多边形会在视图中的地图区域重复或移动

在地图上绘制大型多边形时也会出现同样的问题，在绘制多边形时，您会注意到正在绘制的线会突然捕捉到多边形的错误一侧

我的问题：

如何防止包装问题，使所有标记不会移动或复制，并使绘图工具在不捕捉多边形另一侧的情况下工作

---

在线示例：

问题视频：

理想效果：

---

似乎很明显——谷歌地图认为这是一个完整的地球，所以它是圆形的。为什么要使用最小（地球范围）的缩放级别？让谷歌地图认为这只是一小块土地，不需要超过1°，你就完成了。

你应该在更高的级别上工作，并为图像选择另一个原点，而不是

（0,0）

平铺。您需要的只是简单的数学。默认情况下，您的地图将居中于

LatLng（0,0）

点（正如您在

地图选项

中提到的），计算将围绕该点执行

理论 在任何缩放时，共有

2^缩放x 2^缩放

分幅：

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

由于

LatLng（0,0）

是中心GPS点，因此包含该点的磁贴应为

磁贴表的中心磁贴

：

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

因此，在任何

zoom

级别，中央磁贴都有

（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 };
 }

---

不过，谢谢你的回答。。整个想法是，用户可以上传一幅图像，用户可以查看整个图像，然后根据需要放大be@Blowsie“整体”取决于你。。。您可以根据需要放大。您不需要从缩放1开始。举个例子，从13开始：）这种方法对我来说真的不起作用，而且通常会是一个糟糕的用户体验。谢谢你的想法+1@Blowsie，我不明白，为什么它不起作用？除了包装问题外，较小规模的工作方式与较大规模的工作方式完全相同。正是你需要的。人们需要立刻看到整个地图。这是我的问题的标准。非常好的回答，非常感谢！我相信这对很多其他人都会有用。

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"
};