Question

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

我们希望使用谷歌方向api来生成从阿姆斯特丹到布鲁塞尔的belgieplein的预定路线。

这里是代码，因为我可以创建它与基本代码谷歌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 apis，这个让我头疼。

将原点和方向改为几乎所有googles api页面都清楚地表明它可以处理原点定义显示方向的起点。该值可以是地名，地址或地点ID。字符串应该是URL转义的，因此诸如“City Hall，New York，NY”的地址应该转换为City + Hall，New + York，NY。（Google地图嵌入API在转义空格时支持+和％20。）地点ID应以place_id：为前缀。 destination定义了方向的终点。

所以开始和结束位置的地址应该有效，但事实并非如此。

有人可以指出我的方向让它发挥作用，明确这是为了学习api以及我们可以在基本的内部学习网页中用它做些什么。

Answer 1

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

＆＃13;

<!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>

＆＃13;

我将此添加到jsfiddle中供您查看：https://jsfiddle.net/16q6exkh/

Answer 2

网址应位于<{em>内 <iframe>标记内，代码中缺少结束</body>标记，并且网址包含空格。如果你解决了这一切，它就可以了：

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

使用谷歌方向api时的白页

2 个答案: