作者: guozhao265 发布时间: 已于 2026-05-08 21:45:48 修改
来源: https://blog.csdn.net/guozhao265/article/details/160668971
随着 AI 技术与位置服务的深度融合,地图产品已从基础导航工具,逐步升级为具备智能交互、知识承载、生活服务能力的综合平台。但当前主流地图及社交文旅平台普遍存在明显短板:产品多以商业出行、餐饮娱乐、景点攻略为核心导向,大量散落在民间的老城记忆、街巷典故、逸闻野史、民俗非遗内容,缺乏系统化的沉淀入口;传统地图以商业化 POI 收录为主,对无名老街、民间轶事、本土人文记忆等非商业化内容长期缺失,导致这些珍贵的城市人文印记难以被挖掘、被传承。
同时,现有文旅平台多为固化的景点介绍,采用单一死板的分类逻辑,缺少贴合用户游玩偏好、人文兴趣的内容梳理方式;普通用户只能被动浏览现成攻略,无法便捷参与内容补充、纠错完善,难以形成 “大众共建、全民传承” 的知识生态。为此,我们参考百科类产品大众编辑、词条勘误的成熟模式,结合腾讯位置服务的核心技术能力,打造「城识我知」原创城市人文风物众包共建平台,聚焦非商业化人文内容沉淀,打造可发布、可增补、可勘误、可沿路漫游的城市人文知识生态,让城市每一处街巷风物都被记录、被传承。
「城识我知」是基于腾讯位置服务打造的城市人文风物众包共建平台。产品摒弃传统地图导航与商业生活服务的内卷,专注城市街巷、历史古迹、逸闻野史、自然风物、民俗非遗五大人文领域,构建用户自主发布、众包增补、AI 自治勘误、沿路人文漫游的轻量化共建生态,实现 “行走城市、读懂风物、全民共建、留住记忆” 的产品核心价值。
与高德地图周边、大众点评等商业软件形成鲜明差异,本产平台刻意剔除所有商业化元素,彻底摒弃餐饮、酒店、商超等商业POI收录、商业广告植入、流量变现导向等逻辑,不做任何商业场景的延伸,专注于非商业化城市人文内容的沉淀与传承,坚守纯粹的人文属性,这也是产品区别于各类商业平台的核心特征。
用户可在地图任意空白位置自主打点,创建全新人文知识点位,按照五大人文风物谱系归属对应类别,发布城市街巷、历史古迹、逸闻野史等原创内容。系统严格屏蔽餐饮、酒店、商超等商业 POI,仅保留城市地标、古迹景观、民俗点位及用户原创人文内容,坚守平台纯粹的人文属性。
平台采用五大人文风物谱系作为唯一分类体系,涵盖老城街巷、历史古迹、逸闻野史、自然风物、民俗非遗。该体系贯穿点位发布归类、首页左侧分类筛选、路线沿途内容筛选全场景,逻辑统一简洁,既方便用户按兴趣精准查找所需人文内容,也形成了区别于普通地图商业化分类的独特人文梳理逻辑。
平台基于用户实时定位,自动筛选周边指定半径内的人文知识点与地标景观,按照内容质量、用户认同数量进行智能排序。支持同一地理点位汇聚多条用户分享的人文知识,用户可滑动切换浏览不同创作者的在地感悟,每条内容独立展示文案介绍与 AI 精简摘要,实现人文内容的高效聚合与便捷浏览。
用户可通过自然语言发起人文类提问,例如 “这条老街有什么历史故事?”“本地有哪些小众人文打卡点?”。系统通过 AI 意图识别,精准匹配周边人文知识点与地标信息,生成通俗易懂、简洁精准的解答。针对同一点位的多条内容,AI 会自动聚合提炼核心要点,为用户提供精简优质的在地资讯,提升信息获取效率。
同时,基于 AI Agent 实现智能交互,用户可通过文字指令完成点位检索、信息查询等操作,进一步弱化手动地图操作,提升人文阅览的便捷性与智能化体验,让人文知识的获取更高效、更贴合用户需求。
为保障平台人文内容的纯粹性、严谨性,规避商业化侵蚀与内容乱象,针对共创模式下可能出现的问题,制定以下管控举措,防范软广、软文泛滥,杜绝无效内容、同质内容堆积,规避信息垃圾与违规信息:
本项目完全基于腾讯位置服务生态开发,技术栈轻量化、易落地、易复现,代码由 CodeBuddy 快速完成开发与 Demo 搭建。产品采用四层轻量化架构设计,分别为前端交互层、业务服务层、智能协同层、腾讯位置服务底座,架构逻辑清晰、耦合度低,既适配 MVP 阶段的快速落地,也为后续迭代扩展预留空间。

