記得去年年初，我就折騰了“我的足跡”功能，當時就想在標記點 markers 中添加圖片，但苦於冇技術，就擱淺了，只實現了 markers 文字描述。今天終於讓我找到了大佬的教程，實現了 markers 中添加描述、多圖片、指定鏈接，用的還是熟悉的 Jvectormap 。 先給大佬曝光一下： 空木白 ...
記得去年年初，我就折騰了“我的足跡”功能，當時就想在標記點 markers 中添加圖片，但苦於冇技術，就擱淺了，只實現了 markers 文字描述。今天終於讓我找到了大佬的教程，實現了 markers 中添加描述、多圖片、指定鏈接，用的還是熟悉的 Jvectormap 。
先給大佬曝光一下： 空木白，以表感謝 ！
我之前的折騰記錄： 記錄（我的足跡）功能實現過程 。
預覽效果
內容沒來得及整，裡面的 圖片 及 鏈接 暫時只是為了演示來湊數而已 。
使用方法
配置足跡數據
其中 /data/config.json 為配置數據，在裡面可以配置你的足跡數據，結構如下：
[
{
"latLng": [36.44852263442782, 118.73921200195313],
"name": "青州",
"desc": "我的家鄉，山東東方——青州，國家著名旅游城市。\n旅游景點包括雲門山、仰天山、駝山、範公亭、青州博物館、宋城、古街等等。\n著名美食包括彌河銀瓜、老槐樹煎包、柿餅、馬蹄子燒餅等等。",
"photos":[
"https://xxxxxxxxxx.com/1.jpg",
"https://xxxxxxxxxx.com/2.jpg",
"https://xxxxxxxxxx.com/3.jpg"
],
"freq": 10
},
...
]
欄位解釋：
-
latLng： 為足跡的經緯度，可以通過 https://jingweidu.bmcx.com 查詢得到
-
name： 足跡地點的名稱
-
desc：足跡地點的描述， \n 為換行符
-
photos：足跡地點的照片鏈接，為一組圖片 url 數據，可以不設置，但要嚴格按上面格式來
-
freq：足跡地點的到訪次數，範圍為 [1, 10]
地圖樣式調整
- 預設的地圖為中國地圖，足跡點的樣式及背景樣式都是固定的，如果想對足跡地圖進行進一步的定製化，可以對
/css/index.css及/js/index.js文件進行修改。 - 其中
/js/jquery-jvectormap-cn-merc-en.js為中國地圖，你可以替換為世界地圖，具體操作見 https://jvectormap.com - 足跡地圖依賴的是
JVectorMap，關於基本的樣式定義可以參考官網 https://jvectormap.com/documentation/javascript-api/jvm-map
博客調用
將我的足跡地圖內嵌到你博客中的相應位置，示例代碼如下：
<iframe scrolling=no style="min-height:480px !important;" src="http://xxxx/xxxx/index.html" width="100%" height="100%"></iframe>
大佬的教程結束了，但經博主測試，大佬的代碼只能放在網站根目錄，不能在子文件夾中運行，也就是說要專門為 我的足跡 功能單獨間個網站。這未免有點太浪費資源了，於是我就開始折騰大佬的代碼了。
魔改修複版一
既然在根目錄功能能實現，而在子文件夾中不能用，那無非就是一些資源的路徑問題，那就好辦了。改了幾處代碼，很輕鬆就實現了在子文件夾中也能使用了，順便還增加了點圖片自適應的樣式。
下載地址：我的足跡 魔改修複版一 下載鏈接
魔改修複版二
晚飯後又折騰了下，看到 縉哥哥 的評論說：從地圖裡點進去，打不開對應的文章。是哦，何不給標題加個指定鏈接呢，跳轉至詳情頁。然後又把各省市的名稱補全，特別是 臺灣 改成 臺灣省 ！！！這很重要！！！
下載地址：我的足跡 魔改修複版二 下載鏈接
魔改修複版二對應/data/config.json修改示例 ：
[
{
"latLng": [22.25, 113.56],
"name": "廣東 · 珠海",
"articleUrl": "https://www.80srz.com/posts/1322.html",
"desc": "聯業織染（聯業）有限公司染整廢水處理工程- 11/2013",
"photos":[
"https://www.shejidaren.com/wp-content/uploads/2024/01/unnamed-file-19.jpg",
"https://www.shejidaren.com/wp-content/uploads/2024/01/unnamed-file-18.jpg",
"https://www.shejidaren.com/wp-content/uploads/2024/01/unnamed-file-17.jpg",
"https://www.shejidaren.com/wp-content/uploads/2024/01/unnamed-file-16.jpg"
],
"freq": 5
},
{
"latLng": [29.10, 117.75],
"name": "浙江 · 義烏",
"articleUrl": "https://www.80srz.com/posts/1322.html",
"desc": "浙江華川實業集團有限公司廢水處理系統改造工程 - 8/2015",
"photos":[
"https://www.shejidaren.com/wp-content/uploads/2024/01/unnamed-file-18.jpg",
"https://www.shejidaren.com/wp-content/uploads/2024/01/unnamed-file-17.jpg",
"https://www.shejidaren.com/wp-content/uploads/2024/01/unnamed-file-16.jpg"
],
"freq": 3
},
{
"latLng": [29.88, 114.30],
"name": "湖北 · 咸寧",
"articleUrl": "https://www.80srz.com/posts/1322.html",
"desc": "武漢漢麻生物科技有限公司廢水處理工程 - 4/2016",
"photos":[
"https://www.shejidaren.com/wp-content/uploads/2024/01/unnamed-file-17.jpg",
"https://www.shejidaren.com/wp-content/uploads/2024/01/unnamed-file-16.jpg"
],
"freq": 2
},
{
"latLng": [30.33, 112.24],
"name": "湖北 · 荊州",
"articleUrl": "https://www.80srz.com/posts/1322.html",
"desc": "湖北華麗染料工業有限公司污水處理站 - 6/2016",
"photos":[
"https://www.shejidaren.com/wp-content/uploads/2024/01/unnamed-file-16.jpg"
],
"freq": 1
},
{
"latLng": [30.73, 111.31],
"name": "湖北 · 宜昌",
"articleUrl": "https://www.80srz.com/posts/1322.html",
"desc": "湖北鑫物再生紙業有限公司污水處理站 - 10/2016",
"freq": 1
},
{
"latLng": [37.52, 122.09],
"name": "山東 · 威海",
"desc": "榮成市海盛紙業有限公司污水處理廠 - 6/2017",
"photos":[
"https://www.shejidaren.com/wp-content/uploads/2024/01/unnamed-file-16.jpg"
],
"freq": 1
},
{
"latLng": [29.20, 119.75],
"name": "浙江 · 金華",
"desc": "義烏市義南紙業有限公司新增印染廢水好氧處理系統改擴建工程 - 8/2017",
"freq": 3
}
]
說明：
-
photos：選填項，可以沒有
-
articleUrl：選填項，可以沒有
-
其他設置同原版
下載後，修改 /data/config.json 文件里的信息，上傳到空間的某個子文件夾中，然後引用就可以了。
OK，折騰完畢，記錄下來，老鐵，快來試試吧 。
原文地址：https://www.80srz.com/posts/footprintmap.html
本文首發於荒野孤燈（https://www.80srz.com）,由作者轉發於博客園。
