javascript - 在 JS 地图上使用 Ctrl+单击选择

Question

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

我试图在脚本的最底部将 MoouseOver 和 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

Each area tag must have an unique id:

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

Then add following JavaScript code:

$('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');
});

You might use a style class instead of area as a selector if you're gonna have more than one map on your webpage.

Find another example here:

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

If you need to evaluate selected provinces/countries, then you might use jQuery maphilight (if they provide you such a method) or add/remove selected areas to an array in your JavaScript code.