创建 Javascript 地图时 AREA 标签的替代方案
我有一张非常大的地图图片。现在我想创建一个地图 UI，用户可以单击以突出显示区域，并且还具有放大地图的功能。
AREA 标签是解决这个问题的唯一方法吗？我唯一的问题是，当我放大地图时，地图将被放大，它包含的图像也会被放大，但是如何根据我的缩放级别扩展区域坐标？有没有一个好的方法来解决这个问题？
I have an extremely large picture of a map. Now I want to create a Map UI where the user can click to highlight regions and also have the functionality to zoom into the map.
Is the AREA tag the only way to go at this problem? My only problem is when I zoom in the map, the will be enlarged and so will the image that it contains, but how would I expand the AREA coordinates according to my zoom level? Is there a good approach for going at this problem?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
不幸的是，AREA 是表示多边形的唯一方法。您可以从 AREA 标签读取坐标，缩放它们，然后写回。不过，处理舍入重叠是一件很痛苦的事情。
一种替代方法是使用 BING 地图 API，它允许自定义叠加层。不过，您需要为每个缩放级别创建一个叠加层。
AREA is the only way to represent polygons, unfortunately. You can read your coordinates from the AREA tag, scale them, and write them back. Rounding overlaps are a pain to deal with though.
One alternative is to use the BING maps API, which allows custom overlays. You need to create an overlay for each zoom level though.
将 css 应用到区域地图
我建议在那里使用 SVG，这也可以解决您的缩放问题。唯一的麻烦是 IE8 及以下版本不支持它，并且 IE9 尚未通过 Windows Update 推送给非测试版用户。
Apply css to AREA MAP
I suggest SVG there, which would also solve your zoom problem. The only complication is that IE8 and below won't support it, and IE9 isn't being pushed through Windows Update to non-beta users yet.
简单的选项： ImageMapster 为您计算出大多数图像区域地图的内容飞。 IE6+，需要jQuery。
更复杂、更强大的选项：Raphael.js 使您能够在 IE6+ (不需要闪存）。学习曲线有点陡峭，但它非常强大。
Simple option: ImageMapster figures out most image area map things for you on the fly. IE6+, needs jQuery.
More complex, more powerful option: Raphael.js enables you to create fully controllable fully scalable SVG vector graphics in everything from IE6+ (doesn't need Flash). Bit of a steep learning curve, but it's very powerful.