【腾讯位置服务开发者征文大赛】AI免费停车，AI查找免费停车位

作者: ihoudf 发布时间: 已于 2026-04-15 19:12:13 修改
来源: https://blog.csdn.net/hdfqq188816190/article/details/160120307

一、作品背景/创意来源

世界那么大，我想去看看。

2023年4月份，我们开启了一场全国自驾游，开着我们的二手老别克转了半个中国。衣食住行在这次旅行中，住宿是花销的一个大头。为了省钱和方便，我们有时会住在车里，而这就面临一个问题，车停在哪里？既然都住在车里了，停车费也得该省就省吧。在我们出去的三个多月里，几乎一半多时间我们都是住在车里。为了安全，我们会停在城市或人家多的地方，这无疑也会增加找到免费停车点的难度。而幸运的是，我们每次都能找到免费停车过夜的地方，即便是在泉州、桂林、成都等大城市也不例外。有些停车点因为它太完美，我们甚至会把它的地址备份到聊天记录里，尽管我们可能再也没机会去。所以也许你会好奇，我们是怎么找到它们的。

让我来揭秘吧。当我们每到达一个地方时，我们会先临时停在路边，在地图上搜索周围的公共厕所（方便洗漱）、公园等地方，查看是否有停车场，看评论停车是否需要花钱，还有一个好帮手是利用百度地图的街景功能，通过查看实地情况，我们再决定要不要去。虽然每次我们都找到了非常棒的停车点（至少免费且安全），但这也不是那么容易找到的，每次花半个小时甚至一个小时去找，是再正常不过的了。因为并不是每次都能仅凭地图自带的功能就能找到完美的停车点，一些时候我们还是会一边开车一边查看路边有哪些好的停车点。所以那时我就想，能不能开发一款找免费停车点的软件。

再后来，我们开车回到北京，作为没有京牌的北漂，想要免费停车，那你也得好好下点功夫才能找到。很多周末我们去周边旅游，还带着一个目的，就是找能免费停车的地方，最好是停车位，因为这样对车也安全。为了找到免费停车位，有几个周末，我骑着电瓶车，在家周围几公里的范围转了好多圈。功夫不负有心人，我找到了，位置在东管头南地铁站C口出来后面的一个公园的停车位，距离家近，一直免费，有监控，晚上还有路灯。当然还有好多我们发现的“秘密停车基地”，非常棒的停车点。所以，现在问题是，资源是有的，就是你要花时间去找。

所以为什么不把这些资源集中起来，让用户轻松得到呢。那时还没有AI，所以那时想的是：免费停车点的数据要依赖广大网友的贡献。比如一个网友提交了一个免费停车点，别的网友开车到这个地点后，发现真的可以免费停车，可以赞赏提交停车点的人。

二、技术架构与实现思路

现在有了AI，我开发了一款基于腾讯地图的使用AI找免费停车点的应用。

本人专职是iOS开发。在这里，1、技术选型上：

我选用了uniapp跨平台方案，用来实现前端页面的展示和逻辑交互。

使用阿里百炼智能体作为停车点数据提供者。

使用cursor作为程序开发工具。

使用cloudflare pages提供的免费的网页托管服务。

使用iconfont提供的marker图标。

2、实现步骤上：

先使用阿里云百炼搭建AI停车智能体，提示词目前比较简单，主要是通过传入的经纬度查找周围5公里范围内的免费停车点，按照json格式返回。以下是完整提示词：

你是一个地图数据大师，有最新的地图和街景数据，给你一个经纬度，你查找这个经纬度附近5公里范围内的可以免费停车的停车点。输出格式是json格式数据：data是一个数组，元素最多5个，最少一个。数组中有你的停车点数据格式如下：{“name”: “地点名称”, “latitude”: “纬度”, “longitude”: “经度”,“distance”: “400米或者3公里”, “description”: “备注” }。备注围绕停车的限制，时间段等展开。

