jVectorMap

JVectorMap 是一个优秀的、兼容性强的 jQuery 地图插件。

它可以工作在包括 IE6 在内的各款浏览器中,矢量图输出,除官方提供各国地图数据外,用户可以使用数据转换程序定制地图数据。例如街道地图、小区地图等等。

JVectorMap 官方网站提供了很多相关文档和使用示例,感兴趣的小伙伴可以自己研究一下。

官方网站:http://jvectormap.com/

今天教大家通过 jVectorMap 制作旅行足迹地图,最终的效果可以查看下面的 Demo 演示(中国),并教大家如何将制作好的足迹地图嵌入到我们自己的博客中。

Demo : http://www.wujiayi.vip/footprint/

目录结构

  • 红色框中的文件是必须要引入的内容。

  • 绿色框中的文件是展示的地图,可自行到官网下载需要的地图 : http://jvectormap.com/maps/world/world/,拷贝到 js 目录。

  • index.html 中需要添加足迹位置和相关样式。

开始

index.html 分为三部分介绍:

  • 如何更换不同国家地图。

  • 如何修改地图颜色等相关样式。

  • 如何添加足迹位置。

第一部分:如何更换不同国家地图。

<html>
<head>
<!--引入jQuery框架-->
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<!--引入jVectorMap库-->
<script type="text/javascript" src="js/jquery-jvectormap-1.2.2.min.js"></script>
<!--引入样式表-->
<link href="js/jquery-jvectormap-1.2.2.css" rel="stylesheet" media="screen"> <!--引入中国地图数据库-->
<script type="text/javascript" src="js/jquery-jvectormap-cn-merc-en.js"></script> <!--引入美国地图数据库-->
<!--script type="text/javascript" src="js/jquery-jvectormap-us-aea.js"></script-->
<!--引入世界地图数据库-->
<!--script type="text/javascript" src="js/jquery-jvectormap-world-mill.js"></script--> </head>
<body>

提前下载需要的国家地图,拷贝到 js 目录下。

<head> 标签里引入地图数据: <script type="text/javascript" src="js/地图文件名"></script>

注意 :同时只能有一个地图库,注意不要引入多个地图数据。可以选择注释掉其他的,方便更改。

第二部分:如何修改地图颜色等相关样式。

	<!--background-color: 地图背景颜色-->
<div id="map" style="background-color:#353535"> </div>
<script>
$('#map').vectorMap({ // 此处更改地图
map: 'cn_merc_en', // 中国地图
//map: 'us-aea', // 美国地图
//map: 'world-mill', // 世界地图 backgroundColor: 'transparent',
zoomMin: 0.9, // 鼠标缩放时的最小比例
zoomMax: 2.4, // 鼠标缩放时的最大比例
focusOn: {
x: 0.55,
y: 2,
scale: 0.9
},
regionStyle: {
initial: {
fill: '#e5e5e5', // 地图颜色
"fill-opacity": 1, // 省份(州)是否隐藏,鼠标滑动时显示; 1:显示,2:隐藏。
stroke: 'none',
"stroke-width": 0,
"stroke-opacity": 1
},
hover: {
fill: '#ccc', // 鼠标滑动至某省份的高亮颜色。
"fill-opacity": 0.8
},
selected: {
fill: 'yellow'
},
selectedHover: {}
},
markerStyle: {
initial: {
fill: '#fd8888', // 足迹位置的填充颜色
stroke: '#fff' // 足迹位置的描边颜色
},
hover: {
fill: '#fd2020', // 鼠标滑动至足迹位置后的填充颜色
stroke: '#fff', // 鼠标滑动至足迹位置后的描边颜色
"fill-opacity": 0.8
},
},
});
</script>
</html>

参照代码注释修改颜色和相关样式。

千万注意 :在更改地图时 map: '地图名称' ,地图名称是地图数据文件名的后半部分。

例如:

美国地图文件名:jquery-jvectormap-us-aea.js

那地图的名称是:us-aea

但是要注意把 - (横杠)更改成 _(下划线)。 否则不会显示地图。

第三部分:如何添加足迹位置。

	markers: [ // 足迹位置

		// {latLng: [经度(保留两位小数), 纬度(保留两位小数)], name: '城市名称'},
// 推荐查询经纬度网站:http://www.gpsspg.com/maps.htm {latLng: [39.90, 116.41], name: '北京'},
{latLng: [31.24, 121.50], name: '上海'}, {latLng: [46.06, 122.06], name: '内蒙古 - 乌兰浩特'}
]

推荐查询经纬度网站:http://www.gpsspg.com/maps.htm

语法:{latLng: [经度(保留两位小数), 纬度(保留两位小数)], name: '城市名称'},

如何嵌入式到博客中

<iframe style="max-width: 100%"
frameborder="no"
border="0"
marginwidth="0"
marginheight="0"
width="100%"
height="750px"
src="替换成你的足迹地图链接">
</iframe>

把制作好的足迹地图文件放在服务器上,把访问连接放在 src 中。

然后将上面的代码复制到你的博客页面上即可。

可适配手机端和等比例缩放。

获取源码

GitHub : https://github.com/HelloWuJiaYi/jVectorMap-Footprint

广告时间

欢迎访问我的个人博客:

http://www.wujiayi.vip

我的微信公众号:

吴佳轶同学

教你用 jVectorMap 制作属于自己的旅行足迹的更多相关文章

  1. Photoshop教您快速的制作标准一寸证件照教程

    Photoshop教您快速的制作标准一寸证件照教程 对急需证件照的朋友,只要有一部相机,有电脑安装了PS软件,就可很快自己完成一寸照片的制作. 首先将相机卡里的照片存放在电脑硬盘里: 打开PS图片处理 ...

  2. 教你使用Python制作酷炫二维码

    这篇文章讲的是如何利用python制作狂拽酷炫吊炸天的二维码,非常有趣哦! 可能你见过的二维码大多长这样: 普普通通,平平凡凡,没什么特色... 但,如果二维码长这样呢! 或者 这样! 是不是炒鸡好看 ...

  3. 教你五步制作精美的HTML时钟

    学了一段时间的HTML.CSS和JS后,给大家做一款漂亮的不像实力派的HTML时钟,先看图:涉及到的知识点有: CSS3动画.DOM操作.定时器.圆点坐标的计算(好多人是不是已经还给自己的老师了~)  ...

  4. 教你用PS制作雨天窗户上透明水滴字

    雨天窗户上透明水滴字制作方法很简单,主要利用图层样式来实现.学习后可以让你对图层样式有更好的了解,认识. 先看下完成后的效果图: 步骤1: 在Photoshop中我们新建或Ctrl+N,创建1920x ...

  5. 教你用Python制作微信好友背景墙

    目录: 0 引言 1 环境 2 代码实现 3 后记 0 引言 前段时间,微信朋友圈开始出现了一种晒照片新形式,微信好友墙,即在一张大图片中展示出自己的所有微信好友的头像. 效果如下图,出于隐私考虑,这 ...

  6. 3分钟教你用python制作一个简单词云

    首先需要安装三个包: # 安装:pip install matplotlib # 安装:pip install jieba # 安装pip install wordcloud 1.制作英文字母的词云 ...

  7. 教你用Camtasia制作精美片头

    大家都知道在视频播放中,如果有一个令人印象深刻的精彩开头,整个视频的内容都能因此得到不少升华.所以有一个好的片头对于视频的制作来说十分重要.今天我们就来讲一下用Camtasia制作片头的方法. 首先, ...

  8. 手把手教你 用 wpf 制作metro ProgressRing (Windows8 等待动画)

    效果图: 还在羡慕metro的ProgressRing吗? wpf 也可以拥有 首先说下思路, 一共6个点围绕一直圆转,所以需要使用rotation动画 并且一直转下去. 那么下面的问题就好解决了. ...

  9. PS教程:大神教你用PS制作《大鱼海棠》海报

        本来做的是一千左右像素的,但最后粗心让我存成500几px的了,可能会有点不清楚,唉,忙活这莫久竟然不敌最后一步的粗心呀     教程有千千万,但跟着作就好像是以前幼儿园老师拿着你的手写字,你可 ...

随机推荐

  1. [九省联考 2018]IIIDX

    Description 题库链接 给你 \(n+1\) 个节点的一棵树,节点编号为 \(0\sim n\) , \(0\) 为根.边集为 \(\mathbb{E}=\left\{(u,v)\big|\ ...

  2. 问题集录--Java高级软件工程师面试考纲(转)

    如果要应聘高级开发工程师职务,仅仅懂得Java的基础知识是远远不够的,还必须懂得常用数据结构.算法.网络.操作系统等知识.因此本文不会讲解具体的技术,笔者综合自己应聘各大公司的经历,整理了一份大公司对 ...

  3. [转]VS 2010 : 如何开发和部署Outlook 2010插件(Add-in)

    本文转自:https://www.cnblogs.com/chenxizhang/archive/2010/05/08/1730766.html 概述: 这篇文章,我将通过一个简单的例子,给大家分享一 ...

  4. [转]AngularJS中$timeout和$interval的用法详解

    本文转自:http://www.cnblogs.com/moli-/p/5827618.html 1. 先将$interval,$timeout,作为参数注入到controller中,例如rds.co ...

  5. java工程师_基础_阶段一_HTML笔记篇

    一.了解HTML语言 html:超文本标记语言. 二.HTML整体结构<html> <head> </head> <body> </body> ...

  6. 解决:在php配置文件路径下,添加php.ini之后,测试页面无法显示

    安装完php之后,通常情况下,会在网站目录下创建一个.php的文件,来查看php安装过程中的参数配置,脚本的内容很简单: <? phpinfo(); ?> 通常情况下,如果能顺利安装下来不 ...

  7. BZOJ4337: BJOI2015 树的同构(hash 树同构)

    题意 题目链接 Sol 树的同构问题,直接拿hash判一下,具体流程大概是这样的: 首先转化为有根树,预处理出第\(i\)棵树以\(j\)为根时的hash值. 那么两个树同构当且仅当把两棵树的hash ...

  8. jQuery基础(样式篇,DOM对象,选择器,属性样式)

      1. $(document).ready 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真 ...

  9. PHP中cookie和session的区别

    1.cookie数据存放在客户的浏览器上,session数据放在服务器上. 2.cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗考虑到安全应当使用session. 3 ...

  10. elasticsearch 多列 聚合(sql group by)

    文档数据格式 {"zone_id":"1","user_id":"100008","try_deliver_t ...