javascript - 使用 Ctrl+单击 JS map 进行选择

Question

我正在根据 map 上的点击来选择一组邮寄地址。我找到了一个随时可用的解决方案。这是俄罗斯 map ，所有区域都已标记。区域在 MouseOver 事件上更改颜色，这很好。现在我需要使用 Ctrl+Click 使这些区域保持选中状态，但我似乎无法弄清楚这一点。这是http://jsfiddle.net/LxtMY/8/

我试图在脚本的最底部将 MouseOver 和 MouseOut 事件更改为 event.CtrlKey :

F(Q).trigger("alwaysOn.maphilight").find("area[coords]").bind("mouseover.maphilight",X).bind("mouseout.maphilight",function(Z){L(T)});
U.before(T);
U.addClass("maphilighted")

但这并没有产生任何结果。也许我在编辑错误的东西。

Answer 1

每个area标签必须有一个唯一的id:

<area id="murmansk" ... />

然后添加以下 JavaScript 代码:

$('area').click(function(e) {
   e.preventDefault();
   var id = e.currentTarget.id;
   var data = $('#' + id).mouseout().data('maphilight') || {};
   data.alwaysOn = !data.alwaysOn;
   $('#' + id).data('maphilight', data).trigger('alwaysOn.maphilight');
});

如果您的网页上有多个 map ，您可以使用样式类而不是 area 作为选择器。

在这里找到另一个例子:

• > http://davidlynch.org/projects/maphilight/docs/demo_features.html

如果您需要评估选定的省份/国家，那么您可以使用 jQuery maphilight(如果他们为您提供了这样的方法)或在 JavaScript 代码中将选定区域添加/删除到数组。