AI+地图：一句话，实现智能周边推荐与路线规划

原创

china马斯克

发布于 2026-04-02 10:51:47

1370

友友们，大家好，经常做地图开发的都知道，在传统地图开发中，周边搜索、路线规划、筛选排序往往需要硬编码多套接口逻辑，参数繁琐、扩展性差。用户需要经过输入关键词→筛选条件→选择排序方式→点击路线规划等多个步骤，才能完成一次简单的出行需求；而开发者则需要处理复杂的参数判断，不仅开发效率低，且扩展性差，难以适配用户多样化的自然语言需求。比如简单的，用户想实现5公里内评分大于4.6的咖啡店，按距离最近规划步行路线，传统开发模式下，需要单独开发关键词搜索、范围筛选、评分过滤、排序、路线规划等多个模块，且无法直接响应自然语言指令。

基于此，我今天分享结合腾讯位置服务（WebService API + JavaScript API GL）与AI自然语言解析技术，实现了一套一句话完成复杂地图操作的智能出行助手——用户只需输入自然语句，系统即可自动完成语义解析、POI搜索、最优推荐、路线计算和地图渲染，既简化了用户操作，也降低了开发者的开发成本。

一、技术选型与整体架构

技术栈

地图渲染：腾讯地图 JavaScript API GL（v1.exp）
核心接口：腾讯位置服务 WebService API（POI 搜索、路线规划）
前端：原生 JavaScript + HTML5 + CSS3
AI 解析：正则语义解析（可对接豆包、通义千问、ChatGLM 等大模型）

核心能力

自然语言转地图参数
多条件 POI 精准搜索
步行/驾车路线规划
地图点位与路线自动渲染
结果弹窗友好提示

整体流程

用户输入自然语言指令
AI 解析为结构化参数
调用 POI 搜索获取最优点位
调用路线规划接口计算路线
地图渲染 + 结果提示

二、前期准备（腾讯位置服务 Key 配置）

登录腾讯位置服务控制台
创建应用 → 添加 Key
勾选：WebService API、JavaScript API GL
域名白名单本地开发填 *，线上填真实域名
记录 Key，替换到代码中