智能体测试通过后，使用cursor的agent模式开始开发页面和逻辑。重要环节包括：使用uniapp的map组件实现地图功能，使用uni.getLocation实现当前定位，使用uni.openLocation实现导航。调用腾讯位置服务WebService API的“关键词输入提示”（文档地址：文档）实现停车点列表展示。AI智能体采用API接入方式。

测试通过后，打包，上传到cloudflare的pages发布到线上。

3、交互流程上：

【1】页面主体是一个地图，页面下方有个输入框，用户可以输入目标停车点的位置（如下图）

【2】用户输入目标停车点，比如“香山”，点击“查找免费车位”，会弹出具体的位置列表

以下代码是根据关键词获取位置列表

  // H5环境：使用JSONP避免CORS跨域
  if (typeof window !== 'undefined' && typeof document !== 'undefined') {
    return new Promise((resolve) => {
      const callbackName = `qqmap_cb_${Date.now()}_${Math.random().toString(36).slice(2)}`
      const script = document.createElement('script')
      script.src = `https://apis.map.qq.com/ws/place/v1/suggestion?${params}&output=jsonp&callback=${callbackName}`
      ;(window as any)[callbackName] = (res: any) => {
        delete (window as any)[callbackName]
        if (script.parentNode) document.head.removeChild(script)
        const ok = res && res.status === 0 && Array.isArray(res.data)
        resolve({ data: res, results: ok ? res.data : [] })
      }
      script.onerror = () => {
        delete (window as any)[callbackName]
        if (script.parentNode) document.head.removeChild(script)
        resolve({ data: null, results: [] })
      }
      document.head.appendChild(script)
    })
  }
  // 非H5环境（小程序等）：直接请求，无CORS限制
  return new Promise((resolve) => {
    uni.request({
      url: `https://apis.map.qq.com/ws/place/v1/suggestion?${params}&output=json`,
      method: 'GET',
      success: (res) => {
        let data: any | null = null
        try {
          data = typeof res.data === 'string' ? JSON.parse(res.data) : res.data
        } catch {
          data = null
        }
        const ok = res.statusCode === 200 && !!data && data.status === 0 && Array.isArray(data.data)
        resolve({ data, results: ok ? data.data : [] })
      },
      fail: (err) => {
        console.error('搜索建议请求失败:', err)
        resolve({ data: null, results: [] })
      },
    })
  })

【3】用户点击列表中的某一项后，首先地图会定位到用户选择的地点，然后将目标点的经纬度传给ai，让ai查询目标点周围5公里的免费停车点。

