jQuery交互式地图ImageMapster的使用

源地址：http://blog.sina.com.cn/s/blog_7377e38d0106egt4.html

官网文档地址：http://www.outsharked.com/imagemapster/default.aspx?docs.html

下载地址：https://github.com/jamietre/ImageMapster

最近要求使用ImageMapster给地图设置效果，但网上关于它的说明文档竟然全是英文的，看着不太方便，于是自己动手简单翻译了一下以便在应用中参考，也分享给一些需要它的人。（ps：鄙人翻译太烂，有很多漏洞，欢迎指出有问题的地方。）

 

高亮选择区域

fillColor:'000000' //填充颜色设置。
fillOpacity: 0.2  //不透明度，值为0-1。
stroke: true //轮廓描边，当鼠标悬停或显示高亮时给所在区域描边。
strokeColor: 'ff0000' //轮廓的描边颜色。
strokeOpacity: 1 //轮廓描边的不透明度。
strokeWidth: 1 //轮廓描边的宽度。
fade: true //当鼠标悬停显示高亮时使用颜色衰减效果。
fadeDuration: 150 //淡入（渐现）效果的衰减时间，以毫秒为单位。
isSelectable: true | false //地图或地图上的某个区域能被选择或取消选择。
isDeselectable: true | false //地图或地图上的某个区域能被取消选择。
staticState: null | true | false//地图或地图上的某个区域能永久保持被选择或取消选择的状态。

 

通过使用替换图像创建炫酷特效

altImage: urlstring //被用来做鼠标悬停和高亮效果资源的图片。
altImageFill: true //是否填充资源图像
altImageStroke: false //是否为资源图像描边
altImageOpacity: 0.7 //资源图像不透明度

 

绑定影像地图到一个外连表

boundList: null |jQuery-object //jQuery插件对象元素绑定到地图。
onGetList: null | function//回调提供关于影像地图的汇总数据的mapster的初始化，并且预期返回一个jQuery插件列表。
   {
      key:'key',      // 地区或地区组合的初级mapKey。
      value: 'value',  // 地区或地区组合的mapValue。
      options ={}     // 定义这个组合的具体设置。
      areas =[]       // 构成这个组合的地区数组。
   }
function getListHandler(data) {
       for (var i=0;i
           element = ... //用data[i].key &data[i].value创建一个HTML元素 
           myListContainer.append(element);
       }
       // 不返回容器-只有实际元素组成列表。
       return myListContainer.children();
   }
sortList: false | 'asc' | 'desc' //调用onGetList之前对值进行排序。

 

为地区或地区组显示浮动提示

showToolTip: false| true //启用提示。
$('#some_img').mapster({
       ...
       areas:  [{
              key: "TX",
              toolTip: "Don't mess with Texas"
           }
       });
toolTipContainer: '

' | html string | jQuery object//HTML描述一个用来被创建提示的弹出泡泡窗口。
toolTip: 'text' | jQuery object //地区的提示数据。
toolTipClose: ['area-mouseout'] | string array with one or more of'area-mouseout', 'tooltip-click' | null //说明关闭提示的行为。
onShowToolTip: null | function //当提示被创建的时候回调。
function showToolTipHandler(data) {
        // this = 将地区元素绑定到提示。
        //data = {
               toolTip: 提示的jQuery对象的容器。
               areaOptions: { area_options },
               key: map key for this area,
               selected: true | false
        };
   }
tooltip: 显示/隐藏提示代码
$('area').mapster('tooltip') //激活提示绑定至应用的地区。
$('img').mapster('tooltip',"key") //根据"key"确定激活地区的提示。
$('img').mapster('tooltip'); 去除主动提示。

 

使用组合和差除遮罩的方法来实现复杂的功能

includeKeys: '' |'group1,group2,...' //当渲染一个地区或一个地区组的时候，同时也渲染指定的其它组的地区或地区组合。
isMask: false | true //这个地区是一个遮罩而不是一个高亮地区。

{
       areas: [
           { key: "outer-circle",
             includeKeys: "outer-circle-mask" // 当这个地区是高亮状态时将遮罩包括进去。
           },
           {
               key: "outer-circle-mask",
               isMask: true // 将内圈被视为一个遮罩，但是只有在 "outer-circle-mask" 组环境下才可以。
           }
           // 针对"inner-circle"没有特别需要的选项-鼠标悬停时我们让它被正常处理。

       ];
}
noHrefIsMask: true | false//把含有（或丢失）onhref属性的地区当成是遮罩，默认值是true。     

 

自动缩放影像地图至任何尺寸显示，甚至在活动时也可以
scaleMap:true | false //自动缩放影像地图来匹配一个dynamically-scaled图像。

resize:改变图像和地图的尺寸。
$('img').mapster('resize',width,height,duration);
   ---
   image: new width of the image  OR
   height: new height of the image
   duration: (optional) 0 | milliseconds (to animate theresizing)

 

使用过程（注：以下这段实例出自http://site518.net/jquery-interactive-image-maps/）

先引入jQuery库和ImageMapster插件

添加图片并设置热点

最后初始化，以下是最简单的设置

$('img').mapster(
 {
 stroke: true,
 isSelectable: true,
 singleSelect: true,
 mapKey: 'name',
 listKey: 'name'
 }
);