拿到Offer,租房怎么办?看我用高德MCP+腾讯云MCP,帮你分分钟搞定!

拿到Offer,租房怎么办?看我用高德MCP+腾讯云MCP,帮你分分钟搞定!

目录

  1. 效果展示

  2. AI编程开发流程

  3. 给Cursor安装高德MCP

  4. 给Cursor安装腾讯云MCP

    • 4.1配置方法
    • 4.2技术原理
    • [4.3为什么使用 EdgeOne Pages?](#4.3为什么使用 EdgeOne Pages? "#43%E4%B8%BA%E4%BB%80%E4%B9%88%E4%BD%BF%E7%94%A8EdgeOnePages")
  5. Coser编程

  6. MCP(大模型上下文)

  7. 总结

  8. 源码

1.效果展示

在线地址:mcp.edgeone.app/share/O-Fz2...__

2.AI编程开发流程

2.1需求分析

高德MCP:快速定位与筛选房源
  • 定位公司周边:打开高德地图,输入公司地址,点击"周边"功能,选择"租房"选项,就能快速找到公司周边的房源。
  • 筛选条件:根据租金、房型、周边设施(如地铁站、超市、医院)等条件筛选合适的房源。
  • 实地看房:点击房源详情,获取房东联系方式,预约看房时间。利用高德地图的导航功能,快速到达房源位置,节省时间。
腾讯云MCP:搭建房源信息展示页面
  • 快速搭建页面:使用腾讯云的云开发功能,快速搭建一个房源信息展示页面。上传房源图片、租金、联系方式等信息。
  • 租房攻略分享:在页面上分享一些租房的小技巧,比如"如何避免租房陷阱""如何与房东谈判租金"等。

2.2整体思路

在面对"拿到Offer后如何快速找到合适的租房地点"这一问题时,我的整体思路是利用现有的技术工具和资源,通过高效的资源整合和自动化流程,快速筛选和展示合适的房源信息。具体思路如下:

1. 利用高德地图MCP快速定位与筛选房源

  • 核心目标:快速找到公司周边的房源,并根据租金、房型、周边设施等条件进行筛选。

  • 实现方法

    • 使用高德地图MCP的地理信息服务,输入公司地址,通过"周边"功能快速定位公司周边的租房信息。
    • 根据个人需求设置筛选条件,如租金范围、房型、周边设施(地铁站、超市、医院等),快速筛选出符合条件的房源。
    • 利用高德地图的导航功能,快速规划实地看房路线,节省时间。

2. 使用腾讯云MCP搭建房源信息展示页面

  • 核心目标:将筛选出的房源信息以可视化的方式展示出来,方便用户查看和分享。

  • 实现方法

    • 利用腾讯云的云开发功能,快速搭建一个房源信息展示页面。
    • 将房源的图片、位置、租金、周边设施等信息上传到页面中,通过HTML和CSS进行布局和样式设计,使页面美观且信息清晰。
    • 在页面上分享一些租房的小技巧,如"如何避免租房陷阱""如何与房东谈判租金"等,增加页面的实用性和吸引力。

3. 整合MCP服务,实现自动化流程

  • 核心目标:通过整合高德地图MCP和腾讯云MCP,实现从房源筛选到信息展示的自动化流程。

  • 实现方法

    • 在Cursor中配置高德地图MCP和腾讯云MCP,确保两个服务能够协同工作。
    • 通过简单的指令,如"帮我推荐公司周边的房源"和"生成房源信息页面",直接调用MCP服务,快速完成房源筛选和页面生成。
    • 利用腾讯云的EdgeOne Pages服务,将生成的页面快速部署到公网,方便用户随时查看和分享。

4. 提升用户体验和效率

  • 核心目标:通过技术手段提升用户在租房过程中的体验和效率。

  • 实现方法

    • 在房源信息页面中嵌入高德地图,直观展示房源位置和周边设施。
    • 提供详细的交通分析,包括驾车、公交和步行的通勤时间,帮助用户评估出行便利性。
    • 使用响应式设计确保页面在不同设备上都能正常显示,提升页面的可用性。

3.给Cursor安装高德MCP

3.1配置方法

先打开idoubi开发的MCP Servers:mcp.so/,找到高德地图MCP Server

点击进去后,切换到"Content"标签,复制接入配置代码:

perl 复制代码
{
  "mcpServers": {
      "amap-maps": {
          "command": "npx",
          "args": [
              "-y",
              "@amap/amap-maps-mcp-server"
          ],
          "env": {
              "AMAP_MAPS_API_KEY": "您在高德官网上申请的key"
          }
      }
  }
}
​

然后打开Cursor,点击"右上角的齿轮",然后找到MCP,点击"Add new global MCP server",把刚才复制的代码粘贴到左侧窗口,保存。

3.2申请高德地图Key

接下来重要的是申请高德地图Key。在MCP.so的高德地图MCP Content页面有个"复制key"链接,点击后会有详细的申请流程:

申请完Key后,填入Cursor的MCP配置界面,ctrl+s保存,然后点击刷新即可。

如果amap-maps前面显示绿色灯,恭喜你,配置完成了!搞定这一步,你已经超过60%的人了,因为最难的其实就是配置MCP。

4.给Cursor安装腾讯云MCP

这里为什么选择腾讯云MCP呢?

EdgeOne Pages MCP Server 介绍:EdgeOne Pages Deploy MCP 是一项专用服务,能够将 HTML 内容快速部署到 EdgeOne Pages 并生成公开访问链接。这使您能够立即预览和分享 AI 生成的网页内容。

4.1配置方法

打开Cursor,点击"右上角的齿轮",然后找到MCP,点击"Add new global MCP server",把刚才复制的代码粘贴到左侧窗口,保存。

加入以下以下 JSON 配置:

json 复制代码
{
  "mcpServers": {
    "edgeone-pages-mcp-server": {
      "command": "npx",
      "args": ["edgeone-pages-mcp"]
    }
  }
}

如果edgeone-pages-mcp-server前面显示绿色灯,恭喜你,配置完成腾讯云MCP了。

4.2技术原理

Pages MCP Server 利用无服务器边缘计算能力和 KV 存储,通过 API 接收 HTML 内容,即可自动生成即时生效的公共访问链接,实现秒级静态页面部署并内置错误处理机制。

4.3为什么使用 EdgeOne Pages?

到目前为止,MCP Server 主要在本地机器上运行,依赖特定运行时环境(如 Node.js、Python 或 Docker),限制了可落地的应用场景,导致受众面较为狭窄。但随着业界对远程 MCP Server 协议的支持,使其能够摆脱环境限制,变得更加通用,为更广泛的大模型用户群体打开了大门。 目前 MCP 社区正在推动远程 Server 重要技术升级,未来将迎来更丰富的使用场景和更便捷的用户体验。

MCP 技术趋势与 Pages Functions 的边缘无服务器架构高度契合,其在性能、可扩展性和易用性上的优势,使开发者无需管理基础设施即可享受全球边缘网络的便利。我们将持续跟进业界动态,结合社区技术演进方向,通过标准化协议支持进一步拓展开发场景应用边界,不断增强 MCP 相关能力,助力开发者提升效能与开发体验。

5.Coser编程

5.1整合MCP

将两个MCP一起联合,代码如下:

perl 复制代码
{
  "mcpServers": {
    "amap-maps": {
      "command": "npx",
      "args": [
        "-y",
        "@amap/amap-maps-mcp-server"
      ],
      "env": {
        "AMAP_MAPS_API_KEY": "您在高德官网上申请的key"
      }
    },
    "edgeone-pages-mcp-server": {
      "command": "npx",
      "args": ["edgeone-pages-mcp"]
    }
  }
}
​

可以看到都已经是绿色了,表示配置成功。

5.2直接说需求找住宿小区

配置好后,我直接在Cursor里输入:

复制代码
我刚刚拿到offer,在杭州的算力小镇,帮我推荐几个我可以住宿小区的地方,通行时间两个小时以内,并给出小区的具体信息,包括位置,交通,周边设施,房源情况,租金。

使用Claude 3.7 sonnet,它立刻开始调用高德地图MCP的多个工具来解决我的问题。很快,就得出了结果!

5.3一键生成可视化网页

markdown 复制代码
请生成一个包含上面的推荐内容的 HTML 页面,用好看的图像化表达出来。
​
页面应使用 Bootstrap 5 框架进行布局和样式设计,并包含以下几个部分:
​
1.  头部(Header):
    *   包含一个标题,显示"杭州算力小镇住宿小区推荐"。
    *   包含一个副标题,显示"祝贺您拿到offer,为您在杭州的算力小镇,推荐性价比超高的住宿小区"。
    *   包含一个更新时间,显示"更新时间: (自动获取今天时间,如:2025年4月1日)"。
​
2.  地图(Map):
    *   使用高德地图嵌入,显示以下推荐住宿小区的位置。
    *   地图应具有 100% 的宽度和 400px 的高度。
​
3.  住宿小区列表(Cafe List):
    *   以卡片形式展示住宿小区信息,每行显示 4 个住宿小区。
    *   住宿小区信息应包括:
        *   位置
        *   评分(使用 Font Awesome 星星图标)
        *   交通
        *   周边设施
        *   人均消费
        *   房源情况
        *   租金
        *   特色(例如:停车场、免费 WiFi),使用 Font Awesome 图标。
    *   使用 Unsplash API 获取住宿小区的图片,每张图片的高度为 200px。
​
4.  交通分析(Travel Info):
    *   提供从住宿小区到杭州算力小镇的交通建议,包括预计车程时间。
​
5.  页脚(Footer):
    *   包含版权信息,显示"© 2025 算力小镇住宿推荐 | 数据来源: 高德地图 | 制作:LucianaiB"。
​
使用 CSS 自定义样式,包括:
​
*   主色调(primary-color):#6f4e37
*   辅助色调(secondary-color):#f5f5dc
*   强调色调(accent-color):#d4a76a
*   卡片hover效果:鼠标悬停时卡片向上移动并增加阴影
​
确保页面具有响应式布局,可以在不同设备上正常显示。

最后的结果:

接下来重要的一步是部署到公网,这里就是利用EdgeOne Pages MCP。

我们直接对Cursor说:

复制代码
将代码部署到 EdgeOne Pages 并生成公开访问链接

我们直接访问网址:杭州算力小镇住宿小区推荐

6.MCP(大模型上下文)

MCP是什么

下面是来自官网的介绍:

Model Context Protocol (MCP) 是一个开放协议,它使 LLM 应用与外部数据源和工具之间的无缝集成成为可能。无论你是构建 AI 驱动的 IDE、改善 chat 交互,还是构建自定义的 AI 工作流,MCP 提供了一种标准化的方式,将 LLM 与它们所需的上下文连接起来。
在我看来:MCP就像是一座桥梁,连接了AI与外部世界的丰富资源,让AI能够像调用API一样无缝对接各种数据和服务,从而实现更强大的功能和更广泛的应用。

MCP的作用

  • 数据访问与整合:MCP使得AI能够访问和整合来自不同来源的数据,无论是本地文件还是远程数据库,都可以通过标准化的方式进行交互。这极大地扩展了AI的应用范围,使其能够处理更复杂和多样化的任务。
  • 工具调用与扩展:借助MCP,AI可以调用外部工具和API,实现更多功能。例如,AI可以通过调用地图API获取地理位置信息,或者通过调用翻译API实现多语言翻译。这种工具调用能力让AI变得更加灵活和强大。
  • 安全与隐私保护:MCP协议内置了安全机制,确保数据传输和交互的安全性。服务器控制自己的资源,无需与LLM提供商共享API密钥,同时系统维护清晰的边界,每个服务器都管理自己的身份验证和访问控制。这为用户数据提供了强有力的保护。

MCP的意义

  • 打破数据孤岛:在传统的AI应用中,数据往往被限制在特定的系统或平台内,形成了数据孤岛。MCP的出现打破了这种限制,使得AI能够跨越不同的数据源和系统,实现数据的自由流动和共享。这为AI的深度学习和智能决策提供了更丰富的数据基础。
  • 提升AI的实用性和灵活性:通过与外部工具和资源的交互,AI能够更好地适应各种实际应用场景。无论是为企业提供定制化的解决方案,还是为个人用户提供个性化的服务,MCP都能够让AI更加灵活地应对不同的需求。
  • 推动AI技术的创新与发展:MCP为AI开发者提供了一个全新的开发范式,激发了更多的创新思路和应用场景。开发者可以利用MCP快速构建和部署各种AI应用,推动AI技术在更多领域的落地和应用。
  • 降低开发门槛:对于开发者来说,MCP简化了AI与外部资源的交互过程,降低了开发难度。无需复杂的代码编写和繁琐的配置,开发者可以通过简单的指令和配置,快速实现AI与外部资源的连接和交互,提高了开发效率。

MCP(Model Context Protocol)的出现,标志着AI应用进入了一个全新阶段。它不再是简单的文本对话工具,而是能够与各种外部系统无缝连接的智能助手。通过MCP,AI能够更好地服务于用户,为人们的生活和工作带来更多的便利和价值。

7.总结

通过这次尝试,我深刻体会到了技术的力量,尤其是高德地图MCP和腾讯云MCP的强大功能。当我拿到Offer,面对租房这件"人生大事"时,我并没有感到手足无措,反而因为这两个工具的助力,轻松地找到了心仪的住处。

高德地图MCP的地理信息服务简直是我的"租房小助手"。输入公司地址后,周边的房源信息一目了然,租金、房型、周边设施等筛选条件让我能迅速锁定目标。而且,它的导航功能还帮我规划好了实地看房的路线,让我节省了不少时间和精力。

腾讯云MCP的云开发功能同样让我惊喜。我轻松搭建了一个房源信息展示页面,把筛选出的房源信息、图片、位置等都上传了上去,还用HTML和CSS进行了美化,让页面看起来既美观又实用。更让我满意的是,我还分享了一些租房小技巧,希望能帮到更多像我一样租房的小伙伴。

最让我觉得厉害的是,这两个MCP服务还能整合在一起,实现自动化流程。我只需要在Cursor里简单配置一下,然后输入指令,就能快速完成房源筛选和页面生成。最后,通过腾讯云的EdgeOne Pages服务,我把页面部署到公网,方便随时查看和分享。

这次经历让我对MCP(Model Context Protocol)有了更深刻的理解。它不仅仅是一个协议,更是AI与外部资源交互的桥梁。它打破了数据孤岛,让AI能够访问和整合更多数据;它提升了AI的实用性和灵活性,让AI能更好地服务于我们的生活;它还降低了开发门槛,让开发者能更便捷地构建和部署AI应用。

这次租房的经历,对我来说不仅是一次生活中的小挑战,更是一次技术探索的旅程。高德地图MCP和腾讯云MCP的结合,让我感受到了技术带来的便利和高效。我相信,随着技术的不断发展,未来的生活一定会更加美好。

8.源码

mcp.json

perl 复制代码
{
  "mcpServers": {
    "amap-maps": {
      "command": "npx",
      "args": [
        "-y",
        "@amap/amap-maps-mcp-server"
      ],
      "env": {
        "AMAP_MAPS_API_KEY": "fdda8428fc9485f355b24b1c76f6f147"
      }
    },
    "edgeone-pages-mcp-server": {
      "command": "npx",
      "args": ["edgeone-pages-mcp"]
    }
  }
}
​

index.html

xml 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>杭州算力小镇住宿小区推荐</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #4a90a7;
            --secondary-color: #e8f4f8;
            --accent-color: #7fb9c9;
        }
