AI+地图 · 智能进化：【腾讯位置服务开发者征文大赛】用AI对话重塑地图体验：从“搜索工具“到“智能助手“

┌─────────────────────────────────────────────────┐
│                   用户界面层                     │
│  ┌──────────────┐      ┌──────────────────┐   │
│  │  对话界面    │      │    地图展示      │   │
│  │  (Chat UI)   │◄────►│  (Map Canvas)    │   │
│  └──────────────┘      └──────────────────┘   │
└─────────────────────────────────────────────────┘
                         ▲
                         │
┌─────────────────────────────────────────────────┐
│                  应用逻辑层                      │
│  ┌──────────────┐      ┌──────────────────┐   │
│  │  AI对话服务  │      │    地图服务      │   │
│  │ (AI Service) │◄────►│ (Map Service)    │   │
│  └──────────────┘      └──────────────────┘   │
│         │                      │              │
│         ▼                      ▼              │
│  ┌─────────────────────────────────────┐     │
│  │     意图解析    参数提取   操作执行  │     │
│  └─────────────────────────────────────┘     │
└─────────────────────────────────────────────────┘
                         ▲
                         │
┌─────────────────────────────────────────────────┐
│                  API调用层                       │
│  ┌────────────────┐    ┌─────────────────┐    │
│  │  大模型API     │    │ 腾讯位置服务API │    │
│  │ (可选云端)     │    │ (JSAPI/WebSvc)  │    │
│  └────────────────┘    └─────────────────┘    │
└─────────────────────────────────────────────────┘

// 支持多种AI引擎混合架构
class AIService {
    processInput(input, context) {
        switch (this.provider) {
            case 'local':   // 本地规则引擎（免费、快速）
                return this.processLocal(input, context);
            case 'qwen':    // 通义千问云端API
                return this.processQwen(input, context);
            case 'zhipu':   // 智谱GLM云端API
                return this.processZhipu(input, context);
            case 'custom':  // 自定义API扩展
                return this.processCustom(input, context);
        }
    }
}

const intents = {
    search_poi: [
        /找(.+)附近(.+)/,        // "找北京西站附近的咖啡馆"
        /搜索(.+)/,              // "搜索咖啡"
        /附近(.+)/               // "附近美食"
    ],
    route_planning: [
        /从(.+)到(.+)/,          // "从天安门到故宫"
        /(.+)到(.+)怎么走/       // "北京西站到故宫怎么走"
    ],
    recommendation: [
        /推荐(.+)/,              // "推荐景点"
        /人少的(.+)/             // "人少的咖啡馆"
    ]
};

class MapService {
    constructor() {
        this.map = null;
        this.apiKey = null;  // 存储API密钥
        this.markers = [];
    }

    // JSONP请求封装（规避CORS）
    jsonpRequest(url) {
        return new Promise((resolve, reject) => {
            // 创建唯一callback名
            const callbackName = 'jsonp_callback_' + Date.now();
            const jsonpUrl = url + '&output=jsonp&callback=' + callbackName;

            // 创建script标签（天然可跨域）
            const script = document.createElement('script');
            script.src = jsonpUrl;

            // 定义全局callback函数
            window[callbackName] = function(data) {
                resolve(data);
                delete window[callbackName];
                document.body.removeChild(script);
            };

            // 错误和超时处理
            script.onerror = () => reject(new Error('请求失败'));
            setTimeout(() => {
                if (window[callbackName]) {
                    reject(new Error('请求超时'));
                }
            }, 10000);

            document.body.appendChild(script);
        });
    }

    // POI搜索 - 使用WebService API
    async searchPOI(params) {
        const keyword = encodeURIComponent(params.keyword);
        const region = encodeURIComponent(params.region || '北京');
        const apiUrl = `https://apis.map.qq.com/ws/place/v1/search?keyword=${keyword}&boundary=region(${region},0)&key=${this.apiKey}`;

        const data = await this.jsonpRequest(apiUrl);

        // 详细数据验证
        if (data.status !== 0) {
            throw new Error(data.message || '搜索失败');
        }

        // 格式化返回数据
        return data.data.map(poi => ({
            title: poi.title,
            address: poi.address,
            location: { lat: poi.location.lat, lng: poi.location.lng },
            distance: poi._distance || null
        }));
    }

    // 路线规划 - 使用WebService API
    async planRoute(params) {
        const apiUrl = `https://apis.map.qq.com/ws/direction/v1/driving/?from=${params.from.lat},${params.from.lng}&to=${params.to.lat},${params.to.lng}&key=${this.apiKey}`;

        const data = await this.jsonpRequest(apiUrl);

        if (data.status !== 0) {
            throw new Error(data.message || '路线规划失败');
        }

        // 转换数据格式
        return {
            result: {
                routes: data.result.routes.map(route => ({
                    distance: route.distance,
                    duration: route.duration,
                    polyline: route.polyline,
                    steps: route.steps
                }))
            }
        };
    }

