Я тестирую небольшой побочный проект для внутреннего использования.

Мы хотим использовать api маршрутов Google для создания заранее определенного маршрута от Амстердама до Бельгиплейн в Брюсселе.

Вот код, насколько я мог создать его с базовым кодом, который страницы API Google дают

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

Но все, что он делает, это создает белую страницу. что я здесь делаю не так?

Я учусь работать с API Google, и сейчас у меня болит голова.

Have изменяет исходную точку и направления почти для всего, что на страницах API Google ясно сказано, что он может обрабатывать исходную точку, определяет начальную точку, от которой следует отображать направления. Значением может быть название места, адрес или идентификатор места. Строка должна быть экранирована URL-адресом, поэтому адрес, например "City Hall, New York, NY", должен быть преобразован в City + Hall, New + York, NY. (API для встраивания карт Google поддерживает как +, так и% 20 при экранировании пробелов.) Перед идентификаторами места должен стоять префикс place_id :. destination определяет конечную точку маршрутов.

Таким образом, адреса начала и окончания должны работать, но это не так.

Может ли кто-нибудь указать мне направление, в котором он работает, чтобы было ясно, что это для изучения API и того, что мы можем с ним делать на веб-страницах базового внутреннего обучения.

0
jubels 13 Мар 2018 в 15:50

2 ответа

Лучший ответ

Убедитесь, что URL-адрес iframe не содержит символа новой строки или пробела и что он включен в качестве атрибута 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/

0
harymitchell 13 Мар 2018 в 13:14

URL-адрес должен быть в атрибуте src внутри тега <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>
0
Johannes 13 Мар 2018 в 13:17