我的足跡 地圖— 升級版

荒野孤灯0813發表於2024-09-22
地圖

記得去年年初，我就折騰了“我的足跡”功能，當時就想在標記點 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

相關文章