Javascript 可点击的大陆/国家地图:该走哪条路?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/8896799/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 07:58:57  来源:igfitidea点击:

Clickable continent/country maps: which way to go?

javascripthtmlgeocodingworld-map

提问by dokaspar

There are many Web sites that include clickable maps that highlight regions on mouseoverand allow the user to narrow down a selection from a world map view to a continent level. Here is an interesting example: davidlynch.org.

有许多网站包含可点击地图,这些地图突出显示区域mouseover并允许用户将选择范围从世界地图视图缩小到大陆级别。这是一个有趣的例子:davidlynch.org

Many of these clickable maps are implemented with HTML image maps, while another option is to use for example Google's GeoChart API. Concerning the HTML image maps option, I'm wondering where people get all the 'raw data', all the country and regional border polygons. Is there a free resource for that? Concerning the Google GeoChart option, I'm wondering if that is scalable or if the number of API calls are somehow limited?

许多这些可点击的地图是用 HTML 图像地图实现的,而另一种选择是使用例如Google 的 GeoChart API。关于 HTML 图像地图选项,我想知道人们从哪里获得所有“原始数据”、所有国家和地区边界多边形。有免费的资源吗?关于 Google GeoChart 选项,我想知道它是否可扩展,或者 API 调用的数量是否受到某种限制?

Does anyone have some advice on the availability of a free library that allows a straightforward implementation of clickable maps with customizable regions?

有没有人对免费库的可用性有一些建议,该库允许直接实现具有可自定义区域的可点击地图?

采纳答案by Bathz

Well it is not really a problem which could be tagged 'geocoding'.

好吧,这并不是一个可以被标记为“地理编码”的问题。

Since I have been playing with Raphael.js these days, I thought of this lib while reading your question title. I also remember Wikipedia commons hosted a SVG map of the world. Raphael helps you manipulate svg files, so that could be a nice way to go. Anyway, after searching whith the criteria 'raphael' I found a conversation matching your request, exactly. So there it is : http://groups.google.com/group/raphaeljs/browse_thread/thread/46b5402c677ce274/7ff6a6a8d8f5f9fa?pli=1

由于这些天我一直在玩 Raphael.js,所以我在阅读您的问题标题时想到了这个库。我还记得 Wikipedia commons 托管了一个 SVG 世界地图。Raphael 可以帮助您操作 svg 文件,因此这可能是一个不错的方法。无论如何,在搜索“raphael”标准后,我找到了一个完全符合您要求的对话。所以它是:http: //groups.google.com/group/raphaeljs/browse_thread/thread/46b5402c677ce274/7ff6a6a8d8f5f9fa?pli=1

There are some utility scripts, as well as the link to the svg world file mentioned above and a live examples (and links to Stack Exchange topics).
Sure there is work to do, and it may be easier to call directly the google api.

有一些实用程序脚本,以及指向上面提到的 svg world 文件的链接和一个实时示例(以及指向 Stack Exchange 主题的链接)。
当然还有工作要做,直接调用google api可能更容易。

In my experience of the gmaps API, you have to make many requests per second to be blacklisted by google. Like when you launch a heavy batch geocoding tool. So it depends of your project but I would consider quite safe to use it even if your page is popular.

根据我对 gmaps API 的经验,您必须每秒发出许多请求才能被 google 列入黑名单。就像您启动繁重的批量地理编码工具一样。所以这取决于你的项目,但我认为即使你的页面很受欢迎,使用它也很安全。

[EDIT] : There is now a live demo on RaphaelJs website.

[编辑]:RaphaelJs 网站上现在有一个现场演示

[EDIT again]: And now a complete production workflow based on Python and Raphael exists : Kartograph. It's really young but looks promising.

[再次编辑]:现在存在基于 Python 和 Raphael 的完整制作工作流程:Kartograph。它真的很年轻,但看起来很有前途。

回答by James

Check this out. Seems to serve your requirements and offers a bit more: Google Maps with Clickable Regions http://codecanyon.net/item/google-maps-with-clickable-countries/3186942

看一下这个。似乎满足您的要求并提供更多:带有可点击区域的谷歌地图 http://codecanyon.net/item/google-maps-with-clickable-countries/3186942

回答by EZMapdesign

There are two libraries I can recommend without doubt: 1. d3JSand 2. Raphael JS

毫无疑问,我可以推荐两个库:1. d3JS和 2. Raphael JS

The latter is what I was using for writing my

后者是我用来写我的

clickable map generator web application - Make a Clickable Map

可点击地图生成器 Web 应用程序 - 制作可点击地图

d3JS has a steeper learning curve, but you can do way more things with it than Raphael. On the other hand, Raphael is easier to pick up and is fun to work with.

d3JS 的学习曲线更陡峭,但与 Raphael 相比,您可以用它做更多的事情。另一方面,Raphael 更容易上手并且合作起来很有趣。

回答by Valentin Vasilyev

I second the raphael.js, it is a nice library to draw the shapes with all kinds of user interaction. As an example, you may look at this project, which is a vector map of Russia, implemented on top of the Raphael.js. It allows highlighting the regions programmatically.

我支持 raphael.js,它是一个很好的库,可以通过各种用户交互来绘制形状。举个例子,你可以看看这个项目,它是俄罗斯的矢量图,在 Raphael.js 之上实现。它允许以编程方式突出显示区域。