Одновременное использование карты улиц и просмотра улиц на слайде xaringan

Я наткнулся на этот пример от Google, который показывает, как мы можем разместить карту улиц и улицу рядом друг с другом. Но я не знаю, как создать такое представление на xaringan слайде.

Я попытался скопировать код на вкладке «Все», сохранил содержимое как файл html и позже импортировал этот файл на слайд xaringan. Но этот подход, похоже, не работает. Может ли кто-нибудь указать мне правильное направление?

(Кросс опубликован в сообществе RStudio)


r xaringan
person Ashirwad    schedule 02.08.2020    source источник
comment
Привет @Ashirwad, просто вопрос, вы хотите интегрировать карту Google в Xaringan? Требуется ли ключ от API googlemaps?   -  person Alexis    schedule 02.08.2020
comment
@Alexis, я просто хочу выделить участок дороги и соответствующий вид улицы, встроив карту Google в xaringan. Я не уверен в требованиях API!   -  person Ashirwad    schedule 02.08.2020
comment
@Alexis, вы были правы насчет ключа API! Не знаю, как я упустил из виду эту часть. Но наконец я разобрался. :)   -  person Ashirwad    schedule 23.08.2020

Ответы (1)


arrow_upward
1
arrow_downward

Я наконец-то понял! Вот что нам нужно сделать:

  1. Перейдите по этой ссылке, чтобы открыть Просмотр улиц. Пример изображения "бок о бок"
  2. Перейдите на вкладку Все и щелкните меню Копировать образец кода в буфер обмена.
  3. Откройте любой текстовый редактор (например, блокнот ++), вставьте образец кода и сохраните файл с расширением .html.
  4. Перейдите по этой ссылке и следуйте инструкциям, приведенным в разделе Получить ключ API, чтобы получить ключ API
  5. Замените текст YOUR_API_KEY в строке 7 образца кода на ключ API, полученный от Google на шаге 4.
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize&libraries=&v=weekly"
  1. В определении функции initialize() замените fenway на желаемое имя местоположения и измените связанный lat & lng
  2. Добавьте следующий код в исходный файл xaringan Rmd, чтобы создать слайд, показывающий вид со спутника и вид на улицу рядом друг с другом.
# Adjust width & height to suit your needs
htmltools::tags$iframe(
  src = "path/to/street-view-side-by-side.html", 
  width = 800, 
  height = 450
)
person Ashirwad    schedule 23.08.2020