1

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

我的解决方案 - 我在 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. 平移也有类似的情况。如果我像我所做的那样更改视图框以获得所需的结果,单击并按住平移突然使地图偏离位置,就好像光标认为我单击了其他地方一样。

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

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

4

2 回答 2

1

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

于 2012-10-10T13:06:04.843 回答
0

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

于 2012-11-01T14:58:47.690 回答