gpx.studio/website/src/lib/docs/zh/map-controls.mdx

---
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 Street View</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> 链接的方式来自定义底图和叠加层。