地图是数据库中的一种视图，用于在交互式地图上显示带有标记的文件。
地图是[[视图|视图]]的一种类型，可以在[[Bases 简介|数据库]]中使用。使用该视图需要安装 [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` 属性，可以使用[[Bases 语法#公式|公式]]属性将它们合并，通过以下公式定义为坐标数组：`[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 Maps 的链接：
```js
link("https://www.google.com/maps/search/" + file.name.replace(" ","+"),"Google Maps")
```
## 故障排查
如果首次加载 Maps 插件时地图显示为空白，请尝试[[更新 Obsidian|更新 Obsidian 安装程序版本]]。
[Maps 插件](https://github.com/obsidianmd/obsidian-maps)是开源的。你可以通过提交错误报告、功能请求和拉取请求来贡献力量。