1

我为一个侦察营地编写了一个在线预订系统。我正在尝试创建的是一个交互式站点地图，希望预订的人可以简单地点击他们希望露营的球场。

到目前为止，我已经获得了从我的 SQL 数据库中提取坐标的图像地图，并根据该日期范围内是否已经预订了音高来为区域着色。

https://www.drumhill.org.uk/test-map.asp?startDate=2021-11-05&endDate=2021-11-08

我正在努力解决的是，对于绿色（=可用）音高，我希望它们在单击（=选中）时变为黄色或其他东西，然后在再次单击（=取消选中）时再次变回绿色。

我已经看到文档中有一个示例完全符合我的要求： https ://projects.davidlynch.org/maphilight/docs/demo_features.html “星”显示了我想要的行为......但是我认为我缺乏 JavaScript（或 jQuery）知识让我有点退缩。

4

1 回答 1

0

您非常接近收到预期的结果。

在当前页面上为该元素初始化插件时将选项传递给方法。

<script>
$("img.map").maphilight( {
    fill: true,
    fillColor: '000000',
    fillOpacity: 0.2,
    stroke: true,
    strokeColor: 'ff0000',
    strokeOpacity: 1,
    strokeWidth: 1,
    fade: true,
    alwaysOn: false,
    neverOn: false,
    groupBy: false,
    wrapClass: true,
    shadow: false,
    shadowX: 0,
    shadowY: 0,
    shadowRadius: 6,
    shadowColor: '000000',
    shadowOpacity: 0.8,
    shadowPosition: 'outside',
    shadowFrom: false
} );
</script>

这将使用“map”类为当前页面上的所有 img 元素初始化 maphilight 插件。记得根据自己的喜好调整颜色:-)

刚刚在您的网站上尝试过，通过在开发者控制台中运行：

$("img.map").maphighlight();

选择元素时，您的所有自定义颜色似乎都在起作用。

于 2021-11-08T09:09:42.780 回答