三、完整可运行代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>AI+地图智能推荐</title>
<style>
body{margin:0;padding:10px;background:#f5f5f5;}
#map{width:100%;height:70vh;border-radius:8px;}
.input-area{margin-bottom:10px;display:flex;gap:8px;}
#query{flex:1;padding:12px;border:1px solid #ddd;border-radius:6px;}
#searchBtn{padding:12px 20px;background:#12B7F5;color:white;border:none;border-radius:6px;cursor:pointer;}
</style>
</head>
<body>
<div class="input-area">
<input id="query" placeholder="例：5公里内评分>4.6咖啡店，按距离最近，步行路线" 
value="5公里内评分>4.6的咖啡店，按距离最近，规划步行路线">
<button id="searchBtn">AI 解析搜索</button>
</div>
<div id="map"></div>
<script src="https://map.qq.com/api/gljs?v=1.exp&key=你的KEY"></script>
<script>
// 初始化地图
const center = new TMap.LatLng(39.9046, 116.4074); // 北京
const map = new TMap.Map("map", { center, zoom:14 });
let markerLayer, polylineLayer;

// AI 语义解析
function aiParseQuery(text) {
  const res = {
    keyword:"咖啡店", radius:5000, sort:"distance", filter:"rating>=4.6", naviType:"walking"
  };
  if(/公里/.test(text)) res.radius = parseInt(text.match(/(\d+)公里/)[1])*1000;
  if(/评分>?(\d+\.?\d*)/.test(text)) res.filter = `rating>=${text.match(/评分>?(\d+\.?\d*)/)[1]}`;
  if(/距离最近/.test(text)) res.sort = "distance";
  if(/评分最高/.test(text)) res.sort = "rating";
  if(/步行/.test(text)) res.naviType = "walking";
  if(/驾车/.test(text)) res.naviType = "driving";
  if(/餐厅|火锅|烧烤|咖啡/.test(text)) res.keyword = text.match(/(餐厅|火锅|烧烤|咖啡店)/)[1];
  return res;
}

// POI 搜索
async function searchPOI(params) {
  const key = "你的KEY";
  const url = `https://apis.map.qq.com/ws/place/v1/search`
    +`?keyword=${encodeURIComponent(params.keyword)}`
    +`&boundary=nearby(${center.lat},${center.lng},${params.radius})`
    +`&orderby=${params.sort}&filter=${params.filter}&page_size=5&key=${key}&output=jsonp`;
  return new Promise(resolve=>{
    const script = document.createElement('script');
    window.callback = data=>resolve(data?.data?.[0]||null);
    script.src = url+'&callback=callback';
    document.body.appendChild(script);
  });
}

// 路线规划
async function getRoute(from,to,type) {
  const key = "你的KEY";
  const api = type==="driving"?"driving":"walking";
  const url = `https://apis.map.qq.com/ws/direction/v1/${api}/`
    +`?from=${from.lat},${from.lng}&to=${to.lat},${to.lng}&key=${key}&output=jsonp`;
  return new Promise(resolve=>{
    const script = document.createElement('script');
    window.routeCb = data=>resolve(data?.result?.routes?.[0]||null);
    script.src = url+'&callback=routeCb';
    document.body.appendChild(script);
  });
}

// 地图绘制
function drawMap(to,coords) {
  if(markerLayer) markerLayer.setMap(null);
  if(polylineLayer) polylineLayer.setMap(null);
  markerLayer = new TMap.MultiMarker({
    map, geometries:[{position:to, content:"推荐"}]
  });
  const path = coords.map(p=>new TMap.LatLng(p.lat,p.lng));
  polylineLayer = new TMap.MultiPolyline({
    map, geometries:[{
      paths:path, style:{color:"#12B7F5", width:6}
    }]
  });
  map.fitBounds(path);
}

// 主流程
document.getElementById('searchBtn').onclick = async ()=>{
  const text = document.getElementById('query').value;
  const params = aiParseQuery(text);
  const poi = await searchPOI(params);
  if(!poi) return alert("未找到符合条件结果");
  const to = new TMap.LatLng(poi.location.lat, poi.location.lng);
  const route = await getRoute(center,to,params.naviType);
  if(!route) return alert("路线失败");
  drawMap(to, route.polyline);
  alert(`推荐：${poi.title}\n地址：${poi.address}\n距离：${route.distance}m`);
};
</script>
</body>
</html>

四、代码模块说明

全局配置：替换 Key、修改默认坐标（如北京/上海/广州）
地图初始化：创建地图实例、设置中心点与缩放级别
AI 解析模块：正则提取公里、评分、排序、出行方式、关键词
POI 搜索：调用腾讯 place/v1/search，支持范围、评分、排序筛选
路线规划：支持步行/驾车，返回坐标串与距离
地图绘制：清理旧图层、添加标记、绘制路线、自动适配视野
主流程：输入→解析→搜索→路线→渲染→提示

五、测试用例（直接复制使用）

3 公里内评分>4.5 的火锅，驾车路线
2 公里内评分>4.7 的奶茶店，按距离最近，步行路线
1 公里内评分>4.4 的餐厅，按评分最高
5 公里内的酒店，驾车路线

六、常见问题与排错

在运行代码或二次开发过程中，可能会遇到一些问题，我也整理了常见问题及解决方法，帮助大家快速排错：

接口调用失败，控制台报错“Invalid Key”

原因：Key错误或未配置权限。

解决方法：

- 检查Key是否正确，确保替换了代码中的两处“你的KEY”；

- 登录腾讯位置服务控制台，检查应用的Key是否开启了“WebService API”和“JavaScript API GL”权限；

- 检查域名白名单配置，本地开发可设置为“*”，线上部署需填写具体域名。

未找到符合条件的点位，弹窗提示“未找到符合条件的点位”

原因：搜索条件过于严格（如范围太小、评分太高），或关键词错误。

解决方法：

- 调整搜索范围（如将3公里改为5公里）；

- 降低评分条件（如将4.6改为4.0）；

- 检查关键词是否正确，确保关键词在腾讯POI数据库中存在（如“咖啡店”“火锅”等常见关键词）。

路线规划失败，弹窗提示“路线规划失败”

原因：起点或终点坐标错误，或网络连接异常。

解决方法：

- 检查起点坐标（center）是否正确，确保是有效的经纬度；

- 检查POI搜索结果是否正常，确保toPoint坐标有效；

- 检查网络连接，刷新页面后重试。

地图不显示，或点位、路线不绘制

原因：地图初始化失败，或图层未正确绑定到地图实例。

解决方法：

- 检查腾讯地图JavaScript API GL的引入是否正确，确保URL中的Key已替换；

- 检查map实例是否初始化成功，可在控制台打印map，查看是否有值；

- 检查markerLayer和lineLayer是否绑定了map实例（drawMap函数中，确保map参数正确）。

七、总结

最后简单总结一下，这里我们基于腾讯位置服务与AI自然语言解析技术，实现了一套轻量化、可运行、可扩展的AI+地图智能出行助手。完全实现简化了用户的地图操作流程（一句话完成复杂需求），降低了开发者的开发成本（无框架依赖、开箱即用），同时具备较强的扩展性，可根据需求扩展多场景、多端适配，满足不同开发者的二次开发需求。希望本文的方案能为广大开发者提供参考与帮助。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯位置服务

腾讯地图

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯位置服务

腾讯地图

登录后参与评论

0 条评论

热度