拼接字符串至iframe的URL导致无法工作，求解决方案？

你的代码存在两个核心问题，导致iframe无法正常加载：

1. URL中的HTML实体错误：JSX属性值里不需要使用HTML实体&，直接用&即可。原代码里的&会被浏览器当成URL的一部分，导致Google Maps无法识别后续参数（比如output=embed）。
2. 未对动态参数做URL编码：如果loc包含中文、空格或特殊字符，直接拼接会破坏URL结构，导致请求无效。

修改后的代码如下：

function map(loc) {
  // 对动态参数做URL编码，确保特殊字符符合URL规范
  const encodedLoc = encodeURIComponent(loc);
  return (
    <div align="center">
      <iframe
        width="300"
        height="170"
        src={`https://maps.google.com/maps?q=獸醫+${encodedLoc}&hl=zh-TW&z=12&output=embed`}
        // 添加title属性提升可访问性，可选但推荐
        title={`獸醫地圖：${loc}`}
        frameBorder="0"
      ></iframe>
    </div>
  );
}

关键修改说明： #

• 把&替换为&，让URL参数被正确解析；
• 使用encodeURIComponent()处理loc参数，无论参数包含什么字符，都能生成符合规范的URL；
• 额外添加了title和frameBorder属性，提升iframe的可访问性和显示效果（可选）。

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