本站建站之初，从友链网站大海看看处看到一篇文章《静态动态博客添加足迹地图》，是教你用jVectorMap 制作属于自己的旅行足迹，非常的喜欢，就立刻布置到自己的网站上。布置教程可以参考这篇文章。

前两天，在Jdeal兄弟的足迹页面上看到一段文字，就是累计点亮多少城市，已解锁多少面积，以及点亮的城市中，最南最北的城市是哪个，感觉非常的炫酷，就想着把现在我的Jvectormap足迹地图增强一下。具体是：

1、修改了配色，这个黑色的看久了就觉得不好看了，原来我的足迹地图我不太注意，因为我很少打开这个页面，关键是几年也未必外出一次了。这两天修改一看，这个颜色确实不咋地，必须要修改成中国蓝，而且要有个性。

下图中有一个错误，就是第二行解锁面积百分比，这个我已经修复了计算逻辑。当时我是吓一跳的，就点亮了12座城市就占960万祖国面积的8%，想想就不可能。

2、增加了最东和最西，并全部使用省份·城市名显示。

3、原来的代码，城市坐标经纬度只支持小数点后2位，经过百度地图查询，我发现最多可以支持到小数点后6位，定位更加准确。我这里是定位的城市所在市级政府的经纬坐标，由百度地图公开查询提供，你可以根据自己的需要进行重新定位。

4、新增：鼠标移动到地图红点时，显示该城市卡片信息。卡片信息新增了城市面积、邮编、经纬度、一句话城市简介和城市标签。

以上就是改造后的效果。代码改造如下：

源文件index.html根据以上进行修改，涉及所有新增的CSS合并到原来js/jquery-jvectormap-1.2.2.css中。

/* 从HTML中提取的样式 */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    font-family: "Microsoft YaHei", sans-serif;
    background-color: #f5f5f5;
}

.container {
    display: flex;
    flex-direction: column;
    height: 650px;
    background: linear-gradient(135deg, #f8f1e5 0%, #e8f4f8 100%);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    overflow: hidden;
    border: 1px solid #e0e0e0;
}

#map {
    flex: 1;
    min-height: 0;
}

.info-container {
    background: linear-gradient(to right, #2a5ca8, #1a3a6a);
    color: #fff;
    padding: 12px 15px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}

.info-line {
    margin: 8px 0;
    font-size: 15px;
    text-align: center;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

.extreme-cities-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

.city-stats {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.stat-item {
    margin: 5px 10px;
    padding: 5px 10px;
    background-color: rgba(255,255,255,0.15);
    border-radius: 15px;
    font-size: 14px;
    color: #fff;
    position: relative;
    backdrop-filter: blur(2px);
}

.highlight {
    color: #ffde59;
    font-weight: bold;
}

.jvectormap-tip {
    max-width: 280px;
    padding: 0;
    border-radius: 6px;
    background-color: rgba(42, 92, 168, 0.9);
    color: white;
    font-family: "Microsoft YaHei", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid rgba(255,255,255,0.2);
    transform: translateY(5px);
    transition: all 0.2s ease;
}

.jvectormap-tip strong {
    color: #ffde59;
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
}

/* 城市信息卡片样式 */
.city-card {
    width: 240px;
    padding: 4px 4px;
    border-radius: 4px;
}

.city-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 4px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.city-card-name {
    font-weight: bold;
    color: #ffde59;
    text-align: left;
    flex: 1;
}

.city-card-area {
    text-align: center;
    flex: 1;
}

.city-card-postal {
    text-align: right;
    flex: 1;
}

.city-card-content {
    padding-top: 4px;
}

.city-card-coordinates {
    margin-bottom: 4px;
}

.city-card-tags {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
}

.city-card-tag {
    margin-right: 4px;
    margin-bottom: 2px;
    padding: 1px 4px;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    font-size: 12px;
}

源文件中城市所有信息单独提取，存放在新增的json/jvectormap.json中，以固定格式存放，如：

{
  "cities": {
    "北京": {
      "name": "北京",
      "province": "北京",
      "coordinates": [39.904202, 116.407394],
      "area": 1.641,
      "postalCode": "100000",
      "tags": ["首都", "历史文化", "现代化"],
      "description": "中国首都，历史文化与现代都市的完美融合。故宫、长城、颐和园等地标性建筑令人难忘。"
    },
    "青岛": {
      "name": "青岛",
      "province": "山东",
      "coordinates": [36.067037, 120.382615],
      "area": 1.102,
      "postalCode": "266000",
      "tags": ["海滨城市", "啤酒", "帆船"],
      "description": "美丽的海滨城市，以德国建筑群、啤酒节和帆船运动闻名。"
    }
  },
  "totalChinaArea": 960
}

余下的保存到源文件index.html中。

在wordpress主题目录的页面目录下新建一个php文件，如页面目录是page，新建zuji.php，代码如下：

<?php
/*
	Template Name: 足迹
*/
get_header(); 
?>
<div class="links_page page_wrap" uk-height-viewport="offset-top: true">
		<iframe style="max-width: 100%" frameborder="no" border="0" marginwidth="0" marginheight="0" width="100%" height=650px src="<?php bloginfo('template_directory'); ?>/zuji/" sandbox="allow-same-origin allow-scripts"> </iframe>
</div>
<?php
get_footer();

所有操作完你就和本站的演示一模一样了。如果你不想自己需改，我已经提供了全部的源文件。

我这个只是用来展示，功能简单，如果你需要和博客文章挂钩，灵妹子写过一篇基于百度地图显示的，功能强大不说，并且已经开源，可以到《我的足迹【终极完整版】 — 我又更新啦！！！》查看。