    // 地理编码 - 地址转坐标
    async geocoder(address) {
        const apiUrl = `https://apis.map.qq.com/ws/geocoder/v1/?address=${encodeURIComponent(address)}&key=${this.apiKey}`;

        const data = await this.jsonpRequest(apiUrl);

        // 详细验证返回数据
        if (data.status !== 0 || !data.result || !data.result.location) {
            throw new Error('未找到地址对应的坐标');
        }

        return {
            lat: data.result.location.lat,
            lng: data.result.location.lng
        };
    }

    // 在地图上显示POI
    displayPOIOnMap(poiList) {
        poiList.forEach((poi, index) => {
            // 创建标记
            const marker = new TMap.Marker({
                map: this.map,
                position: new TMap.LatLng(poi.location.lat, poi.location.lng)
            });

            // 添加信息窗口
            const infoWindow = new TMap.InfoWindow({
                map: this.map,
                position: new TMap.LatLng(poi.location.lat, poi.location.lng),
                content: `<h4>${poi.title}</h4><p>${poi.address}</p>`
            });

            marker.on('click', () => infoWindow.open());
            this.markers.push({ marker, infoWindow });
        });
    }
}

async function sendMessage() {
    const userMessage = inputField.value.trim();

    // 1. AI解析意图
    const aiResult = await aiService.processInput(userMessage, {
        currentLocation: appState.currentLocation,
        region: '北京'
    });

    // 2. 根据意图执行地图操作
    switch (aiResult.intent) {
        case 'search_poi':
            // 搜索POI → 在地图显示
            const poiList = await mapService.searchPOI(aiResult.params);
            mapService.displayPOIOnMap(poiList);
            break;

        case 'route_planning':
            // 地理编码起点终点 → 路线规划 → 可视化
            const from = await mapService.geocoder(aiResult.params.from);
            const to = await mapService.geocoder(aiResult.params.to);
            const route = await mapService.planRoute({ from, to });
            mapService.displayRouteOnMap(route);
            break;
    }

    // 3. 生成友好响应
    addMessage('assistant', generateResponse(aiResult, poiList));
}

// 示例：处理"找XX附近XX"
function processLocal(input) {
    const match = input.match(/找(.+)附近(.+)/);
    if (match) {
        return {
            intent: 'search_poi',
            params: {
                location: match[1],  // "北京西站"
                keyword: match[2]    // "咖啡馆"
            }
        };
    }
}

const prompt = `
请分析用户地图查询需求，提取关键信息：
用户输入: "${userInput}"

返回JSON格式：
{
    "intent": "意图类型（search_poi/route_planning）",
    "params": { "keyword": "...", "location": "..." },
    "response": "友好的中文响应"
}
`;

const aiResponse = await callQwenAPI(prompt);
const parsed = JSON.parse(aiResponse);

// 简单查询用本地引擎
if (isSimpleQuery(input)) {
    return processLocal(input);
}
​
// 复杂查询用云端AI
if (needDeepUnderstanding(input)) {
    return processQwen(input);
}

async function handlePOISearch(params) {
    // Step1: 地理编码"北京西站"
    const geocodeResult = await mapService.geocoder(
        params.location + ', 北京'
    );

    // Step2: 以该坐标为中心搜索"咖啡馆"
    const poiList = await mapService.searchPOI({
        keyword: params.keyword,
        location: geocodeResult, // 中心点
        pageSize: 10
    });

    // Step3: 在地图上标记，显示距离
    mapService.displayPOIOnMap(poiList, {
        showDistance: true  // 显示"距离XX米"
    });

    // Step4: 生成文本响应
    let response = `找到${poiList.length}个结果:\n`;
    poiList.forEach(poi => {
        response += `${poi.title} - ${poi.distance}米\n`;
    });
}

async function handleRoutePlanning(params) {
    // 1. 地理编码起点和终点（JSONP方式）
    const fromLocation = await mapService.geocoder('天安门, 北京');
    const toLocation = await mapService.geocoder('故宫, 北京');

    // 2. 调用腾讯WebService路线规划API
    const routeResult = await mapService.planRoute({
        from: fromLocation,
        to: toLocation
        // 不传policy参数，使用API默认最优路线
    });

    // 3. 提取路线信息
    const route = routeResult.result.routes[0];
    const distance = route.distance; // 米
    const duration = route.duration; // 秒
    const steps = route.steps;       // 导航步骤

    // 4. 在地图上绘制路线（JSAPI可视化）
    mapService.displayRouteOnMap(routeResult);

    // 5. 显示详细信息面板
    showRouteInfo({
        distance: `${(distance/1000).toFixed(2)}公里`,
        duration: `${Math.floor(duration/60)}分钟`,
        steps: steps.map(s => s.instruction)
    });
}

