# 地图组件

## 一个有趣的地图组件

<figure><img src="https://cdn.mufy.ai/images/67040d2d-31e5-4144-904e-d56f42c6e600/public" alt=""><figcaption></figcaption></figure>

一个有趣的地图组件，可以用于展示当前剧情发展的位置，用作地图展示。

{% hint style="info" %}
原理：

* 当前地址采用一个地点名称传入代码
* 代码接收到地点名称后，当前位置作为高亮显示
  {% endhint %}

#### 目标字符

```xml
<FantasyMap>
    <CurrentLocation>血色修道院</CurrentLocation>
    <EnvironmentDesc>不速之客的出现，打破了此地的死寂。</EnvironmentDesc>
</FantasyMap>
```

#### 替换字符串

<details>

<summary><mark style="color:$primary;">代码过长，点击展开/收起</mark></summary>

````html
```html
<div class="grim-container" data-location="$1">
    <div class="grim-header">
        <div class="grim-title">REALM OF DESPAIR</div>
        <div class="grim-subtitle">Location Tracking System</div>
    </div>

    <div class="map-viewport">
        <div class="map-block block-1" data-name="血色修道院">
            <span class="label">血色修道院</span>
        </div>
        <div class="map-block block-2" data-name="灰烬荒原">
            <span class="label">灰烬荒原</span>
        </div>
        <div class="map-block block-3" data-name="沉沦之城">
            <span class="label">沉沦之城</span>
        </div>
        <div class="map-block block-4" data-name="黑石深渊">
            <span class="label">黑石深渊</span>
        </div>
        <div class="map-block block-5" data-name="叹息之门">
            <span class="label">叹息之门</span>
        </div>
    </div>

    <div class="grim-footer">
        <div class="loc-indicator">▶ CURRENT LOCATION: $1</div>
        <div class="loc-desc">$2</div>
    </div>

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&display=swap');

        .grim-container {
            width: 100%;
            background: #0a0a0a;
            color: #d1d1d1;
            padding: 20px;
            box-sizing: border-box;
            font-family: 'Cinzel', serif; /* 使用更具西幻感的字体 */
            border: 3px solid #4a0000;
            position: relative;
            box-shadow: inset 0 0 50px #000, 0 5px 15px rgba(0,0,0,0.5);
        }

        .grim-header {
            border-bottom: 2px solid #8b0000;
            margin-bottom: 15px;
            padding-bottom: 8px;
            text-align: center;
        }

        .grim-title {
            font-size: 22px; /* 增大标题 */
            letter-spacing: 5px;
            color: #ff0000;
            text-shadow: 2px 2px 4px #000, 0 0 10px #8b0000;
        }

        .grim-subtitle {
            font-size: 10px;
            color: #666;
            letter-spacing: 2px;
        }

        .map-viewport {
            width: 100%;
            height: 320px; /* 稍微增加高度 */
            background: #050505;
            position: relative;
            border: 1px solid #333;
            overflow: hidden;
            background-image: radial-gradient(circle, #1a0000 0%, #050505 100%);
        }

        /* 块状地址优化 */
        .map-block {
            position: absolute;
            background: linear-gradient(145deg, #1a1a1a, #262626);
            border: 1px solid #444;
            transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            filter: brightness(0.6);
        }

        .map-block .label {
            font-size: 16px; /* 增大地点名字体 */
            color: #888;
            font-weight: bold;
            text-shadow: 1px 1px 2px #000;
            padding: 5px;
            text-align: center;
        }

        /* 不规则形状定义 */
        .block-1 { top: 5%; left: 5%; width: 45%; height: 35%; clip-path: polygon(0 0, 100% 0, 80% 90%, 5% 100%); }
        .block-2 { top: 8%; left: 52%; width: 43%; height: 38%; clip-path: polygon(15% 0, 100% 10%, 90% 95%, 0 80%); }
        .block-3 { top: 45%; left: 8%; width: 42%; height: 50%; clip-path: polygon(10% 5%, 95% 0, 100% 90%, 5% 100%); }
        .block-4 { top: 50%; left: 55%; width: 40%; height: 45%; clip-path: polygon(5% 10%, 95% 5%, 90% 100%, 0 90%); }
        .block-5 { top: 32%; left: 35%; width: 30%; height: 32%; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); z-index: 2; }

        /* 核心高亮逻辑 */
        .grim-container[data-location="血色修道院"] [data-name="血色修道院"],
        .grim-container[data-location="灰烬荒原"] [data-name="灰烬荒原"],
        .grim-container[data-location="沉沦之城"] [data-name="沉沦之城"],
        .grim-container[data-location="黑石深渊"] [data-name="黑石深渊"],
        .grim-container[data-location="叹息之门"] [data-name="叹息之门"] {
            background: linear-gradient(145deg, #4a0000, #8b0000);
            border-color: #ff4d4d;
            filter: brightness(1.1);
            z-index: 10;
            box-shadow: 0 0 20px #ff0000;
            animation: pulse-glow 2s infinite alternate;
        }

        .grim-container[data-location="$1"] .map-block:hover { filter: brightness(1); } /* 简单的悬停交互 */

        .grim-container[data-location="血色修道院"] [data-name="血色修道院"] .label,
        .grim-container[data-location="灰烬荒原"] [data-name="灰烬荒原"] .label,
        .grim-container[data-location="沉沦之城"] [data-name="沉沦之城"] .label,
        .grim-container[data-location="黑石深渊"] [data-name="黑石深渊"] .label,
        .grim-container[data-location="叹息之门"] [data-name="叹息之门"] .label {
            color: #fff;
            text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
            transform: scale(1.1);
        }

        @keyframes pulse-glow {
            from { box-shadow: 0 0 10px #8b0000, inset 0 0 10px #ff0000; }
            to { box-shadow: 0 0 25px #ff0000, inset 0 0 15px #ff0000; }
        }

        /* 底部信息优化 */
        .grim-footer {
            margin-top: 20px;
            padding: 15px;
            background: rgba(139, 0, 0, 0.05);
            border: 1px solid #4a0000;
        }

        .loc-indicator {
            font-size: 14px; /* 增大 */
            color: #ff4d4d;
            margin-bottom: 8px;
            font-weight: bold;
            border-bottom: 1px solid #4a0000;
            display: inline-block;
        }

        .loc-desc {
            font-size: 16px; /* 增大描述字体 */
            line-height: 1.6;
            color: #aaa;
            font-family: 'Georgia', serif;
            font-style: italic;
        }
    </style>
</div>
```
````

</details>

#### 输出设定

```
### 地图导航设定
当玩家抵达新地点、探索环境或查看地图时，请在回复末尾严格输出以下XML：

<FantasyMap>
    <CurrentLocation>此处必须从以下列表中选择其一：血色修道院、灰烬荒原、沉沦之城、黑石深渊、叹息之门</CurrentLocation>
    <EnvironmentDesc>用富有诗意的西幻笔触描述该地点的细节</EnvironmentDesc>
</FantasyMap>

【重要提示】
- <CurrentLocation> 必须与列表中的字词完全一致，否则地图无法正确定位高亮。
- 不要输出任何XML以外的辅助文字。
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mufy.ai/documentation/guan-yu-zheng-ze/you-qu-an-li/di-tu-zu-jian.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.