Ajax交互式地图

时间:2012-10-10 17:50:10

标签: jquery ajax map interactive

我是这个论坛的新手,也是jquery和ajax的新手。所以,我正在尝试创建一个交互式地图。但是,在地图旁边会有一个表单(例如带有复选框)。比如,我们有一张欧洲地图和一个表格,其中包括“有海”或“有英语作为主要语言”或“有超过[用户定义的价值]公民”等选项。当用户选择选项时,将查询数据库,查找满足所选条件的所有国家/地区。然后,这些国家/地区在地图上突出显示,可以点击,而其他国家则不可点击。我希望这可以在不重新加载页面的情况下发生,因此我将不得不使用ajax并且可能使用jquery和SVG映射。是对的吗?还有其他解决方案吗?

问题是,互联网上是否有可修改的内容?我用Google搜索,但没有发现任何相似的东西。正如我所说,我在ajax和jquery方面经验不足,所以我无法从头开始。

感谢您的帮助。

2 个答案:

答案 0 :(得分:1)

Google Maps API提供您所需的功能。您可能需要仔细查看Overlay和Layers类,它们为您提供地图上的绘图功能(如覆盖区域的poligon)。

此外,您需要将所有数据放在一个单独的位置,因为Google Maps API根本不提供任何数据。

我不同意@thatidiotguy,因为这看起来并不那么困难。

  1. 创建覆盖指定区域的多边形;
  2. 在该国家/地区放置一个可点击标记以显示任何其他标记 相关信息。
  3. 祝你好运:)

答案 1 :(得分:1)

我建议使用 Google Geochart API 。我认为它在视觉上会更好看,并且更容易突出显示这些国家。 如果您的数据库构建良好,那么动态构建交互式地图并不困难。我已经使用geochart API构建了一个wp插件,并且在后端我有一个很大的表单,因此用户可以输入数据和ech时间更改字段,地图的预览会随时更改。所以,非常类似于你想做的事情。 在这里查看api:https://developers.google.com/chart/interactive/docs/gallery/geochart

,所以你知道我能用它做什么: http://cmoreira.net/interactive-world-maps-demo/administration-screenshots/

希望它有所帮助! 干杯