maphilight添加click事件

修改jquery-maphilight.min.js源码添加click事件

源码中的修改

//点击事件触发时，关闭之前选中区域
if(b.trigger === 'click') L(T);

if(O.trigger === 'click'){//点击事件的绑定方式
  F(Q).trigger("alwaysOn.maphilight").find("area[coords]").bind("click.maphilight", X);
    }else if(O.trigger === 'mouse'){//鼠标事件的绑定方式
        F(Q).trigger("alwaysOn.maphilight").find("area[coords]").bind("mouseover.maphilight", X).bind("mouseout.maphilight",
            function(Z) {
                L(T)
            });
    }
 F.fn.maphilight
 U.before(T);
 U.addClass("maphilighted")
//新增返回值,初始化完成后返回一个对象，提供一些基础操作方法
return new Object({            
    hilightDom: function(dom){
        if(O.trigger === 'click'){//点击事件的绑定方式
            F(dom).trigger('click.maphilight');
        }else if(O.trigger === 'mouse'){//鼠标事件的绑定方式
            F(dom).trigger('mouseover.maphilight');
        }
    }
})

F.fn.maphilight.defaults = {
    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,
    //新增触发类型 click为点击事件, mouse为鼠标移入移出事件
    trigger: 'mouse',
    callback: function(e){}
}

由于使用的压缩版js,可能可读性较差（贴图）

HTML代码片段

<!--使用高版本jquery请调用jquery-migrate-1.2.1.min.js，低版本可不用-->
<script type="text/javascript" src="./js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="./js/jquery-maphilight.min.js"></script>

<script>
	// 地图调用
	$.fn.maphilight.defaults = {
		fill: true,
		fillColor: 'F7D315',
		fillOpacity: 0.7,
		stroke: true,
		strokeColor: 'ff8b19',
		strokeOpacity: 1,
		strokeWidth: 3,
		fade: true,
		alwaysOn: false,
		neverOn: false,
		groupBy: false
	}


	//新增返回值,初始化完成后返回一个对象，提供一些基础操作方法
	//hilightDom函数参数为一个需要高亮区域的dom对象，传入对应dom对象可以使对应区域高亮，并触发callback
	var maphilight = $("#map_image").maphilight({
		//新增触发类型 click为点击事件, mouse为鼠标移入移出事件
		trigger: 'click',
		//新增回调事件,点击事件触发时回调
		callback: function(e){
			console.log(this); //this为当前点击的区域area标签
			console.log(e); //e为事件对象
			$(".mapPath").hide();
			$(this).next().show();
		}
	});
	//hilightDom使用示例
	//点击地区导航，高亮地图对应区域
	$('.city-navs a').click(function(){
		var area_id = $(this).attr('area_id');
		maphilight.hilightDom($('.mapBtn[area_id="'+area_id+'"]'));
	})
</script>

图示（如下）