使用 google 路线时出现白页 api

Question

我正在测试一个供内部使用的小项目。

我们想使用 google 方向 api 生成一条从阿姆斯特丹到布鲁塞尔 belgieplein 的预定义路线。

这是我可以使用基本代码 google api 页面给出的代码创建它的代码

<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        height: 400px;
        width: 100%;
       }
    </style>
  </head>
  <body>
    <iframe
  width="450"
  height="250">
  frameborder="0" style="border:0"
  https://www.google.com/maps/embed/v1/directions
  ?key=AIzaSyC0usSsGXuNajTOjNnMP4yDTmc4P7kqjYk
  &origin=RijsWijkstraat+223,Amsterdam
  &destination=Back-UpStraat+12,Amsterdam
  &avoid=tolls
</iframe>
</html>

但它所做的只是生成一个白页。我在这里做错了什么？

我正在学习与 google api 一起工作，这让我现在很头疼。

更改了几乎所有内容的原点和方向 googles api 页面清楚地说明它可以处理原点定义显示方向的起点。该值可以是地名、地址或地点 ID。该字符串应该是 URL 转义的，因此像 "City Hall, New York, NY" 这样的地址应该被转换为 City+Hall,New+York,NY。（Google Maps Embed API 在 escaping 空格时同时支持 + 和 %20。）地点 ID 应以 place_id: 为前缀。目的地定义方向的终点。

所以开始和结束位置的地址应该有效，但它没有。

有人能给我指出让它工作的方向吗，要清楚它是为了学习 apis 以及我们可以在基本的内部学习网页上用它做什么。

Answer 1

确保 iframe 的 URL 没有换行符或空白字符，并且它作为 src 属性包含在 iframe 中。应该是：

<!DOCTYPE html>
    <html>
      <head>
        <style>
          #map {
            height: 400px;
            width: 100%;
           }
        </style>
      </head>
      <body>
        <iframe
      width="450"
      height="250"
      frameborder="0" style="border:0"
      src ="https://www.google.com/maps/embed/v1/directions?key=AIzaSyC0usSsGXuNajTOjNnMP4yDTmc4P7kqjYk  &origin=RijsWijkstraat+223,Amsterdam&destination=Back-UpStraat+12,Amsterdam&avoid=tolls"
    </iframe>
    </html>

我把它添加到这里的 jsfiddle 中供您查看：https://jsfiddle.net/16q6exkh/

Answer 2

URL 应该在 src 属性 inside <iframe> 标签中，您的代码中缺少结束 </body> 标签， URL 包含空格。如果您解决所有这些问题，它就会起作用：

<html>

<head>
  <style>
    #map {
      height: 400px;
      width: 100%;
    }
  </style>
</head>

<body>
  <iframe width="450" height="250" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/directions?key=AIzaSyC0usSsGXuNajTOjNnMP4yDTmc4P7kqjYk&origin=RijsWijkstraat+223,Amsterdam&destination=Back-UpStraat+12,Amsterdam&avoid=tolls">
</iframe>
</body>

</html>

使用 google 路线时出现白页 api

white page when using google directions api

html

api

directions