使用 IFrame 嵌入 google 路线

Question

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

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'.

奇怪的是，当我更改为 URL 以使用位置 API 时，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 documentation

Answer 1

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