## 地圖插件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 | 數值 | 數據集的最大值，如果沒提供會自動計算的 |
