Jvectormap中文帮助文档(API)

关于Jvectormap

    JVectorMap 是一个优秀的、兼容性强的用来显示矢量地图的jQuery插件.它使用 SVG 在Firefox 3 or 4, Safari, Chrome, Opera, IE9, 同时也支持老的ie浏览器ie6到ie8.使用 jVectorMap也很简单,和其他的jQuery方法相同。

关于本文翻译

     我们通常会记住创始者、发明者,比如哥伦布,乔布斯,他们的名字在人类历史中留下了很深的印记。
    再如jQuery,Mootools以及那么多技术类发明者创造了很多有价值的东西。我们普通人或许一生都做不了什么大事,但是我们可以不断改变自己,做很多有意义的事情,造福于他人。

    在开源工具这方面外国人创造了很多强大的工具,但是对于我们英文比较差的人来说,寻找中文文档却很难找到。我也曾尝试寻找jvectormap的中文文档,但是却没有找到,所以就自己使用谷歌 翻译然后加入自己的理解翻译出了本文,希望能对大家学习JVectormap有所帮助。

——王俊锋 翻译于 2014.04.26 辽宁·大连·大连工业大学

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

二、方法

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

未经允许不得转载:射雕天龙的博客 » Jvectormap中文帮助文档(API)

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值