将鼠标悬停在地图上时，取消选择图像映射的选定区域

Deselect a selected area of imagemap when hovering over the map

本文关键字：映射 图像 选择 区域 取消 悬停 鼠标 地图      更新时间：2023-09-26

我已经使用ImageMapster成功创建了一个图像映射.js，但我遇到了一个问题。我的客户希望在页面加载时选择一个区域，当用户将鼠标悬停在地图上时，所选区域将变为取消选择状态，并且行为与其他区域类似。但是，我似乎无法弄清楚如何实现这一目标。所选区域始终保持选中状态。这是我的初始代码：

$('#mpMap').mapster({
map: $('#mpMap'),
mapKey: 'data-key',
set: true,
fillOpacity: .6,
fillColor: 'faf7db',
stroke: true,
strokeColor:'faf7db',
strokeWidth: 1,
scaleMap: true,
clickNavigate: true,
isSelectable: false,
areas:  [{
key: "area_1", 
selected: true,
}],
});

我知道使用 selected： true 会使区域始终处于选中状态，但这是我能找到的唯一在页面加载后直接选择该区域的功能。我正在尝试弄清楚如何创建一个新状态，该状态将在鼠标悬停时重置所有初始设置。我尝试了几件事（例如修改披头士乐队的演示代码），但我无法在 mousover 上取消选择area_1。

我希望有人可以帮助我或告诉我这个脚本是否可能。

我不确定我是否理解你的意思，但你可以尝试以下解决方法。图像映射器行为的默认值，当您选择一个区域时，该区域将标记为选中（默认情况下，它具有描边和填充模糊背景）。我只是更改选项render_select使其视觉效果像正常情况一样

$("#fixImage").mapster({
            render_select: {
                stroke: false,
                fill: false
            },
            ...
});
相关文章：