写在最前面

给“照片的墙”一栏加上了旅行地图，还挺不错的，这么好玩的东西一定要分享哈【可点击这里查看效果】，感谢互联网上各位大佬的无私分享，终于实现了地图 2.0升级版，排名不分先后。
空木白博客
吴佳轶的博客
荒野孤灯博客

2024.11.15 第一版（简约风格）

下载Zip文件，上传到空间并解压，可以得到下面的文件：

目录结构

  • 红色框中的文件是必须要引入的内容。
  • 绿色框中的文件是展示的地图。
  • 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>

在 <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>

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

千万注意 ：在更改地图时 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: '内蒙古 - 乌兰浩特'}
]

推荐查询经纬度网站：
1、https://jingweidu.bmcx.com/ （中国区）
2、https://chl.cn/ditu/ （全球地区经纬度）

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

如何嵌入式到博客中

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

把制作好的地图文件放在服务器上，把访问连接放在src中。然后将上面的代码复制到你的博客页面上即可。可适配手机端和等比例缩放。

2024.11.18 第二版（图文简介+文章链接）

先看下新版的效果：

比第一版来说，稍微复杂了一些，新增了：文章链接、简介、图片、点位大小控制等。

下载Zip文件，上传到空间并解压。

配置你的足迹数据。

其中 /data/config.json 为配置数据，在里面可以配置你的足迹数据，结构如下：

    {
        "latLng": [31.32, 120.69],
        "name": "江苏 · 苏州",
        "articleUrl": "https://xxx.com/abc.html",
        "desc": "君到姑苏见，人家尽枕河。这是我的家乡—江苏苏州，国家著名旅游城市。\n十三世纪的《马可·波罗游记》将苏州赞誉为东方威尼斯。\n特产有阳澄湖大闸蟹、太湖三白、枇杷、芡实（鸡头米）、桂花、碧螺春茶等。",
        "photos":[
            "https://xxx.com/1.jpg",
            "https://xxx.com/2.jpg",
            "https://xxx.com/3.jpg",
            "https://xxx.com/4.jpg"
        ],
        "freq": 8
    },
  • latLng：为地图的经纬度，可以通过 https://jingweidu.bmcx.com 查询得到
  • name：地图地点的名称
  • desc：地图地点的描述， \n 为换行符
  • photos：地图地点的照片链接，为一组图片 url 数据
  • freq：地图标示的圆圈大小，范围为 [1, 10]

建议：latLng、name、desc、freq四个参数必须要有，articleUrl、photos这个两个参数可以根据实际情况选填。特别注意，最后一个数据末尾不要加【,】符号！！！

将地图内嵌到你博客中的相应位置：

<iframe scrolling=no style="min-height:480px !important;" src="替换成你的地图链接" width="100%" height="100%"></iframe>

这样一个旅行地图就完工了，这是2.0升级版，比起1.0来说略微复杂，但是信息量更大，大家各取所需。

点击查看：1.0版本演示

点击查看：2.0版本演示