在 xaringan 幻灯片中并排使用街道地图和街道视图
Using street map and street view side by side in a xaringan slide
我从 Google 了解到 this example,它展示了我们如何并排放置街道地图和街景视图。但我不知道如何在 xaringan
幻灯片中创建这样的视图。
我尝试复制“全部”选项卡下的代码,将内容保存为 html 文件,然后将该文件导入到 xaringan
幻灯片中。但这种方法似乎行不通。有人能指出我正确的方向吗?
我终于明白了!这是我们需要做的:
- 转到this link打开街景视图Side-By-Side示例
- 转到全部 选项卡并单击将代码示例复制到剪贴板 菜单
- 打开任何文本编辑器(例如记事本++),粘贴代码示例并使用
.html
扩展名 保存文件
- 转到 this link 并按照 获取 API 密钥 部分给出的说明获取 API 密钥
- 将代码示例第 7 行的文本 YOUR_API_KEY 替换为从 Google 通过步骤 4
获得的 API 密钥
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize&libraries=&v=weekly"
- 在
initialize()
函数的定义中,将 fenway 替换为所需的位置名称,并更改关联的 lat
& lng
- 将以下代码添加到
xaringan
的源 Rmd
文件中,以创建以 side-by-side 方式显示卫星视图和街道视图的幻灯片
# Adjust width & height to suit your needs
htmltools::tags$iframe(
src = "path/to/street-view-side-by-side.html",
width = 800,
height = 450
)
我从 Google 了解到 this example,它展示了我们如何并排放置街道地图和街景视图。但我不知道如何在 xaringan
幻灯片中创建这样的视图。
我尝试复制“全部”选项卡下的代码,将内容保存为 html 文件,然后将该文件导入到 xaringan
幻灯片中。但这种方法似乎行不通。有人能指出我正确的方向吗?
我终于明白了!这是我们需要做的:
- 转到this link打开街景视图Side-By-Side示例
- 转到全部 选项卡并单击将代码示例复制到剪贴板 菜单
- 打开任何文本编辑器(例如记事本++),粘贴代码示例并使用
.html
扩展名 保存文件
- 转到 this link 并按照 获取 API 密钥 部分给出的说明获取 API 密钥
- 将代码示例第 7 行的文本 YOUR_API_KEY 替换为从 Google 通过步骤 4 获得的 API 密钥
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize&libraries=&v=weekly"
- 在
initialize()
函数的定义中,将 fenway 替换为所需的位置名称,并更改关联的lat
&lng
- 将以下代码添加到
xaringan
的源Rmd
文件中,以创建以 side-by-side 方式显示卫星视图和街道视图的幻灯片
# Adjust width & height to suit your needs
htmltools::tags$iframe(
src = "path/to/street-view-side-by-side.html",
width = 800,
height = 450
)