JVectorMap 基于 jQuery 优秀的地图插件

发布于 2017-07-13 14:31:44 字数 11081 浏览 3104 评论 0

JVectorMap是一个优秀的、兼容性强的jQuery地图插件。它可以工作在包括IE6在内的各款浏览器中，矢量图输出，除官方提供各国地图数据外，用户可以使用数据转换程序定制地图数据。

它使用 SVG 可以兼容Firefox 3/4、 Safari、 Chrome、 Opera、 IE9等浏览器，同时也支持老版本的IE浏览器，从IE6到IE8，使用 jVectorMap也很简单，和其他的jQuery方法相同，在初始话地图的时候你也可以提供参数去改变地图的样式。

使用方法

1、首先要下载JVectorMap插件包。

http://jvectormap.com/download

2、引入必需的文件，包括样式表、jQuery框架、jVectorMap库、中国地图数据库：

<link href="style/jquery.vector-map.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.vector-map.js"></script>
<script type="text/javascript" src="js/china-zh.js"></script><!—中国地区数据库-->

3、指定地图放置区域HTML标签：

<div id="container"></div>

4、编写JavaScript函数，实现所需功能：

<script type="text/javascript">
$(function() {
　　/*id为中国省份标识符，name为对应省份名称，两者固定。event为活动情况，
　　url为活动列表页面地址，数据可后台动态生成，这两项有活动的地区填写，无则留空。*/
　　var dataStatus = [
　　　　{ id: 'HKG', name: '香港', event: '', url: '' },
　　　　{ id: 'HAI', name: '海南', event: '', url: '' },
　　　　{ id: 'YUN', name: '云南', event: '', url: '' },
　　　　{ id: 'BEJ', name: '北京', event: '(3个活动)', url: '/event/1' },
　　　　{ id: 'TAJ', name: '天津', event: '', url: '' },
　　　　{ id: 'XIN', name: '新疆', event: '', url: '' },
　　　　{ id: 'TIB', name: '西藏', event: '', url: '' },
　　　　{ id: 'QIH', name: '青海', event: '', url: '' },
　　　　{ id: 'GAN', name: '甘肃', event: '', url: '' },
　　　　{ id: 'NMG', name: '内蒙古', event: '', url: '' },
　　　　{ id: 'NXA', name: '宁夏', event: '', url: '' },
　　　　{ id: 'SHX', name: '山西', event: '', url: '' },
　　　　{ id: 'LIA', name: '辽宁', event: '', url: '' },
　　　　{ id: 'JIL', name: '吉林', event: '', url: '' },
　　　　{ id: 'HLJ', name: '黑龙江', event: '', url: '' },
　　　　{ id: 'HEB', name: '河北', event: '', url: '' },
　　　　{ id: 'SHD', name: '山东', event: '', url: '' },
　　　　{ id: 'HEN', name: '河南', event: '', url: '' },
　　　　{ id: 'SHA', name: '陕西', event: '', url: '' },
　　　　{ id: 'SCH', name: '四川', event: '(1个活动)', url: '/event/2' },
　　　　{ id: 'CHQ', name: '重庆', event: '', url: '' },
　　　　{ id: 'HUB', name: '湖北', event: '(1个活动)', url: '/event/3' },
　　　　{ id: 'ANH', name: '安徽', event: '', url: '' },
　　　　{ id: 'JSU', name: '江苏', event: '', url: '' },
　　　　{ id: 'SHH', name: '上海', event: '', url: '' },
　　　　{ id: 'ZHJ', name: '浙江', event: '', url: '' },
　　　　{ id: 'FUJ', name: '福建', event: '', url: '' },
　　　　{ id: 'TAI', name: '台湾', event: '', url: '' },
　　　　{ id: 'JXI', name: '江西', event: '', url: '' },
　　　　{ id: 'HUN', name: '湖南', event: '', url: '' },
　　　　{ id: 'GUI', name: '贵州', event: '', url: '' },
　　　　{ id: 'GXI', name: '广西', event: '', url: '' },
　　　　{ id: 'GUD', name: '广东', event: '', url: '' }
　　];
　　$('#map').vectorMap({
　　　　map: 'china_zh',
　　　　backgroundColor: false,
　　　　color: "#BBBBBB",
　　　　hoverColor: false,
　　　　//显示各地区名称和活动
　　　　onLabelShow: function (event, label, code) {
　　　　　　$.each(dataStatus, function (i, items) {
　　　　　　　　if (code == items.id) {
　　　　　　　　　　label.html(items.name + items.event);
　　　　　　　　}
　　　　　　});
　　　　},
　　　　//鼠标移入省份区域，改变鼠标状态
　　　　onRegionOver: function(event, code){
　　　　　　$.each(dataStatus, function (i, items) {
　　　　　　　　if ((code == items.id) && (items.event != '')) {
　　　　　　　　　　$('#map').css({cursor:'pointer'});
　　　　　　　　}
　　　　　　});
　　　　},
　　　　//鼠标移出省份区域，改回鼠标状态
　　　　onRegionOut: function(event, code){
　　　　　　$.each(dataStatus, function (i, items) {
　　　　　　　　if ((code == items.id) && (items.event != '')) {
　　　　　　　　　　$('#map').css({cursor:'auto'});
　　　　　　　　}
　　　　　　});
　　　　},
　　　　//点击有活动的省份区域，打开对应活动列表页面
　　　　onRegionClick: function(event, code){
　　　　　　$.each(dataStatus, function (i, items) {
　　　　　　　　if ((code == items.id) && (items.event != '')) {
　　　　　　　　　　window.location.href = items.url;
　　　　　　　　}
　　　　　　});
　　　　}　　
　　});
　　//改变有活动省份区域的颜色
　　$.each(dataStatus, function (i, items) {
　　　　if (items.event != '') {
　　　　　　var josnStr = "{" + items.id + ":'#00FF00'}";
　　　　　　$('#map').vectorMap('set', 'colors', eval('(' + josnStr + ')'));
　　　　}
　　});
});
</script>

