如何在翡翠页面中包含静态 Google 地图答案

【问题标题】：How to include a static Google map in a jade page如何在翡翠页面中包含静态 Google 地图
【发布时间】：2013-12-15 16:25:44
【问题描述】：

我进行了多次搜索，但找不到一个简单的示例来说明如何将带有一些点的静态 Google 地图显示到玉石/快递页面上。我所做的每一次尝试都没有显示任何内容。如果我能看到其他人是如何做到这一点的，我应该能够弄清楚。我要做的就是在地图上绘制一些点并将其显示在网页上。任何指针都非常感谢。

【问题讨论】：

标签： node.js express pug

【解决方案1】：

Google 静态地图只是普通的旧图像。因此，像添加任何其他图像一样包含它们。

doctype 5
html(lang="en")
  head
    title Example
  body
    h1 Google Static Map
    img(src="https://maps.googleapis.com/maps/api/staticmap?center=Opera+House,Sydney+Australia&zoom=13&size=400x300&markers=-33.8565,151.2151&sensor=false")

可以在此处找到 Google Static Maps API V2 Developers guide。

如果你想在服务器端建立标记字符串，然后在客户端输出，试试这个例子。

res.render('template', {markers: '-33.8565,151.2151'});

玉石模板中

img(src="https://maps.googleapis.com/maps/api/staticmap?center=Opera+House,Sydney+Australia&zoom=13&size=400x300&markers=#{markers}&sensor=false")

有关markers parameter 的更多详细信息，请参阅指南。

【讨论】：