JVectorMap的使用体会

一、功能介绍：

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

二、使用步骤：

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

   下载地址：http://download.csdn.net/download/laoshanbizu/5488955

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文件打开，即可获取里面的地图数据。推荐工具：Inkscape

下载地址：http://download.csdn.net/download/laoshanbizu/5489111

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

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

1）首先需要勾画出各个区县的轮廓图（svg格式）；

2）然后从各个svg文件中取出地图数据，

3）对照着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）。

        i）在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"

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

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

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

 

目前总结的就这么几点，如有新的体会，会继续添加。

附件中有个小例子，希望对大家有用

                                                                                            编写于2013年5月31日

评论

23 楼 bryant_24 2016-05-23  

你好，你的这个，我不知道放在哪个位置。可以分享一下吗？谢谢

22 楼 dove19900520 2014-10-10  

p912391702 写道

你好，我下载了，你的例子，实践了一下，还是没有成功。我用的是jquery-jvectormap-1.2.2.min.js，这个版本的，发现与你例子中的本版不一样。不知道如何下手，本人是最近才接触jvectormap，希望大侠，指点一下

你下载的这个版块，改动太大了，所以我的这个不适应新版本。
至于新版本怎么改，这个我也不清楚，我已经很久没看这个了，呵呵

21 楼 p912391702 2014-10-08  

你好，我下载了，你的例子，实践了一下，还是没有成功。我用的是jquery-jvectormap-1.2.2.min.js，这个版本的，发现与你例子中的本版不一样。不知道如何下手，本人是最近才接触jvectormap，希望大侠，指点一下

20 楼 dove19900520 2014-05-20  

xpyuser 写道

您好，我最近在用这个插件做区县地图 不知道  那个path怎么弄 是用什么工具啊

用的是Inkscape，画矢量图的工具，都可以

19 楼 xpyuser 2014-05-14  

您好，我最近在用这个插件做区县地图 不知道  那个path怎么弄 是用什么工具啊

18 楼 qyuan 2013-11-13  

自己画的地图，360安全浏览器下，全部是错的。chrome跟ff下 都能正常显示。....

17 楼 wangw330 2013-10-18  

你好，我发现画出来的图中svg和外层div之间的上下左右间距太宽，这个该如何调整呢？还有就是默认符合设置缩放比例呢？谢谢了。

16 楼 wangw330 2013-10-18  

你好，我发现画出来的图中svg和外层div之间的上下左右间距太宽，这个该如何调整呢？还有就是默认符合设置缩放比例呢？谢谢了

15 楼 dove19900520 2013-09-04  

Markerui 写道

你好。最近也在研究这个。发现DOME不支持IE8。createSvgNode不支持IE8、需要用createVmlNode，但是出来文字了。位置怎么处理。。

你好，如果是svgNode的话，文字位置我是通过浏览器来手动定位，或者再用svg矢量图画图工具描边时标记出来的，但如果是vml的，我就不是很清楚了，不好意思哈。

14 楼 Markerui 2013-09-03  

你好。最近也在研究这个。发现DOME不支持IE8。createSvgNode不支持IE8、需要用createVmlNode，但是出来文字了。位置怎么处理。。

13 楼 dove19900520 2013-08-30  

mzl9039 写道

hi，您好！我也来咨询一下：我最近在做相关的东西，但我需要的不是显示文字，而是地图的两个不同位置之前添加多条贝塞尔曲线，但我在网上浏览时没发现有添加线条的内容，请问如果是您，您有什么好办法吗？

你好，你说的这个我之前没有研究过，不过建议你去w3school研究一下svg这个元素，或许能找到一些突破口。

12 楼 mzl9039 2013-08-29  

hi，您好！我也来咨询一下：我最近在做相关的东西，但我需要的不是显示文字，而是地图的两个不同位置之前添加多条贝塞尔曲线，但我在网上浏览时没发现有添加线条的内容，请问如果是您，您有什么好办法吗？

11 楼 dove19900520 2013-08-22  

jv520jv 写道

谢谢,为JvectorMap加文字纠结了一晚上了.

附件中有我新上传的一个小例子，你看看对你有帮助吗？

10 楼 dove19900520 2013-08-22  

jv520jv 写道

谢谢,为JvectorMap加文字纠结了一晚上了.

是文字加不上吗？

9 楼 jv520jv 2013-08-22  

谢谢,为JvectorMap加文字纠结了一晚上了.

8 楼 wall0920 2013-07-27  

博主,您好!您的文章写的很有见地!
我和楼上的前辈有同样的问题:"我卡在显示文字这里了 比较着急 照着您的做了几次也没有成功"
能不能请博主也发一份DEMO?显示文字搞不太懂----谢谢啦!邮箱: [e-mail]

7 楼 wall0920 2013-07-27  

楼主威武!!!
    

6 楼 lanximu 2013-07-09  

dove19900520 写道

lanximu 写道

hello  您好！！  从您的这篇文章中学习了很多，现在公司在做类似的东西 我卡在显示文字这里了 比较着急 照着您的做了几次也没有成功， 您方便把能显示文字的demo发我邮箱一份 我再学习下么 [e-mail]   谢谢您！也希望能和您交个朋友~

关键是jquery.vector-map.js文件中的修改，除了添加一个新的方法createTex之外，还需要调用createTex方法，这样才能成功。你根据我给的例子再试试吧，祝你成功。

不多说了 谢谢谢谢~

5 楼 dove19900520 2013-07-08  

lanximu 写道

hello  您好！！  从您的这篇文章中学习了很多，现在公司在做类似的东西 我卡在显示文字这里了 比较着急 照着您的做了几次也没有成功， 您方便把能显示文字的demo发我邮箱一份 我再学习下么 [e-mail]   谢谢您！也希望能和您交个朋友~

关键是jquery.vector-map.js文件中的修改，除了添加一个新的方法createTex之外，还需要调用createTex方法，这样才能成功。你根据我给的例子再试试吧，祝你成功。

4 楼 dove19900520 2013-07-08  

lanximu 写道

hello  您好！！  从您的这篇文章中学习了很多，现在公司在做类似的东西 我卡在显示文字这里了 比较着急 照着您的做了几次也没有成功， 您方便把能显示文字的demo发我邮箱一份 我再学习下么 [e-mail]   谢谢您！也希望能和您交个朋友~

给你发送了一份示例，看看有用不！