Mapster 填充区域

Question

我使用 mapster js 来显示图像中的某些部分。在内部区域我也使用数据密钥和 class。悬停工作完美，但我需要在加载后填充这些部分，而不仅仅是在悬停时使用特定颜色。我尝试了一些例子但没有用。

$('.plan-img').mapster({
            stroke: true,
            strokeWidth: 2,
            configTimeout: 20000,
            mapKey: 'data-key',
            onClick: function(data){
                if (this.href && this.href !== '#') {
                    window.open(this.href,'_self');
                }
            },
            onConfigured:function() {

                $(".floor-plans .mapster_el").parent().hide();

            },
     
            areas:[{
                key: 'free',
                fillColor: 'A7DC96',
                strokeColor: 'A7DC96',
            },
                {
                    key: 'sold',
                    fillColor: 'ff7f7f',
                    strokeColor: 'ff7f7f',

                },
                {
                    key: 'reserve',
                    fillColor: 'ddde97',
                    strokeColor: 'ddde97',
                }
            ],
            fillOpacity: 0.3
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://trnky2.reklama.sexy/js/jquery.imagemapster.min.js"></script>
<div class="floor-plans">

<div class="plan">
    <img src="http://trnky2.reklama.sexy/img/floor-1.jpg" usemap="#floor-1" class="plan-img" data-floor="1">
    <map id="floor-1" name="floor-1">

        <area shape="rect" data-key="sold" class="sold" alt="" title="" coords="580,78,771,274" href="#" target="">
        <area shape="rect" data-key="reserve" class="reserve" alt="" title="" coords="308,81,506,273" href="#" target="">

    </map>
</div>

Answer 1

var map = $('.plan-img'),

    render = new Array();

    render["free"] = {
        fillColor: 'A7DC96',
        strokeColor: 'A7DC96',
    };

    render["sold"] = {
        fillColor: 'ff7f7f',
        strokeColor: 'ff7f7f',
    };

    render["reserve"] = {
        fillColor: 'ddde97',
        strokeColor: 'ddde97',
    };

map.mapster({        
    onConfigured: function () {

        $(this).parent().parent().find("area").each(function(){

            var type = $(this).attr("data-key");                
            $(this).mapster('set',true,render[type]);

        })
    },
    onClick: function (data) {
        if (this.href && this.href !== '#') {
            window.open(this.href, '_self');
        }
    }

});

Mapster 填充区域

Mapster fill areas

html

css

jquery

imagemapster