Question

我使用地图坐标创建了图像地图，并且必须突出显示坐标，这是正常工作但我需要的是，要更改突出显示颜色取决于条件......在第一个条件中突出显示该区域红色然后相同的区域将以第二个条件的黑色突出显示。我可以突出显示相同的区域，但我无法同时更改该区域的颜色。

我的示例代码： Fiddle Demo

我尝试过使用

  <script>
        $(document).ready(function () //on page load
        {
            $('area[title*="UPPER"]').each(function ()//get all areas
            {
                $(this).addClass("victory");
            });

            $('area[title*="LOWER"]').each(function ()//get all areas
            {
                $(this).addClass("lose");
            });

            //initialize highlight
            $('.map').maphilight({ strokeWidth: 0, fillColor: "0000FF", fillOpacity: 0.8, singleSelect: true });

            ////map wrap
            $(".victory").click(function () {                
                //This block is what creates highlighting by trigger the "alwaysOn", 
                var data = $(this).data('maphilight') || {};
                data.alwaysOn = !data.alwaysOn;
                $(this).data('maphilight', data).trigger('alwaysOn.maphilight');
                //there is also "neverOn" in the docs, but not sure how to get it to work
            });

            $('.map').maphilight({ strokeWidth: 0, fillColor: "FFFF00", fillOpacity: 0.8});

            $(".lose").click(function () {                
                //This block is what creates highlighting by trigger the "alwaysOn", 
                var data = $(this).data('maphilight') || {};
                data.alwaysOn = !data.alwaysOn;
                $(this).data('maphilight', data).trigger('alwaysOn.maphilight');
                //there is also "neverOn" in the docs, but not sure how to get it to work
            });
        });
    </script>

Fiddle Demo

但是用第二个fillcolor覆盖了第一个fillcolor。有人帮我解决了这个问题。

Answer 1

您的代码无效，因为area.style没有background-color属性。另请注意，您没有将title设置为小提琴中的area，而是alt代替{。}}。

请注意，使用过的plug-in在图像上创建了一个过度画布元素，高亮颜色是该画布的部分透明部分。如果您希望地图的某个特定区域为黄色，则可以更改图像本身，或者使用例如叠加图像，以后可以隐藏。

无论如何，使用插件你可以做这样的事情：

$(function () {
    var data = {};
    $('.map').maphilight();
    data.alwaysOn = true;
    data.fillColor = 'ffff00';
    data.fillOpacity = '0.6';
    $('area[alt="UPPER HANOVER TOWNSHIP"]').data('maphilight', data).trigger('alwaysOn.maphilight');
});

A live demo at jsFiddle

Answer 2

工作代码如下，请查看

     $(document).ready(function() //on page load
{
     $('area').each(function()//get all areas
              {
                  var co=$(this).attr('coords');//get coords by attr from area
                  alert(co); //alert coords in alertbox
              });
 });

用于更改区域的JQuery maphighlight根据条件突出显示颜色

2 个答案: