教你用 jVectorMap 制作属于自己的旅行足迹
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: '城市名称'},
。
如何嵌入式到博客中
<iframestyle="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 制作属于自己的旅行足迹相关推荐
- 怎么用python自制计算公式_手把手教你用python制作简易计算器,能够记录你使用的情况...
话不多说,首先先看效果图,它能够记录你在使用过程中的历史,方便你查看是否有错: 接下来就仔细分析一下是如何制作的: 简易计算器 第一步:导入资源库 在过程中使用到了tkinter这个资源库,win+R ...
- 手把手教你使用VS制作winform安装包
手把手教你使用VS制作winform安装包 使用VS 自带的打包工具,制作winform安装项目 开发环境:VS 2008 Access 操作系统:Windows XP 开发语言:C# 项目名称:** ...
- 教你用python制作人脸卡通画(附源码)
教你用python制作人脸卡通画(附源码) 效果展示: 让我们开始学习之路: 原理:利用第三方人脸接口将图像人脸化 第三方接口注册地址:https://ai.minivision.cn/#/login ...
- android 壁纸制作教程,教你如何自己制作安卓手机壁纸的方法教程
谷歌的Android手机操作系统正在迅速成为最流行的手机平台之一.这是非常容易自定义的,包括更改墙纸,只是可自定义的其中一部分. 这篇文章可以教你如何DIY制作属于自己的手机壁纸,下面直接进入主题. ...
- keyshot渲染图文教程_keyshot基础图文教程,手把手教你用keyshot制作动画效果
keyshot基础图文教程,手把手教你用keyshot制作动画效果 你知道么?keyshot除了用来渲染产品,其实还可以制作动画效果的,它里面内置了好几种运动方式,利用keyshot的旋转,平移,缩小 ...
- 视频配音怎么制作?手把手教你配音视频制作
相信很多短视频的创作者都知道,每个视频的好坏大多数取决于配音的效果,好的配音才能给观众留下一个深刻的印象,如果你想要制作一个好的视频,那肯定是离不开配音制作的.那你们知道视频配音怎么制作吗?不知道也没 ...
- python语言表白超炫图形_经验分享 篇二:三分钟教你用Excel制作各种尺寸、底色的证件照...
经验分享 篇二:三分钟教你用Excel制作各种尺寸.底色的证件照 2018-12-29 07:00:00 654点赞 7174收藏 245评论 一.前言 继上一篇用PPT制作了证件照以后 有的值友反应 ...
- html flash闹钟,教你用Flash制作可以定时闹钟
这篇教程是教大家利用Flash制作可以定时的闹钟,在文中,读者将学习到一些基本设计方法和时间对象的使用以及AS的一些基本语法.这个闹钟有显示时间,日期,星期:整点报时:定时闹铃等功能.教程很实用,希望 ...
- python开发rpa_几步教你用 Python 制作一个 RPA 机器人!
原标题:几步教你用 Python 制作一个 RPA 机器人! 作者 | 阿文 出品 | CSDN(ID:CSDNnews) 头图 | CSDN下载自东方IC 繁琐且重复的工作 在我们日常的工作中,有很 ...
最新文章
- 剑指offer--day07
- python正则表达式修饰符_python正则表达式,看完这篇文章就够了...
- 计算机考研学科专业基础,2018考研计算机学科专业基础综合考试大纲 出炉
- 一、使用两台Centos7系统搭建Hadoop-3.1.4完全分布式集群
- 稀缺:百分之二的选择
- 【计算机图形学课程】二.MFC鼠标响应函数模拟画图软件
- 华硕笔记本r414u怎么安装键盘_华硕笔记本键盘灯怎么开
- Linux安装redis数据库
- 人设倒了扶起来:Lazarus 组织利用含木马的IDA Pro 攻击研究员
- Bailian3250 字母重排【排序】
- 我们公司不会用分布式事务!
- Mongo 多语言模糊匹配
- Linux实现黑客帝国炫酷效果
- 变电站红外图像数据集
- 【Solr】之倒排索引算法【字典树】2
- 您的滴滴2020年度出行报告,请查收!
- 秋招实习季,教你制作在线简历
- PHP编写rss源(续)
- excel的vlookup常用查找功能
- quill富文本编辑器——修改默认图片、视频上传功能
热门文章
- html获取复选框的值,JavaScript获取复选框的值
- 我的世界Java版如何锁潜行_我的世界潜行怎么设置 潜行设置方法攻略
- Python 从文件中读取数据
- 马斯克脑机接口_马斯克的脑机接口公司 Neuralink:能做什么,不能做什么?(上)...
- 229. 多数元素 II
- Java框架之SpringMVC学习笔记
- 使用flowable生成动态流程图
- JMX:Java程序监控的基石
- java格式化日期时分秒_Java 日期、时间类,日期、时间的格式化
- Unity动态加载与内存关系2:Resources.Load 篇