在JS显示中国地图模块，有很多很好的库。
但是为了与jquery库相匹配，后来选择jvectormap这个库。幸运的它的官网上就提供了中国地图的数据，还算不错。把jquery-jvectormap-cn-mill.js文件下载到本地库的同级目录下，然后设置
& & & $('#map1').vectorMap({
& & & & map: 'cn_mill'
就可以显示中国地图。
&!DOCTYPE html&
& &title&jVectorMap demo&/title&
& & &link href=&jquery-jvectormap-2.0.3.css& media=&screen& rel=&stylesheet& type=&text/css& /&
& & &script src=&jQuery-2.2.0.min.js& type=&text/javascript&&&/script&
& & &script src=&jquery-jvectormap-2.0.3.min.js& type=&text/javascript&&&/script&
& &script src=&jquery-jvectormap-cn-mill.js&&&/script&
& &script&
& & jQuery.noConflict();
& & jQuery(function(){
& & & var $ = jQ
& & & $('#focus-single').click(function(){
& & & & $('#map1').vectorMap('set', 'focus', {region: 'AU', animate: true});
& & & $('#focus-multiple').click(function(){
& & & & $('#map1').vectorMap('set', 'focus', {regions: ['AU', 'JP'], animate: true});
& & & $('#focus-coords').click(function(){
& & & & $('#map1').vectorMap('set', 'focus', {scale: 7, lat: 35, lng: 33, animate: true});
& & & $('#focus-init').click(function(){
& & & & $('#map1').vectorMap('set', 'focus', {scale: 1, x: 0.5, y: 0.5, animate: true});
& & & $('#map1').vectorMap({
& & & & map: 'cn_mill',
& & & & panOnDrag: true,
& & & & focusOn: {
& & & & & x: 0.5,
& & & & & y: 0.5,
& & & & & scale: 2,
& & & & & animate: true
& & & & },
& & & & series: {
& & & & & regions: [{
& & & & & & scale: ['#C8EEFF', '#0071A4'],
& & & & & & normalizeFunction: 'polynomial',
& & & & & & values: {
& & & & & & & &AF&: 16.63,
& & & & & & & &AL&: 11.58,
& & & & & & & &DZ&: 158.97,
& & & & & & & &AO&: 85.81,
& & & & & & & &AG&: 1.1,
& & & & & & & &AR&: 351.02,
& & & & & & & &AM&: 8.83,
& & & & & & & &AU&: 1219.72,
& & & & & & & &AT&: 366.26,
& & & & & & & &AZ&: 52.17,
& & & & & & & &BS&: 7.54,
& & & & & & & &BH&: 21.73,
& & & & & & & &BD&: 105.4,
& & & & & & & &BB&: 3.96,
& & & & & & & &BY&: 52.89,
& & & & & & & &BE&: 461.33,
& & & & & & & &BZ&: 1.43,
& & & & & & & &BJ&: 6.49,
& & & & & & & &BT&: 1.4,
& & & & & & & &BO&: 19.18,
& & & & & & & &BA&: 16.2,
& & & & & & & &BW&: 12.5,
& & & & & & & &BR&: 2023.53,
& & & & & & & &BN&: 11.96,
& & & & & & & &BG&: 44.84,
& & & & & & & &BF&: 8.67,
& & & & & & & &BI&: 1.47,
& & & & & & & &KH&: 11.36,
& & & & & & & &CM&: 21.88,
& & & & & & & &CA&: 1563.66,
& & & & & & & &CV&: 1.57,
& & & & & & & &CF&: 2.11,
& & & & & & & &TD&: 7.59,
& & & & & & & &CL&: 199.18,
& & & & & & & &CN&: 5745.13,
& & & & & & & &CO&: 283.11,
& & & & & & & &KM&: 0.56,
& & & & & & & &CD&: 12.6,
& & & & & & & &CG&: 11.88,
& & & & & & & &CR&: 35.02,
& & & & & & & &CI&: 22.38,
& & & & & & & &HR&: 59.92,
& & & & & & & &CY&: 22.75,
& & & & & & & &CZ&: 195.23,
& & & & & & & &DK&: 304.56,
& & & & & & & &DJ&: 1.14,
& & & & & & & &DM&: 0.38,
& & & & & & & &DO&: 50.87,
& & & & & & & &EC&: 61.49,
& & & & & & & &EG&: 216.83,
& & & & & & & &SV&: 21.8,
& & & & & & & &GQ&: 14.55,
& & & & & & & &ER&: 2.25,
& & & & & & & &EE&: 19.22,
& & & & & & & &ET&: 30.94,
& & & & & & & &FJ&: 3.15,
& & & & & & & &FI&: 231.98,
& & & & & & & &FR&: 2555.44,
& & & & & & & &GA&: 12.56,
& & & & & & & &GM&: 1.04,
& & & & & & & &GE&: 11.23,
& & & & & & & &DE&: 3305.9,
& & & & & & & &GH&: 18.06,
& & & & & & & &GR&: 305.01,
& & & & & & & &GD&: 0.65,
& & & & & & & &GT&: 40.77,
& & & & & & & &GN&: 4.34,
& & & & & & & &GW&: 0.83,
& & & & & & & &GY&: 2.2,
& & & & & & & &HT&: 6.5,
& & & & & & & &HN&: 15.34,
& & & & & & & &HK&: 226.49,
& & & & & & & &HU&: 132.28,
& & & & & & & &IS&: 12.77,
& & & & & & & &IN&: 1430.02,
& & & & & & & &ID&: 695.06,
& & & & & & & &IR&: 337.9,
& & & & & & & &IQ&: 84.14,
& & & & & & & &IE&: 204.14,
& & & & & & & &IL&: 201.25,
& & & & & & & &IT&: 2036.69,
& & & & & & & &JM&: 13.74,
& & & & & & & &JP&: 5390.9,
& & & & & & & &JO&: 27.13,
& & & & & & & &KZ&: 129.76,
& & & & & & & &KE&: 32.42,
& & & & & & & &KI&: 0.15,
& & & & & & & &KR&: 986.26,
& & & & & & & &KW&: 117.32,
& & & & & & & &KG&: 4.44,
& & & & & & & &LA&: 6.34,
& & & & & & & &LV&: 23.39,
& & & & & & & &LB&: 39.15,
& & & & & & & &LS&: 1.8,
& & & & & & & &LR&: 0.98,
& & & & & & & &LY&: 77.91,
& & & & & & & &LT&: 35.73,
& & & & & & & &LU&: 52.43,
& & & & & & & &MK&: 9.58,
& & & & & & & &MG&: 8.33,
& & & & & & & &MW&: 5.04,
& & & & & & & &MY&: 218.95,
& & & & & & & &MV&: 1.43,
& & & & & & & &ML&: 9.08,
& & & & & & & &MT&: 7.8,
& & & & & & & &MR&: 3.49,
& & & & & & & &MU&: 9.43,
& & & & & & & &MX&: 1004.04,
& & & & & & & &MD&: 5.36,
& & & & & & & &MN&: 5.81,
& & & & & & & &ME&: 3.88,
& & & & & & & &MA&: 91.7,
& & & & & & & &MZ&: 10.21,
& & & & & & & &MM&: 35.65,
& & & & & & & &NA&: 11.45,
& & & & & & & &NP&: 15.11,
& & & & & & & &NL&: 770.31,
& & & & & & & &NZ&: 138,
& & & & & & & &NI&: 6.38,
& & & & & & & &NE&: 5.6,
& & & & & & & &NG&: 206.66,
& & & & & & & &NO&: 413.51,
& & & & & & & &OM&: 53.78,
& & & & & & & &PK&: 174.79,
& & & & & & & &PA&: 27.2,
& & & & & & & &PG&: 8.81,
& & & & & & & &PY&: 17.17,
& & & & & & & &PE&: 153.55,
& & & & & & & &PH&: 189.06,
& & & & & & & &PL&: 438.88,
& & & & & & & &PT&: 223.7,
& & & & & & & &QA&: 126.52,
& & & & & & & &RO&: 158.39,
& & & & & & & &RU&: 1476.91,
& & & & & & & &RW&: 5.69,
& & & & & & & &WS&: 0.55,
& & & & & & & &ST&: 0.19,
& & & & & & & &SA&: 434.44,
& & & & & & & &SN&: 12.66,
& & & & & & & &RS&: 38.92,
& & & & & & & &SC&: 0.92,
& & & & & & & &SL&: 1.9,
& & & & & & & &SG&: 217.38,
& & & & & & & &SK&: 86.26,
& & & & & & & &SI&: 46.44,
& & & & & & & &SB&: 0.67,
& & & & & & & &ZA&: 354.41,
& & & & & & & &ES&: 1374.78,
& & & & & & & &LK&: 48.24,
& & & & & & & &KN&: 0.56,
& & & & & & & &LC&: 1,
& & & & & & & &VC&: 0.58,
& & & & & & & &SD&: 65.93,
& & & & & & & &SR&: 3.3,
& & & & & & & &SZ&: 3.17,
& & & & & & & &SE&: 444.59,
& & & & & & & &CH&: 522.44,
& & & & & & & &SY&: 59.63,
& & & & & & & &TW&: 426.98,
& & & & & & & &TJ&: 5.58,
& & & & & & & &TZ&: 22.43,
& & & & & & & &TH&: 312.61,
& & & & & & & &TL&: 0.62,
& & & & & & & &TG&: 3.07,
& & & & & & & &TO&: 0.3,
& & & & & & & &TT&: 21.2,
& & & & & & & &TN&: 43.86,
& & & & & & & &TR&: 729.05,
& & & & & & & &TM&: 0,
& & & & & & & &UG&: 17.12,
& & & & & & & &UA&: 136.56,
& & & & & & & &AE&: 239.65,
& & & & & & & &GB&: 2258.57,
& & & & & & & &US&: 14624.18,
& & & & & & & &UY&: 40.71,
& & & & & & & &UZ&: 37.72,
& & & & & & & &VU&: 0.72,
& & & & & & & &VE&: 285.21,
& & & & & & & &VN&: 101.99,
& & & & & & & &YE&: 30.02,
& & & & & & & &ZM&: 15.69,
& & & & & & & &ZW&: 5.57
& & & & & & }
& & & & & }]
& &/script&
& &div id=&map1& style=&width: 1000 height: 800px&&&/div&
& &button id=&focus-single&&Focus on Australia&/button&
& &button id=&focus-multiple&&Focus on Australia and Japan&/button&
& &button id=&focus-coords&&Focus on Cyprus&/button&
& &button id=&focus-init&&Return to the initial state&/button&
效果显示如下：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：122591次
积分：2411
积分：2411
排名：第13540名
原创：131篇
评论：24条
(4)(3)(4)(4)(10)(8)(4)(7)(8)(8)(12)(11)(5)(6)(16)(6)(21)1.1和1.2关于map的lnglatToMercator方法，跑哪里去了。_百度地图api吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：5,515贴子：
1.1和1.2关于map的lnglatToMercator方法，跑哪里去了。收藏
1.1用BaiduMap = new BMap.Map(div);var f = BaiduMap.lnglatToMercator(g.minX, g.minY);这个可以但是到了1.2为什么在用就报错了。这个函数是删除了还是改变位置了。为什么api连个说明也没有。如果没有，难道就没有替代方案了。
多功能萃取壶,采用高压蒸汽原理草本泉源机萃壶 萃取只需一分钟！
难道是用坐标变换方法返回值描述pixelToPoint(pixel:Pixel)Point像素坐标转换为经纬度坐标。pointToPixel(point:Point)Pixel经纬度坐标转换为像素坐标。这个
额。找到了MercatorProjection此类表示街道地图投影类，一般通过MapType的getProjection方法获得实例（自1.2新增）。方法方法返回值描述lngLatToPoint(lngLat:Point)Pixel根据球面坐标获得平面坐标。pointToLngLat(point:Pixel)Point根据平面坐标获得球面坐标。
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或JS地图插件jvectormap - 推酷
JS地图插件jvectormap
我的About页面上面有一张Footmark，用于记录自己走过的地方。
其实我最早的想法并不仅仅是挂个图片而已的，只是除了能按教程弄个博客以外，我没有系统地学过html、css那些东西，就不了了之了。
昨天看到个博客：
博主是个不走寻常路的人，他的经历也曾经火过一段时间：仅仅上过2星期小学就退学回家，一直homeschool至今。比较厉害的是他在homeschool期间并没有荒废时间，旅行了很多地方，通过自学在摄影、平面设计、前端领域取得了非常不错的成果。
在他博客上面看到一张足迹地图，正是我一直想要的那种效果。F12了一下，发现是用一个开源的JS插件写的，叫 jvectormap 。
正好今天是假期，弄着玩吧。
上图来自 翁天信 同学的网站截图。这个95年出生的年轻人只比我小1岁而已，他所经历的人生轨迹、所设计的东西却都令我感到惊叹。
他从10年开始写自己的个人网站，之后每一年都会用这一年所学的新知识把它重写一遍。14年的这版看上去是最炫的，用了大量动画效果，最后15年这版又重归极简。
从设计理念上可能也能看出来一点他人生思维的变化吧。
扯回到jvectormap这个东西，用chrome的F12工具扫了一下他博客上的地图，可以找到 jvectormap-container 这个类，猜想这张地图大概是用 jvectormap 来实现的。
只是可惜直接查看网页的源代码找不到其他有用的信息，地图的位置只能看到一个id为maps的 div 标签而已。
&divid=&maps&&
&h3&我在中国的旅行足迹&/h3&
没办法从网站上直接找到参考，之后只好通过搜索引擎来进行学习了。
jvectormap
找到如下有用的资料：
第一个是jvectormap的官方页面，里面非常详细地介绍了这一JS插件的功能、文档等等内容，还有全球的地图数据可供下载。
后两个是两个开发着为jvectormap写的中文专题，参考这些资料写出自己需要的足迹效果还是非常容易的。
Hexo对html和js的支持
Hexo虽然是个主打轻量的静态博客框架，却不意味着一点动态的玩意都实现不了。
Hexo框架渲染Markdown文件时能够直接兼容里面的html代码这一点我很早就发现了，之前也利用这个特性直接在文章中插进去了音乐和视频等等内容。然后许多非常漂亮的Hexo主题也都是通过JS来实现各种动画效果。
这个是在博客中插入jvectormap的基础条件。
创建一个基本的地图
jvectormap是基于jquery来实现的，其实只需要3个步骤就能完成插件的添加：
引用渲染地图所需要的css文件和JavaScript文件
css文件用于设定地图的外观，js文件里面则是各种API接口和地图数据
在页面中加入div标签，生成一个地图容器，这个就是上面看到的 jvectormap-container
初始化地图数据，指定各种渲染地图所需要的参数
需要引入的文件有4个：
&linkhref=&/jquery-jvectormap.css&rel=&stylesheet&type=&text/css&&
&scriptsrc=&/jquery.min.js&&&/script&
&scriptsrc=&/jquery-jvectormap.min.js&&&/script&
&scriptsrc=&/jquery-jvectormap-cn-merc.js&&&/script&
第一个是jvectormap的css文件，第二个是基础的jquery，第三个是jvectormap，最后一个是地图数据。
第二个可以在jquery的官方网站上下到，其他三个都在jvectormap的官网上可以找到。
然后在页面中需要放地图的地方加入div标签：
&divid=&map&style=&width: 600 height: 400px&&&/div&
高度和宽度不能为0，这样一个地图容器控件就生成了。
接下来需要对地图数据进行初始化，就可以在页面中直接看到生成好的地图了。
可能是我下的jquery的版本问题，网上找到的资料上调用初始化函数的方法都是：
$(function(){
$('#map').vectorMap({
map: 'cn_merc_en'
但是我这么写就会报错，需要去掉外面那个 function 的调用即可：
$('#map').vectorMap({
map: 'cn_merc_en'
map 项后面是需要引入的地图数据，这个需要打开包含地图数据的js文件来看里面是怎么写的。
完成初始地图的生成之后，接下来可以使用许多参数来改变地图的外观，设定一些响应动作等等，在上面提到的2篇中文资料中已经介绍得非常详细了。
戳右边About页面可以看到我这里的实现方式，我的代码是直接写在Markdown文件里面的，所以查看网页源代码可以直接看到详细的代码情况。
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致jQuery中国地图插件 鼠标悬停显示省份介绍 | HTML5资源教程
之前我们介绍过一款jQuery地图插件，大家可以看看，效果相当酷。今天要来介绍一款相对更实用些的jQuery中国地图插件，在该实例中，整张中国地图都按各个省份切割，鼠标滑过相应的省份时，即可弹出对应省份的具体介绍。
本条目发布于。属于、分类。作者是。问说网手机版
躺着 站着 跪着轻松访问
问说网 / 蜀ICP备号
感谢您对问说网的支持，提出您在使用过程中遇到的问题或宝贵建议，您的反馈对我们产品的完善有很大帮助。
您的反馈我们已收到！
感谢您提供的宝贵意见，我们会在1-2个工作日，通过您留下的联系方式将处理结果反馈给您！