【腾讯位置服务开发者征文大赛】AI 赋能小程序地图开发:腾讯地图 Miniprogram Skill 实战记录

【腾讯位置服务开发者征文大赛】AI 赋能小程序地图开发:腾讯地图 Miniprogram Skill 实战记录友友们 早上好 最近 2 个月我一直在探索大模型如何低成本 高效率调用地图能力 前段时间我使用了腾讯地图的 TMap Miniprogram Skill 它将官方文档 **实践与可验证代码模板封装为 AI 技能文件 让 Cursor Claude CodeBuddy 等工具精准理解小程序地图 API 大幅提升开发效率与代码质量 那么实际使用效果如何呢 今天就来和我一起看一下我的实战记录吧

大家好,我是讯享网,很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。



能力全覆盖: 整合地图组件、MapContext API、位置服务、LBS 后端 SDK,一站式满足地图展示、定位、POI 搜索、路线规划等需求。
模块化设计: 按功能拆分文档,AI 按需调用,回答更精准,避免无效信息干扰。
代码可验证: 内置 3 个完整示例项目,所有代码经过官方验证,AI 生成代码可直接运行。
深度集成: 无缝对接腾讯位置服务,支持地理编码、行政区划、距离计算等高级能力。

















我看了一下文档,Skill 覆盖小程序地图开发全场景,总结就是四大模块:

提供地图运行时操控能力,实现动态交互,比如:

对接微信官方位置接口,稳定获取位置信息:

推荐 Git 克隆,保证版本更新:

运行

#我们 先克隆skill仓库到本地 git clone https://github.com/TencentLBS/TencentMap_miniprogram_skills.git # 然后进入目录 cd TencentMap_miniprogram_skills 

在这里插入图片描述

当然这里,也可直接下载压缩包解压使用。

这里我以WorkBuddy 为例,当然它同时支持Cursor、CodeBuddy 和 Claude Desktop 支持通过 skills 目录加载自定义技能。步骤基本差不多,但是我实测和官方的文档有所区别,好像没有找到官方文档说的某些文件夹,不知道是不是后续改了没更新,大家按照我实测的来即可。如果有变化我也会同步更新这里的操作。

导入技能

下面我们开始验证是否成功,打开 AI IDE,输入测试指令比如:

帮我使用微信小程序地图组件开发一个功能:

  1. 显示当前位置的地图
  2. 添加一个自定义标记点
  3. 点击标记显示信息气泡

登录腾讯位置服务控制台

地图页面代码:

 
  
    
     
  
    
     
  
    
     
     
       公告栏| 
      
      
       
      
      
       
        
         
         
           {{item.msg}} 
          
         
        
       
      
     
  
    
     
  
    
     
      
       
       
        
        
       
       
        
       
       
        
        
       
       
        
        
       
       
        
       
       
        
       
      
        {{search_txt}} 
       
      
        {{search_txt2}} 
       
       
        
       
       
        
       
      
        {{scale_txt}} 
       
      
        {{satemap?'卫星':'街道'}} 
       
       
        
       
         {{userinfo_text}} 
        
       
       
        
        
          {{firstObj.txt1}} 
         
        
          {{firstObj.txt2}} 
         
        
          {{firstObj.txt3}} 
         
        
       
       
        
        
          {{secondObj.txt1}} 
         
        
          {{secondObj.txt2}} 
         
        
          {{secondObj.txt3}} 
         
        
       
       
        
        
          {{thirdObj.txt1}} 
         
        
          {{thirdObj.txt2}} 
         
        
          {{thirdObj.txt3}} 
         
        
        
     
  
    
     
      
      
        最大化 
       
      
        + 
       
      
        - 
       
      
        最小化 
       
      
      
      
       
       
        
         
          
          
          
           
           
             {{ item.name }} {{ item.time}} 
            
            
           
           
            
            
              {{item.content}} 
             
            
            
             
            
            
             
             
               "{{cur_voice_id==item.msgId?cur_voice_time:item.remark}} 
              
              
             
            
            
             
            
           
          
          
          
           
            
            
              {{item.time}} {{ item.name }} 
             
           
           
            
            
              {{item.content}} 
             
            
            
             
            
            
             
              
              
                {{cur_voice_id==item.msgId?cur_voice_time:item.remark}}" 
               
             
            
            
             
            
           
          
         
        
       
      
      
      
      
      
{{increase?'-':'+'}}
相册 {{msg_type?"录音":"文字"}} 拍摄

调用机器人:

Page({ data: { messages: [], // 对话列表 inputValue: '', loading: false }, // 输入 onInput(e) ) }, // 发送消息 async sendMessage() { const { inputValue, messages } = this.data if (!inputValue.trim() || this.data.loading) return // 加入用户消息 this.setData({ messages: [...messages, { role: 'user', content: inputValue }], inputValue: '', loading: true }) try { // 调用云开发AI机器人 const res = await wx.cloud.extend.AI.bot.sendMessage({ data: { botId: '你的botId', msg: inputValue } }) // 流式接收回复 let reply = '' for await (const chunk of res.textStream) ] }) } } catch (err) { console.error('调用失败', err) } this.setData({ loading: false }) } }) 

集合了地图的基础功能放大,缩小、级别显示、定位、导航。然后公告接入了天气信息、新闻消息。同时内置了聊天功能,可以发送消息和智能体进行沟通交流。这里智能体需要云开发功能。有需要,可以看下小程序的官方文档。

小讯
上一篇 2026-04-18 11:27
下一篇 2026-04-18 11:25

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请联系我们,一经查实,本站将立刻删除。
如需转载请保留出处:https://51itzy.com/kjqy/270405.html