地圖是一種可在[[資料庫介紹|資料庫]]中使用的[[檢視|檢視]]類型。使用前需要安裝 [Maps 外掛程式](obsidian://show-plugin?id=maps)。
從檢視選單中選擇 ![[lucide-map.svg#icon]] **地圖** 即可將檔案顯示為互動式地圖，每個檔案都有對應的標記，並可預覽該檔案的屬性。
![[bases-map-places.png#interface]]
## 安裝 Maps 外掛程式
地圖檢視需要 Obsidian 1.10。[Maps 外掛程式](obsidian://show-plugin?id=maps)是一個官方的[[社群外掛程式|社群外掛程式]]，可以單獨下載。
1. 按照[[社群外掛程式#安裝社群外掛程式]]中的說明操作
2. 從清單中下載並啟用 [Maps](obsidian://show-plugin?id=maps)
## 範例
首先，試著建立一個名為 **Eiffel Tower** 的筆記，並將以下屬性複製到其中：
```yaml
---
coordinates:
- "48.85837"
- "2.294481"
icon: "landmark"
color: "red"
tags:
- places
---
```
以下是上述程式碼的含義：
| 屬性 | 值 | |
| ------------- | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| `coordinates` | `48.85837`<br>`2.294481` | 座標以 `緯度, 經度` 格式儲存。你可以在地圖上對某個位置點擊右鍵，然後選擇**複製座標**來取得座標。 |
| `icon` | `landmark` | 來自 [Lucide 圖示庫](https://lucide.dev/) 的圖示名稱。 |
| `color` | `red` | 有效的 CSS 值：十六進位、RGB、顏色名稱等。 |
| `tags` | `places` | 我們將在資料庫中用來尋找地圖標記的標籤。 |
現在建立一個地圖檢視，加入標籤 `places` 的篩選條件，並使用上述屬性設定標記座標、圖示和顏色。
你也可以在 Obsidian 中開啟這些[範例檔案](https://github.com/obsidianmd/obsidian-maps/tree/master/examples)，查看已設定好標記、圖示和顏色的地圖檢視。
## 設定
地圖檢視設定可在[[檢視#檢視設定|檢視設定]]中進行設定。
- 嵌入高度
- 中心座標
- 縮放限制
- 標記座標、顏色和圖示
- 背景
### 標記
#### 座標
若要在地圖上顯示圖釘，請前往[[檢視#檢視設定|檢視設定]]並選擇一個**標記座標**屬性。該屬性必須包含緯度和經度座標。接受以下格式：
```yaml
# 文字屬性
coordinates: "lat, lng"
# 清單屬性
coordinates:
- "lat"
- "lng"
```
如果你將座標分別儲存為 `latitude` 和 `longitude` 屬性，可以使用[[資料庫語法#公式|公式]]屬性將它們結合，透過以下公式定義為座標陣列：`[latitude, longitude]`。
#### 圖示
透過定義**標記圖示**屬性來為標記新增圖示。例如，你可以在筆記中新增一個名為 `icon` 的屬性，並賦予它 Obsidian 內建 [Lucide 圖示庫](https://lucide.dev/icons/)中的值，如 `landmark` 或 `utensils`。
##### 使用公式定義圖示
假設你希望所有餐廳在地圖上都使用相同的圖示：
1. 建立一個名為 **Restaurants** 的筆記，新增一個名為 `icon` 的屬性，值設為 `utensils`。
2. 在餐廳筆記中新增一個名為 `type` 的屬性，連結到 `[[Restaurants]]` 筆記。
3. 在資料庫中新增一個名為 `Type icon` 的公式屬性，並使用以下程式碼：
```js
list(type)[0].asFile().properties.icon
```
4. 在檢視設定中選擇 `Type icon` 作為標記圖示。
完成！現在你的地圖將顯示來自地點*類型*的圖示，而不是地點本身的圖示。
#### 顏色
設定標記的顏色。接受 RGB `rgb(0,0,0)`、十六進位 `#000` 或 CSS 變數（如 `var(--color-blue)`）的值。如同上面的圖示範例，你可以使用公式屬性來動態定義顏色。
### 背景
#### 地圖圖磚
地圖圖磚是顯示數位地圖的標準方式。有多種服務可以用來自訂獨特樣式、顏色和字型的地圖。Maps 支援光柵和向量圖磚，並接受大多數圖磚 URL，包括 TileJSON URL。
[OpenFreeMap](https://openfreemap.org/) 提供了一些免費樣式供你使用。試著在**地圖圖磚**設定中使用以下 URL：
| 名稱 | URL |
| -------- | ------------------------------------------------ |
| Dark | `https://tiles.openfreemap.org/styles/dark` |
| Positron | `https://tiles.openfreemap.org/styles/positron` |
| Liberty | ``https://tiles.openfreemap.org/styles/liberty`` |
#### 實用連結
- [Maputnik](https://maputnik.github.io/) 用於自訂地圖圖磚。
- [Protomaps](https://protomaps.com/) 用於自行託管地圖圖磚。
- 其他提供免費方案的託管服務包括 [MapTiler](https://www.maptiler.com/) 和 [Mapbox](https://www.mapbox.com/)。
## 小技巧
你可以使用[[公式]]連結到熱門的地圖服務。例如，你的圖釘可以使用以下公式顯示 Google 地圖連結：
```js
link("https://www.google.com/maps/search/" + file.name.replace(" ","+"),"Google Maps")
```
## 疑難排解
如果在首次載入 Maps 外掛程式時地圖顯示為空白，請嘗試[[更新 Obsidian|更新 Obsidian 安裝程式版本]]。
[Maps 外掛程式](https://github.com/obsidianmd/obsidian-maps)是開放原始碼的。你可以透過提交錯誤報告、功能請求和 Pull Request 來協助改進。