如何实现输入邮编/城市名跳转至谷歌地图指定店铺搜索页

可以通过两种方式实现需求，以下是具体方案：

方法一：JavaScript控制跳转（推荐） #

这种方式能确保店铺名称不被用户修改，且URL格式完全符合要求：

<form id="mapSearchForm">
  <input type="text" id="locationInput" placeholder="输入城市或邮编" required>
  <button type="submit">搜索店铺</button>
</form>

<script>
document.getElementById('mapSearchForm').addEventListener('submit', function(e) {
  e.preventDefault();
  // 替换为你的目标店铺名称
  const storeName = 'Apple';
  const location = document.getElementById('locationInput').value.trim();
  
  if (location) {
    // 编码特殊字符，避免URL错误
    const encodedStore = encodeURIComponent(storeName);
    const encodedLocation = encodeURIComponent(location);
    const targetUrl = `https://www.google.com/maps/search/${encodedStore}+${encodedLocation}`;
    window.location.href = targetUrl;
  }
});
</script>

说明： #

• 监听表单提交事件，阻止默认的GET提交行为
• 预设固定的店铺名称，用户无法修改
• 对店铺名和地点进行URL编码，避免空格、特殊字符导致的链接错误
• 构造目标URL后直接跳转至谷歌地图搜索结果页

方法二：纯HTML方案（利用GET参数） #

如果不想用JavaScript，可以借助谷歌地图的q搜索参数实现，但需要注意用户可能修改隐藏字段的风险：

<form action="https://www.google.com/maps/search/" method="get">
  <!-- 隐藏字段存储店铺名称 -->
  <input type="hidden" name="q" value="Apple+">
  <input type="text" name="q" placeholder="输入城市或邮编" required>
  <button type="submit">搜索店铺</button>
</form>

说明： #

• 表单提交后，两个name="q"的字段值会自动拼接，谷歌地图会自动处理为合法的搜索关键词格式
• 缺点是用户可以通过浏览器开发者工具修改隐藏字段的店铺名称，安全性不如JS方案

内容的提问来源于stack exchange，提问作者Noquierona