JVectorMap的使用体会

http://dove19900520.iteye.com/blog/1880668

一、功能介绍:

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日


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: jvectormap是一种基于jQuery和SVG的JavaScript库,它提供了创建交互式矢量地图的功能。河北是中国的一个省份,位于华北地区,东临渤海,地势较为平坦。 使用jvectormap可以很方便地创建河北省的交互式地图。我们可以通过加载河北省的地理数据文件,如河北省的边界信息,然后将其传入jvectormap的初始化函数中。这样我们就可以在网页上看到一个河北省的地图了。 除了显示静态地图外,jvectormap还提供了丰富的交互功能。我们可以通过设置事件监听器来响应用户的鼠标操作,比如当用户点击某个区域时,可以弹出该区域的详细信息框。此外,还可以通过设置各个区域的颜色来显示不同的数据,比如使用不同的颜色表示不同区域的人口密度等。 在河北省的地图中,我们可以按照市、县、乡等不同的行政区划来进行划分,并给每个区域设置不同的样式和标记。我们还可以根据需求,添加自定义的标注和标签,比如添加一个指向石家庄市的箭头,或在廊坊市上显示一个商标。这样,我们可以根据自己的需要对河北省的地图进行定制和扩展。 总的来说,jvectormap是一个非常强大和灵活的工具,可以帮助我们轻松创建出漂亮且功能丰富的河北省地图。无论是做网页展示还是做数据可视化分析,它都是一个非常不错的选择。 ### 回答2: jvectormap是一个基于jQuery的插件,用于在网页上展示地图数据。河北是中国的一个省份,位于中国的北方。以下是关于jvectormap 河北的相关信息。 首先,你需要正确加载jvectormap插件和河北地图的数据文件。可以通过引入插件和数据文件的脚本来完成这一步骤。 接下来,你可以使用jvectormap提供的API来进行地图的配置和交互。你可以设置地图的大小、缩放级别和中心位置等,以便适应你的网页布局和需求。 然后,你可以使用jvectormap的数据系列功能来添加各种地图数据。可以根据你的需求,添加河北各个地区的数据,例如人口数量、经济指标等。 除了基本的地图展示功能,jvectormap还提供了一些交互性的特性。比如,你可以设置鼠标悬停或点击某个地区时的效果,以及添加信息框或跳转链接等。 最后,你可以自定义地图的样式和颜色,以便与你的网页风格相匹配。 总之,通过使用jvectormap插件和河北地图数据,你可以在网页上展示并与之交互的河北地图。这将为用户提供一个直观的了解河北地区的方式,并且可以根据自己的需求进行个性化的配置和定制。希望这个回答对你有帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值