---

id: "1-5" title: "让它更像真实产品" page_title: "加入搜索、地图和分享功能" seo_title: "AI 做美食网站进阶 - 搜索框、地图嵌入、分享功能" seo_description: "给美食网站加入搜索框、Google Maps 地图嵌入和社交分享功能，让它从"练习作品"变成"真实产品"。" keywords: ["AI网站搜索功能","嵌入地图教程","网站分享功能","AI做真实产品","静态网站进阶"] chapter: "chapter_1" order: 5 is_delivery: false verification_type: "checklist" verification_config: {} estimated_minutes: 20

你的美食网站已经很好看了。这一关加入三个让它更像"真实产品"的功能：搜索框、地图嵌入和分享按钮。

这些功能不需要后端，纯前端就能实现。做完之后，你的网站和真正的美食 App 在外观和交互上已经非常接近了。

这三个功能为什么重要？

搜索框：当内容超过 10 条时，用户就开始需要搜索了。搜索是所有内容类产品的标配功能，也是用户最常用的功能之一。

地图嵌入：对于餐厅、酒店、景点这类有地理位置的内容，地图是必不可少的。用户需要知道"这个地方在哪里，我怎么去"。

分享功能：好的内容需要传播。分享功能让用户能把你的内容发给朋友，是最低成本的增长方式。

这三个功能加起来，能让你的网站从"看起来像网站"变成"用起来像产品"。

---

第一步：给列表页加搜索框

对 AI 说：

给 restaurants.html 的筛选标签区域上方加一个搜索框：

- 宽度占满内容区域，最宽 600px，居中
- 左侧有一个搜索图标（🔍 或 SVG 图标）
- placeholder 文字："搜索餐厅名称、菜系或地址..."
- 圆角 24px，有边框，focus 时边框变橙色
- 用 JavaScript 实现：输入文字时，实时过滤卡片（卡片名称或描述包含关键词就显示，否则隐藏）
- 搜索框清空时恢复显示所有卡片
- 如果搜索结果为空，显示"没有找到相关餐厅"的提示

测试：在搜索框里输入"川菜"，看看是否只显示川菜相关的卡片。

---

第二步：在详情页嵌入地图

对 AI 说：

在 detail.html 的餐厅基本信息区域下方，加一个地图区域：

- 小标题："餐厅位置"
- 嵌入一个 OpenStreetMap 地图（不需要 API Key，免费）
- 地图高度 300px，圆角 12px
- 使用 iframe 嵌入，地址用成都春熙路附近的坐标
- 地图下方显示完整地址文字和一个"复制地址"按钮
- 点击"复制地址"按钮后，按钮文字变成"✓ 已复制"，2 秒后恢复

嵌入 OpenStreetMap 的方式：
<iframe src="https://www.openstreetmap.org/export/embed.html?bbox=104.07,30.65,104.09,30.67&layer=mapnik" style="border:0; width:100%; height:300px;"></iframe>

---

第三步：加入社交分享功能

对 AI 说：

在 detail.html 的餐厅名称旁边，加一排分享按钮：

- 三个按钮：复制链接 / 分享到微博 / 分享到微信（显示二维码）
- 复制链接：点击后复制当前页面 URL，按钮变成"✓ 已复制"
- 分享到微博：打开微博分享链接（window.open 方式）
- 分享到微信：点击后弹出一个小提示框，显示"请截图后在微信中扫描二维码"（因为静态页面无法直接调起微信）
- 按钮样式：小圆角，有图标，hover 时有颜色变化

---

第四步：更新 Cloudflare Pages

功能加完后，把更新后的文件重新上传到 Cloudflare Pages：

1. 打开 dash.cloudflare.com，进入你的 food-explorer 项目
2. 点「创建部署」→「上传资产」，把所有文件重新拖进去
3. 点「部署站点」，等待更新完成

用手机打开你的 .pages.dev 链接，测试搜索和地图功能是否正常。

---

深入理解：前端搜索 vs 后端搜索

这一关实现的搜索是前端搜索：所有数据都在页面里，JavaScript 在本地过滤，不需要请求服务器。

前端搜索的优点：速度快（不需要网络请求），实现简单。缺点：只适合数据量小的场景（几十条到几百条），数据量大了会很慢。

后端搜索是另一种方式：用户输入关键词，发请求到服务器，服务器在数据库里搜索，返回结果。这种方式适合大数据量，但实现更复杂。

这门课的第四章会讲数据库，到时候你就能实现真正的后端搜索了。

---

关于地图服务的选择

| 地图服务 | 是否需要 API Key | 费用 | 适用场景 | |---------|----------------|------|---------| | OpenStreetMap | 不需要 | 免费 | 简单嵌入，无需交互 | | 高德地图 | 需要 | 有免费额度 | 国内用户，需要导航 | | 腾讯地图 | 需要 | 有免费额度 | 国内用户，微信生态 | | Google Maps | 需要 | 有免费额度 | 国际用户 |

这一关用 OpenStreetMap 是因为它最简单——不需要注册账号，不需要 API Key，直接用 iframe 嵌入就行。如果你的网站面向国内用户，后续可以换成高德地图，效果更好。

---

通关条件

完成以下功能：

1. 列表页有搜索框，能实时过滤餐厅卡片
2. 详情页有地图嵌入，能看到地图
3. 详情页有分享按钮，复制链接功能正常
4. 更新后的网站已重新部署到 Cloudflare Pages

卡住了？

• 搜索过滤不生效？让 AI 检查 JavaScript 的事件监听是否绑定到了正确的元素
• 地图显示空白？检查 iframe 的 src 链接是否正确，或者换一个坐标试试
• 复制功能报错？让 AI 用 navigator.clipboard.writeText() 实现，并处理权限问题
• 微博分享链接不对？让 AI 查一下微博分享的 URL 格式，通常是 https://service.weibo.com/share/share.php?url=xxx&title=xxx
• 实在搞不定？发邮件：[email protected]