5、获取其他省份或地区的地图数据

可以用Svg画图工具将需要的地图轮廓勾画出来，然后保存成Svg格式的矢量图片，然后用Nodepad++或Xmlspy工具将Svg文件打开，即可获取里面的地图数据，这里推荐使用Adobe Illustrator软件，操作和Photoshop差不多。

当然打开Svg文件会看到有很多的数据，我们需要取的数据是以M开始，以Z结尾的一串数字，然后将这串数字仿照china_zh.js文件组织成新的地图数据库。

举例：假如需要取北京市所有区和县的数据：

首先需要勾画出各个区县的轮廓图Svg格式
然后从各个Svg文件中取出地图数据
对照着china_zh.js文件组织成新的地图数据库

6、在地图中显示文字

从官网上下载的JvectorMap插件中默认没有这个功能，你需要修改一下jquery.vector-map.js文件。

我的修改方式：

1、首先在VectorCanvas.prototype中添加一个新的函数，用来在地图的指定区域中绘制文字，代码如下：

createText: function(params) {
    var textNode;
    var tspanNode;
    if (this.mode == 'svg') {
            var xArea = params.x;
            var yArea = params.y;
            if(undefined != xArea && undefined != yArea && "" != xArea && "" != yArea ){
                textNode = this.createSvgNode('text');                      
                textNode.setAttribute('x', xArea);
                textNode.setAttribute('y', yArea);
                textNode.setAttribute('id', "text_"+params.name);
                textNode.setAttribute("style",params.style);
                tspanNode = this.createSvgNode('tspan');
                $(tspanNode).text(params.name);
                $(tspanNode).appendTo(textNode);
            }
    }
    return textNode;
}

2、调用该函数：

var param = {
    name:mapData.pathes[key].name,
    x:mapData.pathes[key].x,
    y:mapData.pathes[key].y,
    style:textStyle
};
var text = this.canvas.createText(param);
$(this.rootGroup).append(text);

其中param中需要包含的数据有需要显示的文字的内容、文字的x轴坐标值、文字的y轴坐标值、字体显示的样式四个参数，样式的具体内容，并非样式名称。

这段代码，需要放在function WorldMap(param)中执行，也就是插件中var WorldMap = function(params){}内部，具体位置，可以参照cratePath的方式添加，上面那三句，并不是并列的三句，是需要放在不同位置的，具体的还是请参照createPath的添加方式。

3、对应的修改china_zh.js文件（可以参考beijing_2-zh.js）。

A、在height属性下面添加style属性，示例如下：

"style":"
font-size:6px;
line-height:100%;
letter-spacing:0px;
word-spacing:0px;
fill:#000000;
fill-opacity:1;
stroke:none;
font-family:新宋体;
z-index:5
"

B、在pathes中的子元素中添加 x、y坐标值，示例如下：

"x": "330.8695","y":"350.8071"

至此文字便可以正常显示了，他可以随着地图的放大而放大，位置不会改变。

new WorldMap参数列表

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)，当地图大小改变时执行

JVectorMap方法

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	数值	数据集的最大值，如果没提供会自动计算的