前言
看着手中还未整理完的旅行照片，你是否已经忘记在哪儿里拍摄的这些照片？你是否想要一张专属的旅行地图，将曾经到访过的地点在上边清晰标注出来。
jVectorMap 可以帮你实现这个愿望，最重要的是它开源且操作简单。
演示地址：https://www.cnnc404.com/guestbook丨https://api.cnnc404.com/map/index.html
![图片[1]-教你用 jVectorMap 勾画出属于自己的旅行足迹-阿张同学](https://www.cnnc404.com/wp-content/uploads/jVectorMap.png)
jVectorMap
JVectorMap 是一个优秀的、兼容性强的 jQuery 地图插件。
它可以工作在包括 IE6 在内的各款浏览器中，矢量图输出，除官方提供各国地图数据外，用户可以使用数据转换程序定制地图数据。例如街道地图、小区地图等等。
JVectorMap 官方网站提供了很多相关文档和使用示例，感兴趣的小伙伴可以自己研究一下。
地图下载
![图片[2]-教你用 jVectorMap 勾画出属于自己的旅行足迹-阿张同学](https://www.cnnc404.com/wp-content/uploads/jVectorMap2.png)
提取码
我以世界地图演示
1.将文件放到网站目录
2.新建 index.html 文件，插入以下代码
<html>
<head>
<meta charset="UTF-8">
<!--引入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>
<!--background-color: 地图背景颜色-->
<div id="map" style="background-color:#016caa"></div>
<script>
$('#map').vectorMap({
// 更改地图
// map: 'cn_merc', // 中国地图
//map: 'us_aea', // 美国地图
map: 'world_mill', // 世界地图
backgroundColor: 'transparent',
zoomMin: 0.9, // 鼠标缩放时的最小比例
zoomMax: 25.0, // 鼠标缩放时的最大比例
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
},
},
markers: [ // 足迹位置
// {latLng: [纬度（保留两位小数）, 经度（保留两位小数）], name: '城市名称'},
//南半球和西半球加'-''
//北京
{latLng: [39.92, 116.42], name: '北京'},
//上海
{latLng: [31.40, 121.48], name: '上海'},
//四川
{latLng: [30.67, 104.07], name: '成都'},
{latLng: [30.04, 103.51], name: '眉山'},
{latLng: [31.30, 104.42], name: '绵阳'},
{latLng: [31.13, 104.40], name: '德阳'},
{latLng: [29.54, 103.01], name: '雅安'},
{latLng: [30.00, 101.96], name: '康定'},
{latLng: [30.00, 100.27], name: '理塘'},
{latLng: [29.04, 100.30], name: '稻城亚丁'},
//陕西
{latLng: [34.23, 108.93], name: '西安'},
//重庆
{latLng: [29.40, 106.54], name: '重庆'},
//云南
{latLng: [25.04, 102.71], name: '昆明'},
//广西
{latLng: [22.82, 108.37], name: '南宁'},
{latLng: [23.47, 111.28], name: '梧州'},
{latLng: [23.73, 109.23], name: '来宾'},
{latLng: [24.31, 109.41], name: '柳州'},
{latLng: [25.31, 110.30], name: '桂林'},
//广东
{latLng: [23.06, 113.15], name: '广州'},
{latLng: [22.62, 114.01], name: '深圳'},
//福建
{latLng: [24.47, 118.10], name: '厦门'},
//甘肃
{latLng: [36.10, 103.71], name: '兰州'},
{latLng: [39.47, 98.17], name: '嘉峪关'},
{latLng: [40.14, 94.66], name: '敦煌'},
{latLng: [38.92, 100.47], name: '张掖'},
{latLng: [39.38, 99.82], name: '高台'},
{latLng: [40.38, 95.84], name: '甘肃-瓜州-大地之子-无界'},
{latLng: [37.40, 95.17], name: 'U形公路'},
//青海
{latLng: [36.62, 101.78], name: '西宁'},
{latLng: [36.99, 99.84], name: '刚察-青海湖'},
{latLng: [37.37, 97.37], name: '德令哈'},
{latLng: [37.85, 95.36], name: '大柴旦'},
{latLng: [36.46, 99.04], name: '茶卡盐湖'},
//天津
{latLng: [39.71, 117.30], name: '天津'},
//海南
{latLng: [18.40, 109.75], name: '三亚'},
//江西
{latLng: [28.54, 115.94], name: '南昌'},
//英国
{latLng: [51.30, 0.1], name: '伦敦'},
{latLng: [51.45, -1.15], name: '牛津'},
{latLng: [53.28, -2.14], name: '曼彻斯特'},
{latLng: [54.42, -2.96], name: '安布赛德'},
{latLng: [54.93, -2.96], name: '卡莱尔'},
{latLng: [55.86, -4.27], name: '格拉斯哥'},
{latLng: [56.81, -5.12], name: 'Fort William'},
{latLng: [57.12, -4.34], name: '尼斯湖'},
{latLng: [55.57, -3.13], name: '爱丁堡'},
{latLng: [55.41, -1.70], name: 'Alnwick阿尼克'},
{latLng: [54.96, -1.47], name: '泰恩-威尔'},
{latLng: [53.96, -1.08], name: 'York'},
{latLng: [53.47, -1.32], name: '利兹'},
{latLng: [52.28, -1.53], name: '伯明翰'},
{latLng: [52.12, -0.07], name: '剑桥'},
{latLng: [51.40, -2.38], name: '巴斯'},
{latLng: [50.84, -0.13], name: '布莱顿'},
//泰国
{latLng: [13.45, 100.31], name: '曼谷'},
//新加坡
{latLng: [1.29, 103.85], name: '新加坡'},
//印度尼西亚
{latLng: [-8.77, 115.22], name: '巴厘岛'},
//土耳其
{latLng: [41.02, 28.97], name: '伊斯坦布尔'},
{latLng: [40.99, 27.50], name: '泰基尔达'},
{latLng: [40.88, 26.66], name: '凯尚'},
{latLng: [40.41, 26.67], name: '格里波鲁'},
{latLng: [40.99, 27.50], name: '泰基尔达'},
{latLng: [40.11, 26.41], name: '卡纳卡勒'},
{latLng: [39.10, 27.17], name: '贝尔加马'},
{latLng: [37.87, 27.27], name: '库沙达瑟'},
{latLng: [37.92, 29.12], name: '代尼兹利-棉花堡'},
{latLng: [36.88, 30.70], name: '安塔利亚'},
{latLng: [37.87, 32.51], name: '孔亚'},
{latLng: [38.64, 34.85], name: '内夫谢希尔-卡帕多奇亚'},
{latLng: [38.92, 32.84], name: '安卡拉'},
{latLng: [41.24, 32.69], name: '番红花城'},
//阿拉伯联合酋长国
{latLng: [24.43, 54.65], name: '阿布扎比'},
//埃及
{latLng: [30.04, 31.23], name: '开罗'},
{latLng: [27.04, 33.73], name: '古尔代盖'},
{latLng: [26.80, 33.95], name: '萨法加港'},
{latLng: [25.74, 32.66], name: '卢克索'},
//新西兰
{latLng: [-36.51, 174.47], name: '奥克兰'},
{latLng: [-37.59, 175.16], name: '汉密尔顿'},
{latLng: [-38.14, 176.26], name: '罗托鲁瓦'},
{latLng: [-38.65, 176.09], name: '陶波'},
{latLng: [-43.53, 172.64], name: '基督城'},
{latLng: [-44.00, 170.49], name: 'Lake Tekapo'},
{latLng: [-45.03, 168.66], name: '皇后镇'},
]
});
</script>
</html>
3.更换地图
<!--引入中国地图数据库-->
<!--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>提前下载需要的国家地图，拷贝到 js 目录下。
在 <head> 标签里引入地图数据： <script type="text/javascript" src="js/地图文件名"></script>
注意 ：同时只能有一个地图库，注意不要引入多个地图数据。可以选择注释掉其他的，方便更改。
4.修改地图颜色等相关样式
<!--background-color: 地图背景颜色-->
<div id="map" style="background-color:#016caa"></div>
<script>
$('#map').vectorMap({
// 更改地图
// map: 'cn_merc', // 中国地图
//map: 'us_aea', // 美国地图
map: 'world_mill', // 世界地图
backgroundColor: 'transparent',
zoomMin: 0.9, // 鼠标缩放时的最小比例
zoomMax: 25.0, // 鼠标缩放时的最大比例
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
},
},
markers: [ // 足迹位置
// {latLng: [纬度（保留两位小数）, 经度（保留两位小数）], name: '城市名称'},
//南半球和西半球加'-''
//北京
{latLng: [39.92, 116.42], name: '北京'},
//上海
{latLng: [31.40, 121.48], name: '上海'},
]
});
</script>参照代码注释修改颜色和相关样式。
千万注意 ：在更改地图时 map: '地图名称' ，地图名称是地图数据文件名的后半部分。
例如：
美国地图文件名：jquery-jvectormap-us-aea.js
那地图的名称是：us-aea
但是要注意把 - (横杠)更改成 _（下划线）。 否则不会显示地图。
5.添加足迹位置
markers: [ // 足迹位置
// {latLng: [纬度（保留两位小数）, 经度（保留两位小数）], name: '城市名称'},
//南半球和西半球加'-''
//北京
{latLng: [39.92, 116.42], name: '北京'},
//上海
{latLng: [31.40, 121.48], name: '上海'},
] 语法：{latLng: [纬度（保留两位小数）, 经度（保留两位小数）], name: ‘城市名称’},
注意：南半球和西半球加’-”
6.嵌入式到博客中
<iframe style="max-width: 100%"
frameborder="no"
border="0"
marginwidth="0"
marginheight="0"
width="100%"
height="600px"
src="替换成你的足迹地图链接">
</iframe>© 版权声明
分享是一种美德，转载请保留原链接。
THE END
![表情[wozuimei]-阿张同学](https://www.cnnc404.com/wp-content/themes/zibll/img/smilies/wozuimei.gif)
![表情[aru33]-阿张同学](https://www.cnnc404.com/wp-content/themes/zibll/img/smilies/aru33.gif)
- 最新
- 最热
只看作者