## 地图插件Jvectormap使用实例及中文帮助文档
## Jvectormap能做什么?
使用Jvectormap插件, 可以做出想截图效果一样的地图:
jvectormap中国地图(部分地区地图)
官网链接1: http://jvectormap.com/maps/countries/china/
官网链接2: http://jvectormap.com/examples/world-gdp/
## Jvectormap的简单使用?
1, 首先下载官网提供的最新插件包: [下载点击](http://jvectormap.com/download/), 或者自己通过官网页面自己提取以下4个文件即可!
根据版本不同, 文件名字略有不同, 以下都以 1.2.2版本的中国地图 来举例说明.
2, 在需要展示地图的网页中引入以下四个文件:
~~~
<link rel=”stylesheet” href=”jquery-jvectormap-1.2.2.css” type =”text/css” media=”screen”/> <!– jvectormap地图样式文件 –>
<script src=”jquery-1.8.2.js”></script> <!–– jquery文件 ––>
<script src=”jquery-jvectormap-1.2.2.min.js”></script> <!–– jvectormap库文件 ––>
<script src=”http://jvectormap.com/js/jquery-jvectormap-cn-merc.js”></script> <!–– 中国地图文件 ––>
~~~
3, 调用地图:
在你需要展示地图的区域添加调用代码:
如: 区域是我用于展示地图的区域.
~~~
<script>
$(function(){
var dataStatus = [
{ id: ‘CN-37′, name: ‘山东, 本来是显示英文: shandong’, event: ‘ ‘, url: ‘ ‘ },
{ id: ‘CN-11′, name: ‘北京’, event: ‘ (点击, 可以调转到#beijing的链接) ‘, url: ‘http://www.jvectormap.com/#beijing’ },
{ id: ‘CN-62′, name: ‘甘肃’, event: ‘ ‘, url: ‘http://www.jvectormap.com/#gansu’ },
];
<!– id, name 都在 jquery-jvectormap-cn-mill-en.js 文件中, 默认name用英文显示, 可以通过以上设计, 将id 与 中文名称对应起来(也可以在 jquery-jvectormap-cn-mill-en.js 文件中将城市的英文名字改为中文名), 并且可以添加 event 和url , –>
$(‘#china-map’).vectorMap({
map: ‘cn_mill_en’,
backgroundColor: “#74c9d9″, <!– 背景颜色 –>
color: “#13FF60″, <!– 颜色 –>
hoverColor: false,
regionStyle: {
initial: {
fill: ‘white’,
“fill-opacity”: 1,
stroke: ‘none’,
“stroke-width”: 0,
“stroke-opacity”: 1
},
hover: {
fill: ‘green’, <!– 颜色 –>
“fill-opacity”: 0.1,<!– 透明度 –>
stroke: ‘#ffffff’, <!– 边框颜色 –>
“stroke-width”: 2, <!– 边框宽度 –>
“stroke-opacity”: 1
},
selected: {
fill: ‘yellow’
},
selectedHover: {
}
},
<!– 设置地图区域的样式, 共有四种状态, 分别是 initial(初始状态), hover(当鼠标经过时的状态), selected(被选中的状态), selectedHover(当被选中之后鼠标经过的状态) –>
focusOn:
{
x: 0.5,
y: 0.51,
scale: 1.43
},
<!– 地图位置初始化, 及大小 –>
//显示各地区名称和活动
onRegionLabelShow: function (event, label, code) {
$.each(dataStatus, function (i, items) {
if (code == items.id) {
label.html(items.name + items.event);
}
});
},
//点击有活动的省份区域，打开对应活动列表页面
onRegionClick: function(event, code){
$.each(dataStatus, function (i, items) {
if ((code == items.id) && (items.event != ”)) {
window.location.href = items.url;
}
});
},
//鼠标移入省份区域，改变鼠标状态
onRegionOver: function(event, code){
$.each(dataStatus, function (i, items) {
if ((code == items.id) && (items.event != ”)) {
$(‘#europe-map’).css({cursor:’pointer’});
}
});
},
//鼠标移出省份区域，改回鼠标状态
onRegionOut: function(event, code){
$.each(dataStatus, function (i, items) {
if ((code == items.id) && (items.event != ”)) {
$(‘#europe-map’).css({cursor:’auto’});
}
});
}
});
});
</script>
~~~
## 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 | 数值 | 数据集的最大值，如果没提供会自动计算的 |
