最终效果可参考https://www.haruhi.fans/?page_id=3016，主要功能实现嵌入地图，点亮地区（需要手动维护），地图可互动定位等，下图简单概览。
基本原理
利用百度地图和高德地图的免费接口，把内容嵌入到网页中。
步骤
注册开发者
前往高德或者百度地图开放平台，注册/登录一个账号。这边强烈建议使用高德https://lbs.amap.com/，百度的审核很慢而且步骤十分繁琐。
点击右上角注册，按照步骤注册完成即可
申请api
前往个人主页，点击管理key（图上的key数量1是我已经创建过了，你应该是0）
接着点击右上角，创建应用即可，按步骤要求填写完成。
完成后，会出现key和密钥，这一步完成
调整样式
点击这里https://lbs.amap.com/api/javascript-api-v2/getting-started，进入官方文档。
点击下面的亲手试一试，就出现了动态编辑器和图，功能可参考左边，具体函数参考文档。
可参考我的，使用前先在下面填好你的key。如果需要点亮新的部分修改下面的Todo部分，填写市级的城市行政区号即可（后两位为0）
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<style>
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
}
</style>
<title>我的足迹</title>
</head>
<body>
<div id="container" style="width: full; height: 50vh;"></div>
<script src="https://a.amap.com/Loca/static/mock/adcodes.js"></script>
<script
src="https://webapi.amap.com/maps?v=2.0&key=your-key&plugin=AMap.Scale,AMap.ToolBar"></script>
<script>
//全国省市的行政区号，无需修改
var adCodes = [
'110000', '120000', '130000', '140000', '150000', '210000', '220000', '230000', '310000', '320000',
'330000', '340000', '350000', '360000', '370000', '410000', '420000', '430000', '440000', '450000',
'460000', '500000', '510000', '520000', '530000', '540000', '610000', '620000', '630000', '640000',
'650000', '710000', '810000', '820000'
];
// 指定多个行政区号
var depth = 1; // 指定显示的层级，0 - 省级, 1 - 市级, 2 - 区县级
var map = new AMap.Map("container", {
zoom: 4.5,
center: [104.1954, 35.8587],
pitch: 0,
viewMode: '3D',
});
AMap.plugin('AMap.Geolocation', function() {
var geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位，默认:true
timeout: 10000, //超过10秒后停止定位，默认：5s
position:'RB', //定位按钮的停靠位置
offset: [10, 20], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20]
zoomToAccuracy: false, //定位成功后是否自动调整地图视野到定位点
});
map.addControl(geolocation);
geolocation.getCurrentPosition(function(status,result){
if(status=='complete'){
onComplete(result)
}else{
onError(result)
}
});
});
// 创建省份图层
var disProvince;
function initPro(codes, dep) {
dep = typeof dep == 'undefined' ? 2 : dep;
disProvince && disProvince.setMap(null);
disProvince = new AMap.DistrictLayer.Province({
zIndex: 12,
adcode: codes,
depth: dep,
styles: {
'fill': function (properties) {
// properties为可用于做样式映射的字段，包含
// NAME_CHN:中文名称
// adcode_pro
// adcode_cit
// adcode
var adcode = properties.adcode_cit;
return getColorByAdcode(adcode);
},
'province-stroke': 'cornflowerblue',
'city-stroke': 'white', // 中国地级市边界
'county-stroke': 'rgba(255,255,255,0.5)' // 中国区县边界
}
});
disProvince.setMap(map);
}
// 颜色辅助方法
var colors = {};
// Your Todo
// 在下面添加你去过市的城市区号，因为我是精确到市，所以后两位都为0
var city = [230100, 331100, 330800, 330700, 330600, 330500, 321100, 341700, 360400, 360100, 610500, 410300, 320400, 320200, 340100, 330400, 320600, 321200, 321000, 340300, 320300, 411400, 410100, 610400, 610300, 659001, 652300, 654200, 654000, 659005, 654300, 650100, 632200, 630100, 411200, 341300, 620600, 620300, 620200, 620900, 652800, 620700, 621100, 621200, 510800, 510700, 510600, 520300, 451200, 450200, 450900, 440800, 330100, 320500, 320100, 341100, 610100, 620500, 620100, 650500, 650400, 310000, 510100, 652900];
var getColorByAdcode = function (adcode) {
if (city.includes(adcode)) {
var gb = Math.random() * 155 + 50;
colors[adcode] = 'rgb(' + gb + ',' + gb + ',255)';
}
return colors[adcode];
};
// 初始化地图显示多个区域
initPro(adCodes, depth);
</script>
</body>
</html>嵌入个人网站
如果使用的是wordpress，那么选一篇文章或者界面，复制编辑器或者我提供的html，点击加号嵌入html，粘贴完成。
以后就可以记录你的旅途啦~~~~！