构建交互式地图

发布于 2024-11-09 14:17:52 字数 729 浏览 6 评论 0 原文

我的任务是构建美国所有州的交互式地图,只是想知道最好的方法是什么?

我知道我可以在 Flash 中相当轻松地构建这个,但其中一个要求是它能够在 iPhone 上运行,因此显然排除了 Flash!

要求

  1. 必须适用于所有浏览器并且 手持设备。
  2. 必须可通过 Wordpress 更新。
  3. 必须包括一个小信息框 当鼠标悬停在每个状态时会弹出。
  4. 地图的外观将被设计 由我们(我们希望完全控制 因为我们是平面设计师!)所以 这也排除了自定义 Google 地图。

我在这里进行了搜索,发现了两个例子,第一个正是我们想要的东西,但是是在 flash 中完成的 - 示例

建议使用这个,但我不'当我将鼠标悬停在每个状态上时,我不认为能够创建弹出气泡。

有谁知道有什么替代方案吗?

更新:

我喜欢的一个例子是 - Transmit 的功能部分。这是如何构建的以及我如何重新创建类似的东西?

I've been tasked with building an interactive map of all the states in the US and just wondering what the best way is to go about this?

I know I could build this fairly easily in Flash but one of the requirements is for it to work on an iPhone so obviously that rules Flash out!

Requirements:

  1. Must work across all browsers and
    handheld devices.
  2. Must be updatable via Wordpress.
  3. Must include a small info box that
    pops up when each state is hovered.
  4. The look of the map will be designed
    by us (we'd want complete control of
    this as we're graphic designers!) so
    this also rules out a custom Google
    map.

I've done a search on here and found two examples, the first is exactly the kind of thing we want but is done in flash - example

A suggestion was to use this but I don't think I'll be able to create popup bubbles when hovering over each state.

Does anyone know any alternatives?

UPDATE:

An example I like is - Transmit's feature section. How was this built and how could I recreate something like that?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

叹梦 2024-11-16 14:17:52

您可以使用普通的旧

标记并放置一些 javascript 来显示弹出窗口。

(我认为甚至可以只使用 CSS。您创建所有弹出窗口但不显示它们。在每个“美国州”的 :hover 部分中,您可以显示相应的弹出窗口。)

但是您的请求存在一个问题:将手持设备兼容性和悬停结合起来是不可能的!

对于您想做的事情来说可能太多了,但是在处理地图时(只要您对不可定制的 Google/Yahoo/Microsoft 地图不满意),我建议 OpenLayersOpenStreetMap 使用它以及其他知名网站。

不用担心 WordPress 部分。当然,如果存在现有插件,您会节省时间,但我认为这是最不重要的考虑因素。
我为 WordPress 编写了一些手工制作的插件。这真的很简单(例如与 TYPO3 相比!)

You can use the plain old <map> tag and put some javascript to show the popup.

(I think it's even possible to only use CSS. You create all the popups but don't display them. In the :hover part of each "US State", you make the corresponding popup appear.)

But there is a problem with your request: combining handheld devices compatibility and hovering is not possible!

It may be too much for what you want to do, but when dealing with maps (as long as you're not happy with a non-customizable Google/Yahoo/Microsoft map), I'd recommend OpenLayers. OpenStreetMap use it as well as other well-known websites.

Don't worry about the WordPress part. Of course you would save time if an existing plugin exists but I think this is the least important thing to consider.
I coded a few hand made plugins for WordPress. It's really easy (compared to TYPO3 for example!)

抱着落日 2024-11-16 14:17:52

我知道这个帖子已经有几个月了,但以防人们仍在寻找。
我创建了一个 WordPress 插件,它可以满足您的需求。查看您可以使用它做什么的示例:

http: //cmoreira.net/interactive-world-maps-demo/usa-custom-election-map/

它并不符合您的所有要求,但它也是一个不错的选择。

I know this thread is already a few months old, but in case people are still looking.
I created a wordpress plugin that is able to do what you need. Check out an example of what you can do with it:

http://cmoreira.net/interactive-world-maps-demo/usa-custom-election-map/

It doesn't fit all your requirements, but it can be a good option also.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文