本文介绍如何构建一个简易 html 表单，用户仅需输入城市名或邮编，即可自动拼接预设店铺名称（如 “apple store”），并跳转至 google maps 对应搜索结果页，全程无需后端，纯前端实现。
本文介绍如何构建一个简易 html 表单，用户仅需输入城市名或邮编，即可自动拼接预设店铺名称（如 “apple store”），并跳转至 google maps 对应搜索结果页，全程无需后端，纯前端实现。
要实现“用户输入城市/邮编 → 自动跳转到 https://www.google.com/maps/search/Apple+Store+{输入内容}”这一功能，核心在于拦截表单默认提交行为，动态构造目标 URL 并触发页面跳转。由于 Google Maps 的 /search/ 路径直接支持 URL 编码的关键词组合（如 Apple+Store+Miami），我们只需在前端完成字符串拼接即可。
✅ 推荐方案：原生 JavaScript（无依赖，轻量可靠）
以下为生产就绪的 Vanilla JS 实现，已添加基础健壮性处理：
<meta charset="UTF-8"><title>查找附近门店</title><!-- 建议为表单添加唯一 id，便于精准控制 --><script> const STORE_NAME = "Apple+Store"; // 可替换为任意店铺名，注意用+连接多词 const MAP_BASE_URL = "https://www.google.com/maps/search/"; document.addEventListener("DOMContentLoaded", () => { const form = document.getElementById("storeSearchForm"); const input = document.getElementById("cityInput"); form.addEventListener("submit", (e) => { e.preventDefault(); // 阻止默认表单提交 const query = input.value.trim(); if (!query) return; // 空输入不跳转 // URL 编码确保空格、特殊字符安全（如 "New York" → "New+York"） const encodedQuery = encodeURIComponent(query).replace(/%20/g, '+'); const fullUrl = `${MAP_BASE_URL}${STORE_NAME}+${encodedQuery}`; window.location.href = fullUrl; }); }); </script>
⚠️ 关键注意事项
-
URL 编码不可省略：用户可能输入含空格、中文、符号的城市名（如
San Francisco、北京市）。encodeURIComponent()保证安全性，再将%20替换为+是 Google Maps 搜索 URL 的标准格式（Google 识别+为空格）。 -
避免使用
method="GET"直接提交：原生表单提交会将输入作为查询参数（如?city=Miami），无法控制 URL 路径结构；必须用e.preventDefault()+window.location.href手动跳转。 -
表单标识建议加
id：如示例中的id="storeSearchForm"，避免页面存在多个表单时误操作。 - 移动端兼容性：该方案在所有现代浏览器（含 iOS/Android WebView）中均稳定运行。
? 扩展提示（可选优化）
- 若需支持多店铺切换，可将
STORE_NAME改为下拉选择框； - 可增加简单校验（如邮编正则匹配
/^\d{5}(-\d{4})?$/）并给出友好提示； - 如需 SEO 友好，可在服务端渲染静态跳转页，但本场景纯前端完全满足需求。
此方案简洁、高效、零依赖，一行代码都不多余——真正实现“所见即所得”的地图搜索体验。
