---
title: 地图控制
---

<script>
    import { Plus, Minus, Diff, Compass, Search, LocateFixed, PersonStanding, Layers } from 'lucide-svelte';
    import DocsNote from '$lib/components/docs/DocsNote.svelte';
    import DocsLayers from '$lib/components/docs/DocsLayers.svelte';
</script>

# { title }

地图控件位于界面右侧。
包含导航、放大和缩小、以及在不同地图样式之间切换等功能。

### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> 导航

顶部的控件用于放大 <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> 和缩小 <Minus size="16" class="inline-block" style="margin-bottom: 2px" />，以及更改地图的方向和倾斜度<Compass size="16" class="inline-block" style="margin-bottom: 2px" />。

<DocsNote>

按住 <kbd>Ctrl</kbd> 的同时用鼠标拖动地图，也可控制地图的方向和倾斜度。

</DocsNote>

### <Search size="16" class="inline-block" style="margin-bottom: 2px" /> 搜索

使用搜索栏查找地址并在地图上导航。

### <LocateFixed size="16" class="inline-block" style="margin-bottom: 2px" /> 定位

点击定位按钮，地图将以您的当前位置为中心。

<DocsNote>

该操作仅在浏览器和 <b>gpx.studio</b> 被允许访问您的位置时生效。

</DocsNote>

### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> 街景

用于在地图上启用街景模式。
根据 [设置](./menu/settings) 中选择的街头视图源，以不同的方式访问街景图像。

- <a href="https://www.mapillary.com/" target="_blank">Mapillary</a>: 街景覆盖范围显示为绿线。 当放大到足够大时，街景可用的准确位置将以绿点表示。 将鼠标悬停其上，将显示该位置的街景。
- <a href="https://www.google.com/streetview/" target="_blank">Google 街景</a>: 点击地图可打开一个带有当前位置街景的新标签页。

### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> 图层

地图图层按钮支持切换底图，以及切换叠加层和兴趣点类别。

- **底图**是显示世界主要地理特征的背景图。
  根据其用途，底图具有不同的样式和详细程度。
  但一次只能显示一张底图。
- **叠加层**位于底图上方，提供补充信息。
- 可将**兴趣点**添加到地图上，以显示不同类别的地点，如商店、餐馆或住宿。

<div class="flex flex-col items-center">
    <DocsLayers />
    <span class="text-sm text-center mt-2">
        将鼠标悬停在地图上可在 <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a> 底图上叠加 <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> 数据.
    </span>
</div>

**gpx.studio** 提供了大量全球和本地底图和叠加层数据，以及精选的兴趣点类别。
它们可以在 [图层设置框](./menu/settings) 中被启用。

还可以管理叠加层的不透明度。

对于高级用户，支持通过提供 <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a>, 或 <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox style JSON</a> 等链接来添加自定义底图和叠加层。
