通过构造 https://www.google.com/maps/search/ + URL 编码后的地址，可创建点击即跳转至 Google 地图搜索结果的超链接，支持静态与动态地址，兼容所有现代移动及桌面浏览器。
通过构造 `https://www.google.com.maps/search/` + url 编码后的地址，可创建点击即跳转至 google 地图搜索结果的超链接，支持静态与动态地址，兼容所有现代移动及桌面浏览器。
在 Web 开发中，我们常使用 tel: 协议实现电话号码一键拨号（如 <a href="tel:+123456789">+123456789</a>），同理，Google Maps 提供了标准化的 URL 方案，使地址也能“一键导航”——用户点击后直接在新标签页打开对应位置的 Google 地图搜索页。
核心原理是利用 Google Maps 的公开搜索 URL：
https://www.google.com/maps/search/{encoded-address}其中 {encoded-address} 必须经过 encodeURIComponent() 处理，以正确支持空格、逗号、中文、特殊符号等（例如 "北京市朝阳区建国路87号" 会被编码为 %E5%8C%97%E4%BA%AC%E5%B8%82%E6%9C%9D%E9%98%B3%E5%8C%BA%E5%BB%BA%E5%9B%BD%E8%B7%AF87%E5%8F%B7）。
✅ 推荐用法（动态绑定，生产就绪）：
<a id="mapLink" href="#" target="_blank">1600 Amphitheatre Parkway, Mountain View, CA</a>
<script>
const address = "1600 Amphitheatre Parkway, Mountain View, CA";
const link = document.getElementById("mapLink");
link.textContent = address;
link.href = `https://www.google.com/maps/search/${encodeURIComponent(address)}`;
</script>⚠️ 注意事项：
- 不推荐直接拼接未编码地址（如 ?q=... 参数易出错），/search/ 路径对编码更鲁棒；
- 若需精确定位（而非模糊搜索），可改用 https://www.google.com/maps/place/{encoded-address}，但需确保地址足够唯一；
- 移动端会自动唤起 Google Maps App（若已安装），否则 fallback 到网页版；
- 中文、日文、阿拉伯文等 Unicode 地址必须 encodeURIComponent，否则链接失效或返回 400 错误；
- 可封装为复用函数，适配多个地址元素：
function makeMapLink(selector, address) { const el = document.querySelector(selector); if (el) { el.href = `https://www.google.com/maps/search/${encodeURIComponent(address)}`; el.textContent = address; el.target = "_blank"; el.rel = "noopener"; } } makeMapLink("#office-address", "上海市浦东新区世纪大道100号");
? 进阶提示：如需支持地理坐标（经纬度），可使用 https://www.google.com/maps?q={lat},{lng}，例如 https://www.google.com/maps?q=39.9042,116.4074 直达北京天安门——这对 API 返回坐标数据的场景更精准。
总之，/maps/search/ + encodeURIComponent() 是最简洁、兼容性最佳的地址地图跳转方案，无需后端、不依赖 SDK，一行 URL 即可赋予地址“可操作性”。
