Mobile Travel Route Map

Problem

Text-based travel itineraries are hard to read on a mobile browser: route branches, transport nodes, stay locations, and sight order rarely form a clear spatial picture. Dropping raw coordinates or static images is not enough when a reader needs route switching, filtering, and POI details. This skill focuses on converting an existing plan into an interactive mobile map, not on writing the plan itself.

How It Works

• It expects the user to provide the destination, schedule, attraction list, route structure, and an AMap API Key.
• It resolves attraction names into GCJ-02 coordinates using AMap POI search and organizes them into renderable data.
• It generates a single static map image covering the intended area, embeds it as Base64, and uses CSS scale for zoom so panning does not expose blank regions.
• It adds map markers, route toggles, category filters, bottom attraction panels, detail popups, zoom controls, and touch-friendly layout.
• It outputs one HTML file with all styles and scripts inlined, targeting mobile viewports from 375px to 768px, safe areas, and offline opening.

Boundaries

It does not create travel advice, and the final HTML does not need runtime API calls. The API Key is used only during generation and should not be embedded in the output. If attraction names are missing, route definitions are incomplete, or AMap lookup fails, the user must supply better text details or manual coordinates.