**地图渲染效果**：

![路线规划效果](assets/route-demo.png)

---

### 3.4 前端交互优化

#### 设计原则

1. **响应式布局**：对话面板+地图面板并排显示
2. **实时反馈**：AI思考时显示加载动画
3. **历史记录**：保留聊天记录，方便回顾
4. **快捷操作**：提供常用搜索快捷按钮

#### UI实现细节

```css
/* 左右分栏布局 */
.app-container {
    display: flex;
    height: 100vh;
    gap: 20px;
}

.chat-panel {
    flex: 0 0 450px;  /* 固定宽度 */
    background: white;
    border-radius: 16px;
}

.map-panel {
    flex: 1;  /* 自适应剩余空间 */
    position: relative;
}

/* 消息动画 */
.message {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

async function handleRoutePlanning(params) {
    // 1. 地理编码起点和终点
    const fromLocation = await mapService.geocoder('天安门, 北京');
    const toLocation = await mapService.geocoder('故宫, 北京');

    // 2. 调用腾讯路线规划API
    const routeResult = await mapService.planRoute({
        from: fromLocation,
        to: toLocation,
        policy: TMap.constants.DRIVING_POLICY.LEAST_TIME // 最短时间
    });

    // 3. 提取路线信息
    const route = routeResult.result.routes[0];
    const distance = route.distance; // 米
    const duration = route.duration; // 秒
    const steps = route.steps;       // 导航步骤

    // 4. 在地图上绘制��线
    mapService.displayRouteOnMap(routeResult);

    // 5. 显示详细信息面板
    showRouteInfo({
        distance: `${(distance/1000).toFixed(2)}公里`,
        duration: `${Math.floor(duration/60)}分钟`,
        steps: steps.map(s => s.instruction)
    });
}

// ✅ 最终方案：JSONP（成功！）
function jsonpRequest(url) {
    return new Promise((resolve, reject) => {
        // 1. 创建唯一callback名
        const callbackName = 'jsonp_callback_' + Date.now();
        const jsonpUrl = url + '&output=jsonp&callback=' + callbackName;
​
        // 2. 创建script标签（天然可跨域）
        const script = document.createElement('script');
        script.src = jsonpUrl;
​
        // 3. 定义全局callback函数
        window[callbackName] = function(data) {
            resolve(data);
            delete window[callbackName];
            document.body.removeChild(script);
        };
​
        // 4. 错误和超时处理
        script.onerror = () => reject(new Error('请求失败'));
        setTimeout(() => {
            if (window[callbackName]) {
                reject(new Error('请求超时'));
            }
        }, 10000);
​
        // 5. 执行
        document.body.appendChild(script);
    });
}
​
// 使用示例
const apiUrl = 'https://apis.map.qq.com/ws/place/v1/search?keyword=咖啡馆&key=YOUR_KEY';
jsonpRequest(apiUrl).then(data => {
    console.log('搜索成功:', data);
});

// ✅ 加强的地理编码验证
async geocoder(address) {
    const apiUrl = `https://apis.map.qq.com/ws/geocoder/v1/?address=${address}&key=${apiKey}`;
    const data = await this.jsonpRequest(apiUrl);
​
    console.log('地理编码完整响应:', data);
​
    // 第1层：检查API调用是否成功
    if (data.status !== 0) {
        console.error('地理编码API错误:', data.message);
        throw new Error(data.message || '未找到地址对应的坐标');
    }
​
    // 第2层：检查result字段
    if (!data.result) {
        console.error('返回数据缺少result字段:', data);
        throw new Error('返回数据格式错误：缺少result字段');
    }
​
    // 第3层：检查location字段
    if (!data.result.location) {
        console.error('返回数据缺少location字段:', data.result);
        throw new Error('返回数据格式错误：缺少location字段');
    }
​
    const location = data.result.location;
​
    // 第4层：检查坐标类型
    if (typeof location.lat !== 'number' || typeof location.lng !== 'number') {
        console.error('返回坐标格式错误:', location);
        throw new Error(`返回坐标格式错误：lat=${location.lat}, lng=${location.lng}`);
    }
​
    // 成功返回
    console.log('✅ 地理编码成功:', location);
    return { lat: location.lat, lng: location.lng };
}