首页 > 网站开发 > 地图插件Jvectormap使用实例及中文帮助文档

地图插件Jvectormap使用实例及中文帮助文档

最后更新: 2015-06-25    浏览次数:     

Jvectormap能做什么?

使用Jvectormap插件, 可以做出想截图效果一样的地图:

地图插件Jvectormap使用实例及中文帮助文档 - diê-biāng - 1

jvectormap中国地图(部分地区地图)

具体效果点击:

本文例子下载: jvectormap中国地图使用说明

例子里头有详细中文说明: 颜色设置, 背景颜色的设置, 透明度设置, 边框设置, 地图区域样式(初始状态, 鼠标经过状态, 选中状态,被选中之后鼠标经过的状态), 地图位置初始化及大小, 各地区的名字显示与事件响应

官网链接1:  http://jvectormap.com/maps/countries/china/

官网链接2:  http://jvectormap.com/examples/world-gdp/

Jvectormap的简单使用?

1, 首先下载官网提供的最新插件包: 下载点击, 或者自己通过官网页面自己提取以下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=”jquery-jvectormap-cn-mill-en.js”></script> <!– 中国地图文件 –>

3, 调用地图:

在你需要展示地图的区域添加调用代码:

如: <div id=”china-map”> </div> 区域是我用于展示地图的区域.
 

<script>
$(function()
{
$(‘#china-map’).vectorMap
(
{
map: ‘cn_mill_en’,
}
);
});
</script>

这样子, 就可以创建一个简单的中国地图了! 但是我的还需要配置更多的东西, 如: 背景, 颜色, 提示等:

Jvectormap的参数配置?

在简单使用的基础上, 我们可以在 function(){ } 代码中添加更多东西, 来配置地图:

比如:
 

<script>
$(function(){
var dataStatus = [
{ id: ‘CN-37′, name: ‘山东, 本来是显示英文: shandong’, event: ‘ ‘, url: ‘ ‘ },
{ id: ‘CN-11′, name: ‘北京’, event: ‘ (点击, 可以调转到#beijing的链接) ‘, url: ‘http://blog.diebiang.com/#beijing’ },
{ id: ‘CN-62′, name: ‘甘肃’, event: ‘ ‘, url: ‘http://blog.diebiang.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 数值 数据集的最大值,如果没提供会自动计算的