Google maps 如何防止平移时谷歌地图上覆盖的水平环绕？

我创建了一个页面，允许用户在谷歌地图上突出显示国家。我的代码非常简单——我使用的是D3.js和谷歌的OverlayView——我获得了国家的地理json

一切都很好——但当一个国家横跨地图最远的边缘时，我的国家轮廓有时会错误地环绕在地图的中心。例如，如果对地图进行平移，使中国的西半部位于最右侧，东半部位于最左侧。下面是发生的情况

注意：这似乎是一个地图平移问题，与缩放级别无关–这与地图的“最小缩放”设置为2的问题相同

在平移地图时如何避免这种影响？提前谢谢

更新#1（2013.07.18）

---

非常感谢您的回答和评论。我创建了一个。这个测试页面在谷歌地图上勾勒出中国的轮廓，并以美国为中心（这样你就可以看到加载中的问题）。请注意，向任何一个方向平移都可以解决问题，放大美国似乎没有帮助。再次感谢

这个问题演示了如何通过不允许用户一次看到整个世界来控制覆盖最大化显示和平移最大化显示，以防止环绕

因此，问题的关键在于叠加视图获取像素坐标的位置。如果我们能找出如何改进该部分以保持形状一致，它可能会解决我们的问题。这可能有助于测试包装，但可能不起作用，因为即使在放大时，您的问题似乎也会发生

var proj = overlay.getProjection();
var wwidth = 0;
if (proj) wwidth = proj.getWorldWidth();
var mapsWrapsAround=false;
if (__wwidth > 0 && __wwidth < domContainer.width()) mapsWrapsAround = true;

var proj=overlay.getProjection（）；
var wwidth=0；
如果（项目）wwidth=proj.getWorldWidth（）；
var mapsWrapsAround=false；
如果（uuwwidth>0&&uuuwwidth

我意识到测试经度是否与起始经度有很大差异可能不起作用，因为经度可能是正确的，但会映射到屏幕上的多个div位置。这就是我们要测试的div像素坐标。但也许你可以通过测试它是否在与地理坐标的差异相反的方向来测试在x方向翻转

// UNTESTED

// dimensioned somewhere outside
var start;
var startgeo;

// inside the overlay.onAdd content I think.
// Turn the overlay projection into a d3 projection
var googleMapProjection = function (coordinates) {
    var googleCoordinates = new google.maps.LatLng(coordinates[1], coordinates[0]);
    var pixelCoordinates = overlayProjection.fromLatLngToDivPixel(googleCoordinates);
    var proj = overlay.getProjection();
    var worldwidth = proj.getWorldWidth();
    var finalX = pixelCoordinates.x;

    if(typeof(start) === "undefined"){
        start = pixelCoordinates;
        startgeo = googleCoordinates;
    }
    else {
        if(pixelCoordinates.x > start.x && googleCoordinates.lng() < startgeo.lng()){
              finalX -= worldwidth;
        }
        else if(pixelCoordinates.x < start.x && googleCoordinates.lng() > startgeo.lng()){
             finalX += worldwidth;                     
        } 
    }
    return [finalX, pixelCoordinates.y];
}

//未经测试
//尺寸标注在外部某处
var启动；
var startgeo；
//在覆盖层内。我想添加内容。
//将叠加投影转换为d3投影
var googleMapProjection=函数（坐标）{
var googleCoordinates=new google.maps.LatLng（坐标[1]，坐标[0]）；
var pixelCoordinates=重叠投影。fromLatLngToDivPixel（谷歌坐标）；
var proj=overlay.getProjection（）；
var worldwidth=proj.getWorldWidth（）；
var finalX=像素坐标.x；
if（类型（开始）=“未定义”）{
开始=像素坐标；
startgeo=谷歌坐标；
}
否则{
如果（pixelCoordinates.x>start.x&&Google坐标.lng（）startgeo.lng（））{
finalX+=世界宽度；
} 
}
返回[finalX，pixelcoardinates.y]；
}

---

所以这是假设谷歌地图为每个坐标选择了离北美最近的屏幕位置。如果形状正确固定在一起，则如果结束经度大于开始经度，则结束像素.X也应大于开始像素.X。但是，如果投影返回了世界另一侧的一个点，那么相对于起始像素的新像素应该位于错误的方向。也就是说，现在end.x小于start.x。为了解决这个问题，我们只需按照解决问题的方向调整像素的世界宽度。希望如此。

非常感谢Ted为我指明了正确的方向-我试图将你的答案标记为正确，但不幸的是，我在编辑你的答案时仍然遇到问题

无论如何，这实现了解决方案。我们提出的策略是跟踪我们处理的最后一个点的经度。在处理新点时，如果我们看到一个点（在x方向）发生了真正的错误跳跃，我们假设它被包装好了，我们加上或减去世界的宽度，将该点从该国移回其他点

下面是overlay.draw函数中的修复内容

var markerOverlay = this;
var overlayProjection = markerOverlay.getProjection();
var worldwidth = overlayProjection.getWorldWidth();
var prevX = null;

// Turn the overlay projection into a d3 projection
var googleMapProjection = function (coordinates) {
    var googleCoordinates = new google.maps.LatLng(coordinates[1], coordinates[0]);
    var pixelCoordinates = overlayProjection.fromLatLngToDivPixel(googleCoordinates);
    if (prevX != null) {
        // Check for a gigantic jump to prevent wrapping around the world
        var dist = pixelCoordinates.x - prevX;
        if (Math.abs(dist) > (worldwidth * 0.9)) {
            if (dist > 0) { pixelCoordinates.x -= worldwidth } else { pixelCoordinates.x += worldwidth }
        }
    }
    prevX = pixelCoordinates.x;
    return [pixelCoordinates.x + 10000, pixelCoordinates.y + 10000];
}

---

你能给我们看一下你的代码吗？我刚刚上传了一个实现此修复的示例，但不幸的是，我仍然遇到同样的问题。请参阅我上面问题中的更新#1我一直在修补一个未经测试的想法。也许你可以在googleMapProjection函数中寻找翻转，并尝试在返回div坐标的地方进行更正，如回答文章所示。再次感谢你的帮助。我刚刚更新了你的答案，每个答案都有一些样本和注释。我想你试图发布的编辑被拒绝了或是其他什么。我已尝试添加变量更改。这行得通吗？还是画得不正确？谢谢ted-我刚刚发布了我们提出的解决方案，主要是受您的启发。再次感谢