打造个性化旅游助手：结合天地图的路线规划与交互界面开发实战，

在当今数字化时代，旅游爱好者们越来越依赖便捷且个性化的工具来规划他们的行程。本文将深入探讨如何开发一个集旅游路线规划、地图展示以及实时天气查询等功能于一体的 Web 应用，为用户提供全方位的旅游辅助服务。

一、功能概述

该应用主要分为左右两个部分：左侧是聊天交互区域，用户可以输入旅游目的地和游玩天数，点击按钮获取定制化的旅游路线；右侧则是地图展示区域，不仅能实时显示经纬度，还能根据获取到的景点 POI（Point of Interest）信息在地图上标记景点，并规划自驾路线。同时，应用还具备天气查询功能，根据用户输入的目的地自动获取当地实时天气情况。

二、技术栈

1. 前端框架：使用 Vue.js 进行应用的构建，Vue.js 的组件化开发模式使得代码结构清晰，易于维护和扩展。
2. 地图组件：引入了自定义的 UCMap 组件，基于 OpenLayers 等地图库进行二次开发，实现了地图的初始化、图层切换、POI 标记以及路线绘制等功能。
3. HTTP 请求：通过 axios 库进行 HTTP 请求，与后端服务进行数据交互，如获取旅游路线、地理编码以及天气信息等。
4. Markdown 解析：利用 marked 库将后端返回的 Markdown 格式的旅游路线和天气信息解析为 HTML，并通过 DOMPurify 进行安全过滤，防止 XSS 攻击。

三、核心功能实现

1.  旅游路线规划

用户在左侧输入目的地和游玩天数后，点击 “获取旅游路线” 按钮