JVectorMap 是一个优秀的、兼容性强的用来显示矢量地图的jQuery插件.它使用 SVG 在Firefox 3 or 4, Safari, Chrome, Opera, IE9, 同时也支持老的ie浏览器ie6到ie8.使用 jVectorMap也很简单,和其他的jQuery方法相同。
我们通常会记住创始者、发明者,比如哥伦布,乔布斯,他们的名字在人类历史中留下了很深的印记。
再如jQuery,Mootools以及那么多技术类发明者创造了很多有价值的东西。我们普通人或许一生都做不了什么大事,但是我们可以不断改变自己,做很多有意义的事情,造福于他人。
在开源工具这方面外国人创造了很多强大的工具,但是对于我们英文比较差的人来说,寻找中文文档却很难找到。我也曾尝试寻找jvectormap的中文文档,但是却没有找到,所以就自己使用谷歌 翻译然后加入自己的理解翻译出了本文,希望能对大家学习JVectormap有所帮助。
1.map
类型:字符串
描述:载入地图的名称
2.backgroundColor
类型:字符串
描述:地图背景颜色
3.zoomOnScroll
类型:布尔型
描述:当设置为true时可以使用鼠标滚轮缩放地图,否则不可以。默认值为true
4.zoomMax
类型:数值型
描述:表示地图可以显示的最大倍数,默认为8
5.zoonMin
类型:数值型
描述:表示地图可以显示的最小倍数,默认为1
6.zoomStep
类型:数值型
描述:表示点击“+”或者“-”地图放大或缩小的步数
7.regionsSelectable
类型:布尔型
描述:当设置为true时表示区域可以被选中,否则不可选中,默认为false
8.regionsSelectableOne
类型:布尔型
描述:若设置为true,则表示只能有一个被选中,默认为false
9.markersSelectable
类型:布尔型
描述:当设置为true时表示标注可以被选中,否则不可选中,默认为false
10.markersSelectableOne
类型:布尔型
描述:若设置为true,则表示只能有一个被选中,默认为false
11.regionStyle
类型:对象
描述:设置地图区域的样式,共有四种状态,分别是:initial(初始状态)、hover(当鼠标经过时的状态)、selected(被选中的状态)、selectedHover(当被选中之后鼠标经过的状态)。默认的值如下:
{ initial: { fill: 'white', "fill-opacity": 1, stroke: 'none', "stroke-width": 0, "stroke-opacity": 1 }, hover: { "fill-opacity": 0.8 }, selected: { fill: 'yellow' }, selectedHover: { } }
12.markStyle
类型:对象
描述:设置地图标注的样式,任何适用于regionStyle的均可用,另外参数r可以用来设置标注的半径
{ initial: { fill: 'grey', stroke: '#505050', "fill-opacity": 1, "stroke-width": 1, "stroke-opacity": 1, r: 5 }, hover: { stroke: 'black', "stroke-width": 2 }, selected: { fill: 'blue' }, selectedHover: { } }
13.markers
类型:对象或者数组
描述:在初始化期间添加标记,如果是数组标注的代码将设置为数组索引的字符串形式,latLng代表经纬度,name代表名称字符串。例如:
markers: [ {latLng: [34.62, 112.45], name: '河南 - 洛阳 家'}, {latLng: [34.74, 113.66], name: '河南 - 郑州 2010,2011,2012'}, {latLng: [39.95, 116.34], name: '北京 2013'}, {latLng: [38.97, 121.53], name: '辽宁 - 大连 2010-2014'}, {latLng: [29.88, 121.64], name: '浙江 - 宁波 2014.04'}, ]
14.series
类型:对象
描述:两个键分别为markers和regions,用于向地图上添加数据
15.focusOn
类型:对象或字符串
描述:设置地图的中心位置和大小,例如
{ x: 0.5, y: 0.5, scale: 2 }
16.selectedRegions
类型:数组或对象或字符串
描述:用于设置初始化显示的被选定的区域
17.selectedMarkers
类型:数组或对象或字符串
描述:用于设置初始化显示的被选定的标注
18.onRegionLabelShow
类型:函数
描述:参数分别为(Event e,Object label,String code),在区域标签被展示时执行
19.onRegionOver
类型:函数
描述:参数分别为(Event e,String code),鼠标经过该区域时执行
20.onRegionOut
类型:函数
描述:参数分别为(Event e,String code),鼠标离开区域时执行
21.onRegionClick
类型:函数
描述:参数分别为(Event e,String code),鼠标点击区域时执行
22.onRegionSelected
描述:函数
描述:参数分别为(Event e,String code,Boolean isSelected,Array selectedRegions),区域被选中时执行
23.onMarkerLabelShow
类型:函数
描述:参数分别为(Event e,Object label,String code),在标注标签被展示时执行
24.onMarkerOver
类型:函数
描述:参数分别为(Event e,String code),鼠标经过该标注时执行
25.onMarkerOut
类型:函数
描述:参数分别为(Event e,String code),鼠标离开标注时执行
26.onMarkerClick
类型:函数
描述:参数分别为(Event e,String code),鼠标点击标注时执行
27.onMarkerSelected
类型:函数
描述:参数分别为(Event e,String code,Boolean isSelected,Array selectedMarkers),标注被选中时执行
28.onViewportChange
类型:函数
描述:参数分别为(Event e,Number scale),当地图大小改变时执行
1.addMarker
描述:在地图上添加标记
参数:key 类型:字符串,标记的唯一代码
marker 类型:对象,标记的配置参数
seriesData 类型:数组,添加数据的值
2.addMarkers
描述:添加多个标记
参数:markers 类型:对象或数组,添加的标记
seriesData 类型:数组,添加的数据
3.clearSelectedMarkers
描述:清除所有被选择的标记
4.clearSelectedRegions
描述:清除所有被选择的区域
5.getMapObject
描述:返回地图实例
6.getRegionName
描述:按照区域代码返回该地区的名称,返回类型为字符串
7.getSelectedMarkers
描述:返回当前选中的标记的代码,类型为数组
8.getSelectedRegions
描述:返回当前选中的区域的代码,类型为数组
9.latLngToPoint
描述:将经纬度值转换为地图上的坐标点
10.PointToLatLng
描述:将地图上的坐标点转变成经纬度值
11.remove
描述:清除地图上的所有内容及动作
12.removeAllMarkers
描述:移除所有标记
13.removeMarkers
描述:从地图上移除一些标记
14.reset
描述:地图回到初始状态
15.setBackgroundColor
描述:设置地图背景颜色
参数:
名称 | 数据类型 | 描述 |
value | 数组 | 数据名称 |
attribute | 字符串 | 数值或者颜色,可以应用于markers和orgions的参数有fill、stroke、fill-opacity、stroke-opacity,可以应用于markers的有r |
scale | 数组 | 第一个颜色应用于最小值,最后一个应用于最大值,当然也会有一些中间颜色。默认为['#C8EEFF', '#0071A4'] |
normalizeFunction | 函数或者字符串 | linear/polynomial,默认为linear |
min | 数值 | 数据集的最小值,如果没提供会自动计算的 |
max | 数值 | 数据集的最大值,如果没提供会自动计算的 |
未经允许不得转载:射雕天龙的博客 » Jvectormap中文帮助文档(API)