jQuery交互式地图ImageMapster的使用

最新推荐文章于 2021-06-04 08:46:01 发布

我心V飞翔

最新推荐文章于 2021-06-04 08:46:01 发布

阅读量2.5k

点赞数

分类专栏： web前端

web前端专栏收录该内容

40 篇文章 0 订阅

订阅专栏

源地址：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：鄙人翻译太烂，有很多漏洞，欢迎指出有问题的地方 jQuery交互式地图ImageMapster的使用。）

高亮选择区域

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)