本项目采用「地图底座 + AI智能 + 协议协同 + 开发工具」四位一体的技术架构,各层级紧密配合,共同支撑产品功能落地。
前端交互层 (HTML/CSS/JS)
↓
MCP Client
↓
CloudBase 云开发 (MCP Server)
↓
混元大模型 (AI 智能处理)
↓
腾讯位置服务 (地图/检索/路线)
<!-- index.html 中加载腾讯地图 GL SDK -->
<!-- 关键参数:libraries=service 加载服务类附加库 -->
<script src="https://map.qq.com/api/gljs?v=1.exp&key=你的KEY&libraries=service"></script>
// src/js/map.js - 腾讯地图初始化
import { AppState } from './state.js';
export function initTencentMap() {
if (AppState.mapInstance) return;
var myLocation = getCurrentLocation();
AppState.mapInstance = new TMap.Map(document.getElementById('tencentMap'), {
center: new TMap.LatLng(myLocation.lat, myLocation.lng),
zoom: 14,
mapStyleId: 'style2',
pitch: 0,
showControl: false,
minZoom: 10,
maxZoom: 18
});
var tilesLoadedOnce = false;
AppState.mapInstance.on('tilesloaded', async function() {
if (!tilesLoadedOnce) {
tilesLoadedOnce = true;
renderMapMarkers();
}
});
}
// 地理编码:地址转坐标
function geocodeAddressGL(address) {
return new Promise(function(resolve, reject) {
if (!isServiceReady()) {
reject(new Error('地图服务未初始化'));
return;
}
var geocoder = new TMap.service.Geocoder();
geocoder.getLocation({ address: address })
.then(function(result) {
if (result.data && result.data.length > 0) {
resolve(result.data[0]);
} else {
reject(new Error('未找到该地址'));
}
})
.catch(function(error) {
reject(error);
});
});
}
// 逆地理编码:坐标转地址
function reverseGeocodeGL(latlng) {
return new Promise(function(resolve, reject) {
if (!isServiceReady()) {
reject(new Error('地图服务未初始化'));
return;
}
var geocoder = new TMap.service.Geocoder();
geocoder.getAddress({ location: latlng })
.then(function(result) {
if (result.data && result.data.length > 0) {
resolve(result.data[0].address);
} else {
resolve('未知位置');
}
})
.catch(function(error) {
reject(error);
});
});
}
// 路线规划核心函数
// mode: 'walk'(步行) / 'drive'(驾车) / 'jog'(骑行/慢跑)
function searchRouteGL(startLatLng, endLatLng, mode) {
return new Promise(function(resolve, reject) {
if (!TMap || !TMap.service) {
reject(new Error('地图服务未初始化'));
return;
}
// 【技术亮点】根据模式动态选择服务类
var RouteClass;
if (mode === 'drive') {
RouteClass = TMap.service.Driving; // 驾车路线
} else if (mode === 'jog' || mode === 'bicycle') {
RouteClass = TMap.service.Bicycling; // 骑行/慢跑路线
} else {
RouteClass = TMap.service.Walking; // 步行路线
}
var routeService = new RouteClass();
routeService.search({ from: startLatLng, to: endLatLng })
.then(function(result) {
var routes = result.result && result.result.routes;
if (routes && routes.length > 0) {
resolve({ routes: routes });
} else {
reject(new Error('未找到路线'));
}
})
.catch(function(error) {
reject(error);
});
});
}
// 多模式路线规划(漫游路线)
export async function planAllRoamingRoutes(startLatLng, endLatLng, nearbyPoints) {
var modes = ['walk', 'jog', 'drive'];
var results = {};
var promises = modes.map(async function(mode) {
try {
results[mode] = await searchRouteGL(startLatLng, endLatLng, mode);
} catch (error) {
console.error('mode=', mode, '失败:', error);
}
});
await Promise.all(promises);
return results;
}
// src/js/ai.js - AI Agent 智能助手
import { CLOUDBASE_CONFIG } from './config.js';
async function initCloudBaseAI() {
const cloudbase = (await import('@cloudbase/js-sdk')).default;
cloudbaseApp = cloudbase.init({
env: CLOUDBASE_CONFIG.env,
accessKey: CLOUDBASE_CONFIG.accessKey
});
await cloudbaseApp.auth().signInAnonymously();
const ai = cloudbaseApp.ai();
aiModel = ai.createModel('hunyuan-exp');
return true;
}
function buildSystemPrompt() {
var locationInfo = getCurrentLocationInfo();
let knowledgeContext = '';
if (typeof KNOWLEDGE_DATA !== 'undefined' && KNOWLEDGE_DATA.points) {
knowledgeContext = KNOWLEDGE_DATA.points.slice(0, 50).map(p => {
return `【${p.name}】(${p.category}) 距你${p.distance}km`;
}).join('\n');
}
return `你是「城识我知」城市人文探索助手。\n当前位置:${locationInfo}\n知识库:\n${knowledgeContext}`;
}
async function askAI(userMessage) {
if (isAITyping) return;
isAITyping = true;
try {
const messagesForAI = [
{ role: 'system', content: buildSystemPrompt() },
{ role: 'user', content: userMessage }
];
await streamHunyuanAI(messagesForAI, (chunk) => {}, (result) => {});
} catch (error) {
console.error('AI 问答失败:', error);
} finally {
isAITyping = false;
}
}
// POI 搜索:基于关键词检索人文相关点位
function searchPOIByKeyword(keyword, latlng) {
return new Promise(function(resolve, reject) {
if (!TMap || !TMap.service) {
reject(new Error('地图服务未初始化'));
return;
}
var searchService = new TMap.service.Search();
searchService.searchAround({
keyword: keyword,
center: latlng,
radius: 3000, // 3公里范围
pageSize: 20
}).then(function(result) {
var pois = result.data || [];
resolve(pois);
}).catch(function(error) {
reject(error);
});
});
}
// 矩形区域搜索:适合路线沿途范围检索
function searchPOIInBounds(keyword, bounds) {
return new Promise(function(resolve, reject) {
var searchService = new TMap.service.Search();
searchService.searchInBounds({
keyword: keyword,
bounds: bounds, // TMap.LatLngBounds 对象
pageSize: 50
}).then(function(result) {
resolve(result.data || []);
}).catch(function(error) {
reject(error);
});
});
}
// 智能提示:搜索框实时补全建议
function getSuggestion(keyword, city) {
return new Promise(function(resolve, reject) {
if (!keyword || keyword.length < 2) {
resolve([]);
return;
}
var suggestionService = new TMap.service.Suggestion();
suggestionService.getSuggestions({
keyword: keyword,
region: city,
region_fix: true // 固定当前城市
}).then(function(result) {
var suggestions = result.data || [];
resolve(suggestions);
}).catch(function(error) {
reject(error);
});
});
}
// 前端调用示例(搜索补全)
inputElement.addEventListener('input', debounce(async function() {
var keyword = this.value.trim();
if (keyword.length >= 2) {
try {
var suggestions = await getSuggestion(keyword);
renderSuggestionList(suggestions); // 渲染下拉提示列表
} catch (error) {
console.error('提示获取失败:', error);
}
}
}, 300));
// 行政区划查询:获取城市边界与人文区域划分
function getDistrictInfo(districtName) {
return new Promise(function(resolve, reject) {
var districtService = new TMap.service.District();
districtService.search({
keyword: districtName,
level: TMap.constants.DistrictLevel.CITY // 查询市级行政区
}).then(function(result) {
if (result.result && result.result[0]) {
var district = result.result[0];
resolve({
name: district.name,
center: district.center, // 行政区中心点
bounds: district.bounds, // 行政区边界
districtId: district.id
});
} else {
reject(new Error('未找到该行政区'));
}
}).catch(function(error) {
reject(error);
});
});
}
// 获取行政区边界并渲染人文分区
async function renderDistrictBoundary(districtName) {
try {
var info = await getDistrictInfo(districtName);
var bounds = new TMap.LatLngBounds(
new TMap.LatLng(info.bounds.southwest.lat, info.bounds.southwest.lng),
new TMap.LatLng(info.bounds.northeast.lat, info.bounds.northeast.lng)
);
// 渲染边界线
var polylineLayer = new TMap.MultiPolyline({
id: 'district-boundary',
styles: {
style1: new TMap.PolylineStyle({
color: '#666666',
width: 2,
opacity: 0.6,
lineStyle: 'dashed'
})
},
geometries: [{
style: 'style1',
paths: info.bounds.border
}]
});
AppState.mapInstance.addLayer(polylineLayer);
return info;
} catch (error) {
console.error('行政区渲染失败:', error);
}
}
CodeBuddy 作为智能开发助手,在本项目中实现了地图功能的快速开发与迭代:
地图初始化快速搭建:借助 CodeBuddy 的代码生成能力,直接输出腾讯地图 GL 初始化模板代码,用户仅需功能微调;
服务类调用自动化:路线规划、POI搜索、逆地理编码等高频服务类调用,CodeBuddy 可根据自然语言描述自动生成 Promise 封装代码,降低异步处理复杂度;
交互逻辑快速实现:弹窗渲染、列表渲染、事件绑定等前端交互逻辑,CodeBuddy 可根据功能描述快速生成 DOM 操作代码,配合腾讯地图 API 实现快速原型验证。
// CodeBuddy 辅助生成的地图标记代码模板
function createMarker(latlng, title, onClick) {
var marker = new TMap.MultiMarker({
id: 'marker-' + Date.now(),
styles: { ... },
geometries: [{ position: latlng, title: title }]
});
marker.on('click', onClick);
AppState.mapInstance.addLayer(marker);
return marker;
}
混元大模型在项目中承担智能问答与内容摘要的核心能力:
智能问答调度:用户输入自然语言查询(如"附近有什么老街故事?"),前端通过 MCP 协议将请求发送至 AI Agent,Agent 调用混元大模型生成回答。回答内容基于人文知识点库与用户位置信息进行上下文增强,确保回复贴合本地人文场景;
内容摘要自动化:用户发布的点位长文本介绍,由 AI 自动提炼为精简摘要(100字以内),便于在路线图鉴、信息流中快速展示。摘要生成调用混元大模型的文本生成接口,输入原文本与摘要长度约束,输出精炼内容;
// AI 内容摘要生成(混元大模型调用)
async function generateSummary(longText) {
const response = await cloudbaseApp.ai().createModel('hunyuan-exp').chatComplete({
messages: [{
role: 'user',
content: `请将以下人文介绍精简为100字以内的摘要:\n${longText}`
}],
temperature: 0.7,
max_tokens: 200
});
return response.choices[0].message.content;
}
意图识别与路由:混元大模型还承担用户意图识别任务,判断用户查询属于点位搜索、路线规划、还是人文知识问答,进而路由至对应功能模块。
MCP(Model Context Protocol)协议在本项目中实现前后端与 AI 能力的标准化调度:
协议架构:前端交互层 → MCP Client → MCP Server(腾讯云开发 CloudBase)→ 混元大模型。前端通过 MCP 协议封装用户请求(JSON格式),经云开发网关透传至大模型,大模型返回结果后经协议解析回传前端渲染;
// MCP 协议请求封装示例
async function mcpRequest(intent, params) {
const request = {
protocol: 'mcp-v1',
method: intent, // 'humanity.search' | 'route.plan' | 'ai.chat'
params: params, // { keyword, location, mode }
sessionId: getSessionId()
};
const cloudbase = cloudbaseApp;
const result = await cloudbase.callContainer({
service: 'ai-agent',
path: '/dispatch',
method: 'POST',
data: request
});
return JSON.parse(result.data);
}
能力扩展:MCP 协议的标准化接口设计,便于后续扩展更多 AI 能力(如图片识别、多轮对话上下文管理),只需在 MCP Server 侧注册新方法,前端无需改动即可调用新能力;
前后端解耦:MCP 协议屏蔽了大模型调用的复杂性,前端仅需关注交互逻辑,无需处理鉴权、超时、重试等细节,降低开发成本。
图1地图主页运行效果图2点位发布弹窗运行效果
图3路线沿途人文图鉴运行效果
图4AI 智能问答运行效果
本项目已完成可运行Demo搭建(由 CodeBuddy 快速开发实现),Demo可正常演示核心功能:
演示视频:
📹 嵌入式视频: https://live.csdn.net/v/embed/525191
演示视频
当前阶段,「城识我知」项目仍处于打磨完善阶段,主要以产品创意呈现、核心功能梳理为主,重点梳理 “发布 - 增补 - 勘误 - 漫游” 的核心闭环,暂未涉及大规模落地,当前核心工作是梳理平台建设思路、完善基础框架,同时搭建简单的交互逻辑,确保每一步都贴合产品定位。
当前主流地图 APP 均以导航、商业服务为核心,普遍缺失非商业化的人文内容,而「城识我知」精准填补了这一空白 —— 聚焦城市人文记忆的挖掘与传播,不涉及商业引流,不添加冗余功能,仅围绕人文点位、街巷典故、民俗文化展开,打造纯粹的人文体验。 结合项目定位,「城识我知」未来尝试与腾讯地图生态联动,依托腾讯位置服务的技术支撑,逐步完善人文点位布局、优化交互体验,同时平台的人文数据亦可反哺腾讯地图生态。
后续,我们将在现有基础上,持续优化产品细节,完善人文内容补充、勘误纠错等核心功能,打磨产品调性,逐步丰富人文场景,让 “城市人文 + 位置服务” 的模式落地,既保留人文底蕴,又依托腾讯位置服务的技术优势,让更多人通过这一平台,感受城市的人文温度,传承城市文化脉络。
「城识我知」跳出传统地图商业出行与普通文旅攻略的同质化内卷,以城市人文风物众包共建为核心定位,依托腾讯位置服务的基础技术能力,构建起五大人文谱系分类、专属共建互动、百科式内容增补勘误、沿途人文漫游图鉴的完整产品生态。
产品聚焦 “人文传承、大众共建” 核心价值,剔除冗余功能,每一项设计都围绕人文传承、大众共建、文旅漫游展开,既避开了主流平台功能重复的短板,又形成了自身独有的产品差异化竞争力。未来,我们将持续依托腾讯位置服务的技术优势,不断优化产品体验,让位置服务不止于行路导航,更能读懂城市街巷、传承民间风物、留存本土岁月记忆,为城市人文传承注入新的活力。
感谢腾讯位置服务提供强大的技术底座与本次征文大赛展示平台,也欢迎各位开发者、人文爱好者点赞、评论、转发,一起探讨位置服务与城市人文共建的更多可能性。
作者: 松露巧克力手机壳 发布时间: 最新推荐文章于20260516 11:16:07发布 来源
在物流运输共享出行外卖配送等依赖移动轨迹管理的行业中,轨迹回放是解决过程可追溯责任可界定效率可优化的
在移动应用物流系统或智慧城市项目中,Java作为后端主流语言,常需与地图能力深度集成无论是调用地理编