使用 IFrame 嵌入谷歌方向[关闭]答案

【问题标题】：Using IFrame to embed google directions [closed]使用 IFrame 嵌入谷歌方向[关闭]
【发布时间】：2020-08-02 20:10:45
【问题描述】：

我正在构建一个 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'.

奇怪的是，当我更改为使用地点 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 documentation

【问题讨论】：

标签： reactjs google-maps iframe google-maps-api-3 google-maps-embed

【解决方案1】：

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

【讨论】：