自定义 jQuery 交互式 SVG 地图插件

Question

背景 - 我正在为一小群酒店开发一个网站。他们当前的站点有一个图像地图，上面有指向每个位置的标记。问题是图标太大，而且正在建造太多的新酒店，继续这样做是不切实际的。没有空间了。

我的解决方案 - 我在 Codecanyon.com 上找到了 jQuery Interactive SVG Map Plugin，它运行得非常好。我可以确定位置，添加标记，而且地图有很多功能，几乎是完美的解决方案。 http://codecanyon.net/item/jquery-interactive-svg-map-plugin/1694201

问题 - 虽然地图已经做了很多，但它并没有完成我需要的一切。以下是我要完成的工作的简短列表：

1. 单击某个状态会使状态在视图框中居中并放大到最大值。

听起来很简单，对吧？该插件有一个“setViewBox”方法，用于设置默认视图框，如果我调用它 onClick 我可以让它做我想做的事，放大并居中状态。然而，这是正在发生的事情：

1. 像这样跳到更近的视图框不会自动缩放标记，这是消除站点当前面临的混乱问题所必需的。此外，它不会影响地图的“缩放”级别。假设我可以从 1-5 放大。我单击一个状态，看起来好像我跳到缩放 5，但是当我开始缩放时它从 1 开始，因此我可以比我预期的更远地放大而不是缩小。我希望我没有混淆。
2. 平移也有类似的情况。如果我像我一样更改视图框以获得所需的结果，单击并按住平移会突然使地图偏离位置，就好像光标认为我单击了其他地方一样。

我很想给你一些代码示例，但我不知道从哪里开始。我无法复制/粘贴插件，而且我的代码很少。

我要问的是，是否有人对这个插件有经验，并且可以提供一些关于在不影响缩放、平移和缩放标记的情况下操作视图框的建议。谢谢。

Answer 1

这是另一个 jQuery 交互式 SVG 世界地图：http://bit.ly/QtBrrr 它是纯 HTML5 和可自定义的弹出窗口。

Answer 2

你可以试试jVectorMap。这是一个类似的解决方案，但它是完全免费的。 API 包含setFocus 方法，该方法允许将视口设置到某些区域而不会出现问题。