Question

我想创建一个地图，其中的部分根据输入表单上的复选框选择分配颜色。我读过的大部分内容都描述了可点击的图片地图，可以在onclick或onhover上更改颜色。这对我的地图来说不是必需的。目的是将选定的部分保存在输入表格中，然后在显示屏幕上显示彩色区域，这些区域无法在onclick或onhover上更改。我想将其用作疏散地图，让用户知道要撤离的区域。

我已经研究过ImageMapster，它可能很有用，但我还没弄清楚如何合并它。

以下是一些我希望在某种组合中使用的示例。

jsfiddle.net/jamietre/hD6bM /

jsfiddle.net/BH79/xqaFX /

同样，我真正需要的是带有复选框选项的基本形式，然后在保存时用颜色更新地图选择。谢谢你的帮助！

Answer 1

如果您需要使用imagemap并且可以使用imagemapster（实际上相当不错），那么您可以执行以下操作：

工作示例：http://jsfiddle.net/hD6bM/130/

HTML

为每个复选框指定唯一标识符，以便您知道要突出显示的地图区域（在此示例中为值为“华盛顿”的ID）。
为每个区域指定相同的标识符（我只使用了imagemapster示例附带的默认“完整”属性）。

jQuery

在地图上启用imagemapster并禁用默认突出显示和区域选择。
```
$('img').mapster({
    isSelectable: false,
    highlight: false
});
```
为点击的地图区域创建一个样式（只是一个示例，请参阅imagemapster documentation了解不同的可能性。）
```
clickedOptions = {
    fill: true,
    fillColor: '00ff00',
    stroke: true,
    strokeColor: '000000',
    strokeWidth: 1
};
```

单击复选框时切换新样式。

$('.checkbox').toggle(function () {
    $("[full='" + $(this).attr('id') + "']").mapster('set', true, clickedOptions); // Clicked fill
}, function () {
    $("[full='" + $(this).attr('id') + "']").mapster('set', false); // Back to no fill
});

这只是一个示例......可能有更好的方法来定位您的元素，但这一切都取决于代码的其余部分最终如何工作。

修改

注意到我误解了你的问题，上面是关于复选框的点击。如果您希望仅在表单提交后更新地图，则可以将上述代码修改为：

// On submit highlight selected areas. $( "form" ).submit(function( event ) { $('.checkbox').each(function(i, obj) { if ($(this).is(':checked')) { $("[full='" + $(this).attr('id') + "']").mapster('set', true, clickedOptions); } else { $("[full='" + $(this).attr('id') + "']").mapster('set', false); } }); event.preventDefault(); });

这是另一个工作示例：http://jsfiddle.net/hD6bM/132/

保存输入表单后的ImageMap颜色更改

1 个答案: