教你用 jVectorMap 勾画出属于自己的旅行足迹

教你用 jVectorMap 勾画出属于自己的旅行足迹-阿张同学
教你用 jVectorMap 勾画出属于自己的旅行足迹
此内容为免费资源,请登录后查看
0积分
免费资源

前言

看着手中还未整理完的旅行照片,你是否已经忘记在哪儿里拍摄的这些照片?你是否想要一张专属的旅行地图,将曾经到访过的地点在上边清晰标注出来。

jVectorMap 可以帮你实现这个愿望,最重要的是它开源且操作简单。

演示地址:https://www.cnnc404.com/guestbookhttps://api.cnnc404.com/map/index.html

图片[1]-教你用 jVectorMap 勾画出属于自己的旅行足迹-阿张同学

jVectorMap

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

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

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

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

地图下载

图片[2]-教你用 jVectorMap 勾画出属于自己的旅行足迹-阿张同学

提取码

我以世界地图演示

1.将文件放到网站目录

图片[2]-教你用 jVectorMap 勾画出属于自己的旅行足迹-阿张同学

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
喜欢就支持一下吧
点赞0赞赏 分享
评论 抢沙发
头像
拿起笔,写下你的梦想,你的人生就从此刻起航
提交
头像

昵称

取消
昵称表情代码图片