前言介紹
- 這款 WordPress 外掛「Leaflet Map」是 2014-05-06 上架。
- 目前有 30000 個安裝啟用數。
- 上一次更新是 2025-04-19，距離現在已有 14 天。
- 外掛最低要求 WordPress 4.6 以上版本才可以安裝。
- 有 56 人給過評分。
- 論壇上目前有 3 個提問，問題解答率 100% ，不低，算是個很有心解決問題的開發者團隊了！
外掛協作開發者
bozdoz | hupe13 | remigr | gerital |
外掛標籤
map | leaflet | mapquest | interactive | openstreetmap |
內容簡介
透過LeafletJS新增一個地圖：一個開源的JavaScript函式庫，提供適合行動裝置的互動地圖。預設的地圖圖磚是透過OpenStreetMap或MapQuest（需使用應用鍵）提供。可以透過短代碼屬性或透過儀表板設置進行地圖設定。
地圖
建立地圖的方法如下：
[leaflet-map]
透過地址查詢：
[leaflet-map address="芝加哥"]
知道位置的緯度和經度？請使用它們（和縮放級別）：
[leaflet-map lat=44.67 lng=-63.61 zoom=5]
在地圖短代碼下方新增一個標記
[leaflet-map]
[leaflet-marker]
想新增更多？可以製作更多標記（並使地圖包含所有標記）：
[leaflet-map fitbounds]
[leaflet-marker address="東京"]
[leaflet-marker address="奧斯陸"]
[leaflet-marker address="開羅"]
[leaflet-marker address="多倫多"]
您甚至可以向彈出視窗（任何形狀）添加名稱：
[leaflet-map fitbounds]
[leaflet-marker address="東京"]東京[/leaflet-marker]
[leaflet-marker address="奧斯陸"]奧斯陸[/leaflet-marker]
...
以與WordPress編輯器相同的方式新增超連結到彈出視窗訊息中
其他形狀，GeoJSON和KML
新增地圖線條，請加[leaflet-line]，您可以使用以分號;或竿|分隔的清單指定位置，可使用緯度/經度：[leaflet-line latlngs="41, 29; 44, 18"]或地址： [leaflet-line addresses="伊斯坦堡;薩拉熱窩"]，或使用圖像地圖的x / y 坐標。
新增圓形到地圖上，請加上[leaflet-circle]。您可以使用 lat 和 lng 指定位置，使用 radius 指定半徑（以米為單位）。您還可以使用Leaflet的路徑選項自訂樣式。範例： [leaflet-circle message="最大距離" lng=5.117909610271454 lat=52.097914814706094 radius=17500 color="#0DC143" fillOpacity=0.1]。
或者透過網址新增GeoJSON ，（請確認您有權限存取它，如果它不是託管在您自己的伺服器上）： [leaflet-geojson src="https://example.com/path/to.geojson"]。使用字段名稱自訂彈出視窗；請將預設的src檔案和字段實際使用，例如：
[leaflet-map fitbounds]
[leaflet-geojson]{name}[/leaflet-geojson]
name是GeoJSON上的屬性，可以使用大括號和屬性名稱來存取。
圖像地圖
或者，您可以使用一個普通的圖像供訪問者縮放和平移，請使用：[leaflet-image src="path/to/image/file.jpg"]。參見截圖3-5以獲取協助設置。
其他
在Leaflet Map管理區中的Shortcode Helper頁面上查看其他範例。
詳細資訊和原始程式碼請參閱GitHub！
原文外掛簡介
Add a map generated with LeafletJS: an open-source JavaScript library for mobile-friendly interactive maps. Map tiles are provided by default through OpenStreetMap, or MapQuest (with an app key). Can be set per map with shortcode attributes or through the dashboard settings.
Maps
Simply create a map with:
[leaflet-map]
Lookup an address with:
[leaflet-map address="chicago"]
Know the latitude and longitude of a location? Use them (and a zoom level) with:
[leaflet-map lat=44.67 lng=-63.61 zoom=5]
Add a marker under your map shortcode, like so:
[leaflet-map]
[leaflet-marker]
Want more? Make more (and fit the map to contain all of them):
[leaflet-map fitbounds]
[leaflet-marker address="tokyo"]
[leaflet-marker address="oslo"]
[leaflet-marker address="cairo"]
[leaflet-marker address="toronto"]
You can even add popups (to any shape) with their names:
[leaflet-map fitbounds]
[leaflet-marker address="tokyo"]Tokyo[/leaflet-marker]
[leaflet-marker address="oslo"]Oslo[/leaflet-marker]
...
Add a link to the popup messages the same way you would add any other link with the WordPress editor.
Other Shapes, GeoJSON, and KML
Add a line to the map by adding [leaflet-line]. You can specify the postions with a list separated by semi-colon ; or bar | using lat/lng: [leaflet-line latlngs="41, 29; 44, 18"] or addresses: [leaflet-line addresses="Istanbul; Sarajevo"], or x/y coordinates for image maps.
Add a circle to the map by adding [leaflet-circle]. You can specify the position using lat and lng and the radius in meters using radius. You can also customize the style using Leaflet’s Path options. Example: [leaflet-circle message="max distance" lng=5.117909610271454 lat=52.097914814706094 radius=17500 color="#0DC143" fillOpacity=0.1].
Or you can add a geojson shape via a url (make sure you are allowed to access it if it’s not hosted on your own server): [leaflet-geojson src="https://example.com/path/to.geojson"]. Add custom popups with field names; try out the default src file and fields like so:
[leaflet-map fitbounds]
[leaflet-geojson]{name}[/leaflet-geojson]
name is a property on that GeoJSON, and it can be accessed with curly brackets and the property name.
Image Maps
Alternatively, you could use a plain image for visitors to zoom and pan around with [leaflet-image src="path/to/image/file.jpg"]. See screenshots 3 – 5 for help setting that up.
More
Check out other examples on the Shortcode Helper page in the Leaflet Map admin section.
Check out the source code and more details on GitHub!
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Leaflet Map」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
3.0.0 | 3.0.1 | 3.0.2 | 3.0.3 | 3.0.4 | 3.0.5 | 3.1.0 | 3.2.0 | 3.3.0 | 3.3.1 | 3.4.0 | 3.4.1 | 3.4.2 | trunk | 2.10.0 | 2.10.1 | 2.11.0 | 2.11.1 | 2.11.2 | 2.11.3 | 2.11.4 | 2.11.5 | 2.12.0 | 2.13.0 | 2.14.0 | 2.15.0 | 2.16.0 | 2.16.1 | 2.16.2 | 2.17.0 | 2.17.1 | 2.17.2 | 2.17.3 | 2.18.0 | 2.19.0 | 2.19.1 | 2.20.0 | 2.21.0 | 2.22.0 | 2.22.1 | 2.23.0 | 2.23.1 | 2.23.2 | 2.23.3 |
延伸相關外掛（你可能也想知道）
MapPress Maps for WordPress 》MapPress 是將互動式 Google 和 Leaflet 地圖添加到 WordPress 網站的最簡單方法。, 使用 Gutenberg 區塊或傳統編輯器創建無限的地圖和標記。彈出式地圖編輯...。
Ultimate Maps by Supsystic 》ss website using the Supsystic Ultimate Maps 外掛. This was developed as a response to the changes in Google Maps' pricing policy which has become ...。
Open User Map 》讓您的訪客在互動式地圖上新增標記（無需註冊）。新位置將等待您的批准後再公布。地圖基於Leaflet Map JS，提供多種免費地圖和標記樣式。您無需 API 金鑰、存...。
Extensions for Leaflet Map 》這個 WordPress 外掛擴充了 Leaflet Map，並增加了 Leaflet 插件和其他功能。, 使用的 Leaflet 插件與元素, , leaflet-elevation、Leaflet.i18n：具備高程概...。
OpenStreetMap for Gutenberg and WPBakery Page Builder (formerly Visual Composer) 》這款 WordPress 外掛可以輕鬆地將美麗的地圖添加到您的網站頁面。您可以自定義位置、地圖樣式、標記等。您可以將地圖包含為 Gutenberg 區塊、WPBakery Page B...。
Out of the Block: OpenStreetMap 》一個 Gutenberg 的地圖區塊，使用 OpenStreetMap 和 Leaflet.js，不需要 API 金鑰，即可開箱即用。從 Gutenberg 的潛力中受益，該外掛嘗試了不同的方式來將您...。
Map Block Leaflet 》Map Block Leaflet 外掛程式設計用於 Gutenberg 編輯器。該外掛程式旨在讓嵌入地圖至內容更加容易，而不用包含 API 金鑰，並且可以自訂地圖的外觀。, 貢獻：,...。
Advanced Custom Fields: Leaflet Map Field 》此外掛將一個 Leaflet 地圖欄位新增至 Advanced Custom Fields（ACF）外掛。, 建立後端欄位, 您可以像 Google 地圖欄位一樣，使用 ACF 新增一個 Leaflet 地圖...。
Nearby Map by Wabeo 》Nearby Map 是一款能夠輕鬆插入地圖到您的內容中的外掛程式。它能夠顯示主要位置以及周圍有趣的地點。, 地圖是動態的，您可以向使用者展示從主要位置到任何其...。
LocateAndFilter 》LocateAndFilter 是一個功能豐富且高度可客製化的 WordPress 外掛，旨在創建可搜尋 / 可篩選的地圖。, 部分功能：, , 友善性：, LocateAndFilter 建構在優秀...。
Gis maps 》此外掛顯示由 QGIS 建立並使用 qgis2web 匯出的地圖，您只需將包含所有地圖檔案的文件夾上傳到伺服器即可。, 上傳地圖：, , 您必須擁有您的 WordPress 安裝的...。
AcuGIS Leaflet Maps 》使用 AcuGIS Leaflet 地圖外掛可以輕鬆地創建和顯示簡單而美觀的自定義地圖。, AcuGIS 可與任何地圖供應商共同作業（包括 Google、OpenStreetMap、MapBox、BI...。
Locations and Areas – Leaflet Map with Region Tabs 》這是一個擁有多個區域標籤、無需 API 金鑰、前端位置新增、標記集群和美麗的地圖和標記樣式等功能的絕妙地圖外掛程式。你可以在單一地圖上展示廣泛區域的位置...。
Leaflet Map Widget 》在 WordPress Plugin 庫中有一款非常不錯的外掛叫做「Leaflet Map」，但很不幸的是，開發者忘記為這款外掛創建一個簡單的小工具。, 而此外掛便填補了這個缺口。。
PARSIJOO MAP 》此外掛可讓您在 Parsijoo 地圖上顯示您的位置。, 使用的專案, Leaflet, Leaflet 是一個開源的 JavaScript 地圖互動庫，專門為行動裝置設計。它僅約佔用 38 KB...。