// 处理用户选择搜索结果的事件
async function handleSelectSearchResult(item: any) {
  // 隐藏搜索结果列表
  showSearchResults.value = false
  searchResults.value = []
  
  // 保存用户选择的目标地点名称
  selectedLocationTitle.value = item.title
  
  // 定位到选择的地点
  await applyLocation(item.location.lat, item.location.lng, item.title, `已定位到：${item.title}`)
  
  // 调用DashScope API获取结果
  try {
    // 显示AI搜索状态提示，包含用户选择的地点名称
    aiSearchStatus.value = `AI正在为您搜索【${item.title}】周边免费停车点...`
    showAiSearchStatus.value = true
    // 格式化经纬度为API要求的格式
    const prompt = `${item.location.lat.toFixed(6)}° N, ${item.location.lng.toFixed(6)}° E`
    
 // 鉴权key这里用xxxxxxxxxxxxxxxxxxxx隐藏了
    const response = await uni.request({
      url: 'https://dashscope.aliyuncs.com/api/v1/apps/xxxxxxxxxxxxxxxxxxxx/completion',
      method: 'POST',
      header: {
        'Authorization': 'Bearer sk-xxxxxxxxxxxxxxxxxxxx',
        'Content-Type': 'application/json'
      },
      data: {
        input: {
          prompt: prompt
        },
        parameters: {}
      }
    })
    
    // 打印API返回结果
    console.log('DashScope API返回结果:', response.data)
    
    // 请求成功，隐藏状态提示
    showAiSearchStatus.value = false
    aiSearchStatus.value = ''
    
    // 解析返回结果中的text字段
    if (response.data && response.data.output && response.data.output.text) {
      const text = response.data.output.text
      try {
        const parkingData = JSON.parse(text)
        if (parkingData.data && Array.isArray(parkingData.data)) {
          // 清除原有标记，只保留用户选择的地点
          markers.value = markers.value.filter(m => m.id === 1)
          
          // 为每个停车场添加标记
          parkingData.data.forEach((parking: any, index: number) => {
            if (parking.latitude && parking.longitude) {
              const parkingNumber = index + 1 // 编号从1开始
              markers.value.push({
                id: 100 + index, // 确保ID唯一
                latitude: parking.latitude,
                longitude: parking.longitude,
                title: `${parkingNumber}. ${parking.name}`,
                iconPath: MARKER_ICON1,
                width: 32,
                height: 32,
                // 停车点详情数据
                parkingInfo: {
                  name: parking.name,
                  latitude: parking.latitude,
                  longitude: parking.longitude,
                  distance: parking.distance,
                  description: parking.description
                },
                // callout配置 - 一直显示
                callout: {
                  content: `${parkingNumber}. ${parking.name}【点击查看】`,
                  color: '#2563eb',
                  fontSize: 13,
                  borderRadius: 8,
                  bgColor: '#ffffff',
                  padding: 8,
                  display: 'ALWAYS',
                  textAlign: 'center'
                }
              })
            }
          })
        }
      } catch (parseError) {
        console.error('解析停车场数据失败:', parseError)
      }
    }
  } catch (error) {
    console.error('调用DashScope API失败:', error)
    // 请求失败，显示错误提示
    aiSearchStatus.value = '搜索失败，请稍后重试'
    showAiSearchStatus.value = true
  }
}

【4】ai返回结果，在地图上设置marker，并显示停车点的名称

【5】点击marker，弹出停车点详情。详情展示了停车点的名称，与搜索点的距离，停车免费政策，查看街景（目前不可用，因为貌似不支持）和导航功能

三、视频展示和Demo地址：https://aiparkcar.pages.dev/

📹 嵌入式视频: https://live.csdn.net/v/embed/521732

视频展示

四、项目改进方向

1、ai接口响应速度慢，且不稳定，有时会出现错误码500

2、ai停车点数据的真实性、可用性、丰富性。没法一个点一个点去验证，所以应该还需要用户去提交反馈。

3、目前街景功能不可用

4、优化智能体的提示词，增加更多维度的筛选。比如：（1）靠近洗手间、靠近公园等个性化筛选（2）自定义范围，现在默认筛选目标点5公里范围内的停车点。

5、增加更多地图自有的功能，比如指南针等

6、不局限于免费的停车位。更多方向的优惠，比如油价大对比，比如免费的公园等。

五、结束语

AI的时代真的来了。

原来很麻烦的项目，现在有了AI的加持，变得异常简单。

这个AI免费停车项目，从我看到征文大赛的活动，到产品思路和技术方案的架构，到打开编辑器把它实现出来，到上线使用，再到这篇博客写出来，总共用了不到一天半的时间。

这在以前是难以想象的。在以前，很多好的想法，因为技术实现和政策的壁垒，或者因为时间的局促、资金的短缺，都搁置了。现在有了AI，我们至少可以把一些想法很快地实现出来，尽管它不完美，尽管它可能很快淹没在浩瀚的互联网信息洪流里，尽管它可能随时被更完美的方案替代。但至少它存在过。

就好比，我上大学时写小说，花了很长的时间，费劲脑力写出来的东西，没有人看。没关系，哪怕它只有一个读者——我自己。

如今，作为一名开发者，一个曾经梦想用代码改变世界，到头来却发现什么也改变不了的人，也会开发一些自认为有意思的东西。没人知道，没人使用。

也没有关系。

哪怕它只有一个用户呢。

我自己。