​
        body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            background-color: #f8f9fa;
            color: #333;
            line-height: 1.6;
        }
​
        .header {
            background: linear-gradient(135deg, var(--primary-color), #5dacbf);
            color: white;
            padding: 2rem 0;
            margin-bottom: 2rem;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
​
        .header h1 {
            font-weight: 700;
            margin-bottom: 0.5rem;
        }
​
        .header p {
            opacity: 0.9;
            max-width: 700px;
            margin: 0 auto;
        }
​
        .map-wrapper {
            position: relative;
            width: 100%;
            height: 600px;
            background: #fff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
            margin-bottom: 2rem;
        }
​
        .search-box {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 350px;
            z-index: 100;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }
​
        .search-input {
            width: 100%;
            padding: 12px 15px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            background-color: #fff;
        }
​
        .search-input:focus {
            outline: none;
            box-shadow: 0 0 0 2px var(--accent-color);
        }
​
        .poi-list {
            background: white;
            max-height: 400px;
            overflow-y: auto;
            border-radius: 0 0 8px 8px;
        }
​
        .poi-item {
            padding: 15px;
            border-bottom: 1px solid #eee;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }
​
        .poi-item:hover {
            background: #f8f9fa;
        }
​
        .poi-title {
            font-size: 14px;
            color: #333;
            margin-bottom: 5px;
            font-weight: 500;
        }
​
        .poi-address {
            font-size: 12px;
            color: #666;
        }
​
        .map-controls {
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 100;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
​
        .map-control-item {
            background: white;
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }
​
        .map-control-item:hover {
            background: #f8f9fa;
            transform: translateY(-2px);
        }
​
        .map-control-item i {
            color: var(--primary-color);
            font-size: 16px;
        }
​
        .section-title {
            color: var(--primary-color);
            margin-bottom: 1.5rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid var(--accent-color);
            display: inline-block;
        }
​
        .card {
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            margin-bottom: 2rem;
            border: none;
        }
​
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
        }
​
        .card-img-top {
            height: 200px;
            object-fit: cover;
        }
​
        .card-body {
            padding: 1.5rem;
        }
​
        .card-title {
            color: var(--primary-color);
            font-weight: 700;
            margin-bottom: 0.5rem;
            font-size: 1.4rem;
        }
​
        .rating {
            color: #ffc107;
            margin-bottom: 1rem;
        }
​
        .feature-icon {
            color: var(--primary-color);
            width: 20px;
            margin-right: 8px;
        }
​
        .badge {
            padding: 0.5rem 1rem;
            border-radius: 50px;
            margin-right: 0.5rem;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }
​
        .travel-info {
            background-color: white;
            border-radius: 12px;
            padding: 2rem;
            margin-bottom: 2rem;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
        }
​
        footer {
            background: linear-gradient(135deg, var(--primary-color), #5dacbf);
            color: white;
            padding: 1.5rem 0;
            margin-top: 3rem;
        }
​
        footer p {
            margin-bottom: 0;
            opacity: 0.9;
        }
​
        @media (max-width: 768px) {
            .header {
                padding: 1.5rem 0;
            }
​
            .search-box {
                width: calc(100% - 40px);
            }
​
            .map-wrapper {
                height: 400px;
            }
        }
    </style>
</head>
<body>
    <!-- Header -->
    <header class="header text-center">
        <div class="container">
            <h1>杭州算力小镇住宿小区推荐</h1>
            <p class="lead">祝贺您拿到offer,为您在杭州的算力小镇,推荐性价比超高的住宿小区</p>
            <p class="text-light" id="update-time"></p>
        </div>
    </header>
​
    <!-- Map Section -->
    <div class="container">
        <div class="map-wrapper">
            <!-- 搜索框 -->
            <div class="search-box">
                <input type="text" class="search-input" id="search-input" placeholder="搜索位置、公交站、地铁站">
                <div class="poi-list" id="poi-list">
                    <div class="poi-item" onclick="focusLocation(0)">
                        <div class="poi-title">1. 算力小镇</div>
                        <div class="poi-address">您的工作地点</div>
                    </div>
                    <div class="poi-item" onclick="focusLocation(1)">
                        <div class="poi-title">2. 复地·连城国际花园</div>
                        <div class="poi-address">在杭海路1636号,距离乔司南地铁站约1公里</div>
                    </div>
                    <div class="poi-item" onclick="focusLocation(2)">
                        <div class="poi-title">3. 佳兆业·君汇上品苑</div>
                        <div class="poi-address">在乔司街道石塘路北侧,环境优美</div>
                    </div>
                    <div class="poi-item" onclick="focusLocation(3)">
                        <div class="poi-title">4. 敏捷·源著天樾府</div>
                        <div class="poi-address">在石塘东路,近乔司南地铁站</div>
                    </div>
                </div>
            </div>
​
            <!-- 地图控件 -->
            <div class="map-controls">
                <button class="map-control-item" onclick="toggleSatellite()"><i class="fas fa-satellite"></i></button>
                <button class="map-control-item" onclick="toggleTraffic()"><i class="fas fa-car"></i></button>
                <button class="map-control-item" onclick="showNearbyFacilities()"><i class="fas fa-compass"></i></button>
                <button class="map-control-item" onclick="map.setFitView()"><i class="fas fa-expand"></i></button>
            </div>
​
            <!-- 地图容器 -->
            <div id="map" style="width: 100%; height: 100%;">
                <iframe width="100%" height="100%"
                    src="https://uri.amap.com/marker?markers=120.293468,30.333673,算力小镇|120.289468,30.329673,复地·连城国际花园|120.295468,30.335673,佳兆业·君汇上品苑|120.291468,30.331673,敏捷·源著天樾府&src=mypage&callnative=1"
                    style="border: none;"></iframe>
            </div>
        </div>
    </div>
​
    <!-- Residential Areas List -->
    <div class="container">
        <div class="row">
            <!-- 复地·连城国际花园 -->
            <div class="col-lg-4 col-md-6">
                <div class="card">
                    <img src="https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?w=800&q=80" class="card-img-top" alt="复地·连城国际花园">
                    <div class="card-body">
                        <h5 class="card-title">复地·连城国际花园</h5>
                        <div class="rating mb-2">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star-half-alt"></i>
                        </div>
                        <p class="card-text">
                            <i class="fas fa-map-marker-alt feature-icon"></i> 杭海路1636号<br>
                            <i class="fas fa-subway feature-icon"></i> 距离乔司南地铁站约1公里<br>
                            <i class="fas fa-building feature-icon"></i> 大型成熟社区<br>
                            <i class="fas fa-money-bill-wave feature-icon"></i> 租金:3500-6000元/月
                        </p>
                        <div class="facilities mt-3">
                            <span class="badge bg-primary"><i class="fas fa-shopping-cart"></i> 永辉超市</span>
                            <span class="badge bg-success"><i class="fas fa-school"></i> 乔司中学</span>
                            <span class="badge bg-info"><i class="fas fa-hospital"></i> 社区医院</span>
                        </div>
                    </div>
                </div>
            </div>
​
            <!-- 佳兆业·君汇上品苑 -->
            <div class="col-lg-4 col-md-6">
                <div class="card">
                    <img src="https://images.unsplash.com/photo-1574362848149-11496d93a7c7?w=800&q=80" class="card-img-top" alt="佳兆业·君汇上品苑">
                    <div class="card-body">
                        <h5 class="card-title">佳兆业·君汇上品苑</h5>
                        <div class="rating mb-2">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="far fa-star"></i>
                        </div>
                        <p class="card-text">
                            <i class="fas fa-map-marker-alt feature-icon"></i> 乔司街道石塘路北侧<br>
                            <i class="fas fa-car feature-icon"></i> 距离算力小镇约2公里<br>
                            <i class="fas fa-tree feature-icon"></i> 环境优美,物业完善<br>
                            <i class="fas fa-money-bill-wave feature-icon"></i> 租金:3000-5500元/月
                        </p>
                        <div class="facilities mt-3">
                            <span class="badge bg-primary"><i class="fas fa-shopping-bag"></i> 商业中心</span>
                            <span class="badge bg-success"><i class="fas fa-tree"></i> 高绿化率</span>
                            <span class="badge bg-info"><i class="fas fa-parking"></i> 充足车位</span>
                        </div>
                    </div>
                </div>
            </div>
​
            <!-- 敏捷·源著天樾府 -->
            <div class="col-lg-4 col-md-6">
                <div class="card">
                    <img src="https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?w=800&q=80" class="card-img-top" alt="敏捷·源著天樾府">
                    <div class="card-body">
                        <h5 class="card-title">敏捷·源著天樾府</h5>
                        <div class="rating mb-2">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                        </div>
                        <p class="card-text">
                            <i class="fas fa-map-marker-alt feature-icon"></i> 石塘东路(近乔司南地铁站)<br>
                            <i class="fas fa-subway feature-icon"></i> 步行5分钟到地铁站<br>
                            <i class="fas fa-building feature-icon"></i> 新建高档住宅区<br>
                            <i class="fas fa-money-bill-wave feature-icon"></i> 租金:3800-6500元/月
                        </p>
                        <div class="facilities mt-3">
                            <span class="badge bg-primary"><i class="fas fa-shopping-cart"></i> 万达广场</span>
                            <span class="badge bg-success"><i class="fas fa-graduation-cap"></i> 临平一中</span>
                            <span class="badge bg-info"><i class="fas fa-hospital"></i> 临平一院</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
​
    <!-- Travel Info -->
    <div class="container mt-5">
        <h3 class="text-center mb-4">交通分析</h3>
        <div class="row">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title"><i class="fas fa-car feature-icon"></i> 驾车</h5>
                        <p class="card-text">平均通勤时间:6-8分钟<br>距离:约1.6公里</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title"><i class="fas fa-bus feature-icon"></i> 公交</h5>
                        <p class="card-text">平均通勤时间:25-30分钟<br>包含步行约600米</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title"><i class="fas fa-walking feature-icon"></i> 步行</h5>
                        <p class="card-text">步行时间:约13-15分钟<br>距离:约1公里</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
​
    <!-- Footer -->
    <footer class="text-center">
        <div class="container">
            <p>© <span id="current-year"></span> 算力小镇住宿推荐 | 数据来源: 高德地图 | 制作:LucianaiB</p>
        </div>
    </footer>
​
    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 更新时间
        const updateDate = new Date();
        document.getElementById('update-time').textContent = `更新时间: ${updateDate.getFullYear()}年${updateDate.getMonth() + 1}月${updateDate.getDate()}日`;
        
        // 更新年份
        document.getElementById('current-year').textContent = new Date().getFullYear();
    </script>
</body>
</html> 
相关推荐
跟着珅聪学java41 分钟前
spring boot +Elment UI 上传文件教程
java·spring boot·后端·ui·elementui·vue
吞掉星星的鲸鱼1 小时前
使用高德api实现天气查询
前端·javascript·css
lilye661 小时前
程序化广告行业(55/89):DMP与DSP对接及数据统计原理剖析
java·服务器·前端
徐小黑ACG2 小时前
GO语言 使用protobuf
开发语言·后端·golang·protobuf
zhougl9963 小时前
html处理Base文件流
linux·前端·html
花花鱼3 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_3 小时前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
战族狼魂4 小时前
CSGO 皮肤交易平台后端 (Spring Boot) 代码结构与示例
java·spring boot·后端
careybobo4 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之6 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue