reactjs - 使用 IFrame 嵌入谷歌路线

Question

我正在构建一个反应应用程序，我正在尝试在我的网站上嵌入谷歌地图方向。这是我的代码：

import React from "react";
import Iframe from "react-iframe";

export default (props) => {
  return (
    <Iframe
      width="600"
      height="450"
      frameborder="0"
      style="border:0"
      src={`https://www.google.com/maps/embed/v1/directions
      ?key=<my_api_key>
      &origin=Oslo+Norway
      &destination=Telemark+Norway
      &avoid=tolls|highways`}
      allowfullscreen
    />
  );
};

我收到了很多人之前遇到的错误：

delivery-plan:1 Refused to display <url> in a frame because it set 'X-Frame-Options' to 'sameorigin'.

奇怪的是，当我更改为使用地点 API 的 URL 时，Iframe 变为：

<Iframe
      width="600"
      height="450"
      frameborder="0"
      style="border:0"
      src={`https://www.google.com/maps/embed/v1/place?key=<my_api-token>
      &q=Space+Needle,Seattle+WA`}
      allowfullscreen
    />

它完全可以找到。

请注意，这两个 URL 均直接取自Google API 文档

Answer 1

我在 URL 中没有换行符的情况下尝试了您的代码，它对我有用。那是因为带有换行符的 URL 被一堆%20使其无效的转义。