Google maps 在谷歌地图上覆盖d3路径？

我正在尝试使用d3.geo和GeoJson将地图覆盖到Google地图上。我已经设法强迫d3使用谷歌地图的投影来绘制路径，这非常简单。以下是我目前掌握的情况：

这在我放大和缩小时效果很好：

但当我平移时，SVG覆盖也会移动，因为它的大小是固定的，所以形状会被截断：

---

有人用过这样的东西吗？你知道我能从这里走到哪里吗？上面的示例是一个独立的HTML文件，如果有人想使用它的话。

我能够在缩放级别解决这个问题，方法是将svg放大，添加一些填充，并提供一个负的顶部和左侧位置，如下所示：

    .SvgOverlay, .SvgOverlay svg {
        position: absolute;
        top: -250px;
        left: -250px;
        padding: 500px;            
    }

    var svg = layer.append("svg")
          .attr("width", 1000)
          .attr("height", 1000)

如果您想允许用户进一步放大，则必须增加所有这些数字。例如，将它们增加10倍似乎可以解决所有缩放级别的问题。但是，您可能希望限制用户的缩放能力，因为随着您进一步放大，svg覆盖的有用性会降低

这里有一把小提琴来演示这个想法。

---

编辑：正如赫伯指出的，这种方法在Firefox上不起作用。

一个选项是将初始地图大小设置为非常大的值，比如1000 x 1000像素或更大。这将强制SVG覆盖在可视区域内渲染（这似乎是Firefox的限制）。我意识到这可能会影响到网站的设计，所以你可能想考虑用DIV来包装地图来隐藏溢出。< /P>

#map-wrap {
    width: 500px;
    height: 500px;
    overflow: hidden;
}

#map {
    width: 1000px; /* just big enough to show the whole thing at zoom #6 */
    height: 1000px;
}

贴图渲染后，可以将贴图大小重新调整为所需大小（500 x 500），然后将贴图重新居中。这可以在

bounds\u changed

事件中完成：

google.maps.event.addListener(map, 'bounds_changed', function() {
    $map.css({ height: '500px', width: '500px' }); // back to desired dims
    google.maps.event.trigger(map, 'resize'); // trigger a 'refresh'
    map.setCenter(new google.maps.LatLng(-18.2, 35.1)); // re-center map
    google.maps.event.clearListeners(map, 'bounds_changed'); // don't do this again
});

（在Firefox和Chrome中测试）

一些警告：

您想让人们放大得越远，渲染初始“临时”贴图所需的空间就越大。例如，如果要允许缩放级别7，则可能需要制作初始贴图2000 x 2000以进行补偿。显然，在渲染如此大的贴图时存在性能问题。正如所指出的，限制缩放级别可能是明智的

由于在最后一分钟重新调整大小，地图重新调整时会出现闪烁。您可能想考虑使用jQuery隐藏/显示该地图，或者在所有地图之上放置一个白色覆盖，直到地图完成重新调整大小。

在屏幕中，svg的宽度和高度被设置为8000 x 8000，这似乎可以达到9-10级的缩放级别。顶部和左侧设置为-4000 x-4000以使其居中。最后，投影被移动/偏移，以便在svg的中心绘制：

放大svg并将其居中：

.SvgOverlay svg {
    position: absolute;
    top: -4000px;
    left: -4000px;
    width: 8000px;
    height: 8000px;        
}

return [pixelCoordinates.x + 4000, pixelCoordinates.y + 4000];

偏移投影：

.SvgOverlay svg {
    position: absolute;
    top: -4000px;
    left: -4000px;
    width: 8000px;
    height: 8000px;        
}

return [pixelCoordinates.x + 4000, pixelCoordinates.y + 4000];

---

有趣。看起来您可以将数字设置为任意高（例如，顶部/左侧：2500000px，填充：5000000px等），而不会出现任何问题。这似乎只适用于webkit浏览器，但在firefox中，它仍然会切断形状。此外，我同意在这种情况下，放大近距离不是很有用，但在其他可视化场景中（例如，在不同位置放置根据某个指标大小的气泡）。谢谢，Derek。这在首次加载时起作用-最初隐藏的贴图部分在平移时渲染良好。但是，无论您将

#map

的原始尺寸设置得多大，当您放大一个级别然后平移时，SVG在Chrome和Firefox中都会被裁剪为500x500。这是因为你重置了

$map

监听器中

bounds\u changed

的维度，这让我们回到了开始的地方。无论如何，这种方法仍然非常有限——实际地图画布越大，你必须等待Google加载的底图图像就越多。而在@Districe的方法中，您可以将SVG设置为任意大，唯一的结果是浏览器必须使用更大的数字进行计算。在这种情况下，为什么不将SVG设置为极大，并偏移投影以在中心绘制？我已经用一个例子更新了我的答案。回想起来，一次渲染整个场景时，性能并不太好。我可能会有另一个解决方案，将SVG保持在500 x 500，但会将其移动，使其充当窗口。内部投影也需要偏移。如果它能工作，在任何缩放级别上的性能都会非常好。德里克-选项1看起来可能是赢家。也许可以把它分解成一个单独的答案？