Html 创建类似谷歌地图界面的建议

我正在尝试制作一些基于网络的棋盘游戏，我希望界面可以平移和缩放。就像在谷歌地图中，你可以平移和缩放地图一样，我想移动和缩放游戏板。当然，与谷歌地图不同，我不想使用图像块

有人能给我推荐使用什么技术吗？这是否适合普通HTML？HTML5画布？还是SVG？有什么特别的JS库值得推荐吗？或者完全其他的东西

我希望避免使用flash和Java。浏览器兼容性是一个优势，但不是最重要的因素。例如，我认为对于较旧的IEs来说，要求使用镀铬框架可能是可以的

---

任何想法/建议都将不胜感激。

如果您不介意平铺，我建议您查看“使用SVG的图像和矢量平铺地图的JavaScript库”。可能可以从那里借用一些零件进行平移和缩放。

一些想法：

• 使用“”策略一次加载电路板的矢量图形。（这可能是过重的重量，但与平移缩放和IE兼容。）

• 用于在SVG中构建板，用于平移缩放。RaphaelZPD不是跨浏览器的（即使Raphael是），所以您需要Chrome框架来实现IE兼容性。我想这会很轻

• 将纯SVG用于板，用于平移缩放。这里也需要Chrome框架，不过如果需要，您可以使用SVGweb。您可以在Inkscape中直接绘制电路板，清理SVG并在XML中添加您需要的任何ID（SVG在引擎盖下是XML），如果愿意，可以使用jQuerySVG与电路板交互，或者手动编写交互脚本。我提到过CSS与SVG一起工作吗我想这是你最好的选择。

• 我想不出在这里使用画布有什么好处，除非你有很多动画或位图。SVG的工作方式更加透明——它是隐藏在引擎盖下的XML，在页面中呈现时，它会成为DOM节点，可以在现代浏览器中轻松操作

• 纯HTML可能很难处理缩放。我见过很多图像缩放器，但还没有见过复杂的HTML结构，需要在缩放级别进行平移会增加复杂性

---

如果您想要完全控制您的开发环境，您可以创建自己的web渲染平台。我认为您可以使用HTMLCanvas5作为浏览器的界面

您可以使用HTML画布轻松实现拖动、平移和缩放。这种方法与许多平台中的游戏开发非常相似。为支持平移、拖动和缩放的界面使用HTMLCanvas5的示例

---

拥有对您的环境的控制权，您将拥有广泛的可能性。

我知道您提到您不想使用图像（尽管我不知道如何在没有图像的情况下构建自定义地图用户界面？），但Google的地图API允许用户使用自定义地图。他只是说他不想要“图像瓷砖”。滚动/裁剪的大型SVG不会使用图像平铺，也不会使用简单地重新绘制可见部分的纯画布解决方案。图像平铺是在浏览器中处理一组基本固定的位图的一种方便（且兼容！）的方法，但它们并不是在大面积上滚动的唯一方法。我想我确实希望避免平铺，因为我使用的是相对较小的曲面，而不是贴图本身必须覆盖的曲面。这可能会有帮助，所以我会看看。谢谢。多边形贴图太复杂了，在这种情况下根本不值得。GPAN的浏览器嗅探功能可以防止鼠标滚轮事件在Opera中放大，这不太好。