Google Static Maps API 动态链接与翡翠答案

【问题标题】：Google Static Maps API dynamic links with jadeGoogle Static Maps API 动态链接与翡翠
【发布时间】：2017-11-25 16:22:01
【问题描述】：

有没有办法让 Google Static Maps API 链接在 pug(jade) 模板中动态化？

例如，

img.img-responsive.img-rounded(src='http://maps.googleapis.com/maps/api/staticmap?center=52.241770, -0.900181&zoom=17&size=400x350&sensor=true&markers=52.241770, -0.900181&scale=2&key=API_KEY')

有效但

img.img-responsive.img-rounded(src='http://maps.googleapis.com/maps/api/staticmap?center={location.coords.lng},{location.coords.lat}&zoom=17&size=400x350&sensor=true&markers={location.coords.lng},{location.coords.lat}&scale=2&key=API_KEY')

没有。

【问题讨论】：

标签： javascript node.js pug google-static-maps

【解决方案1】：

如何使用引号？

img.img-responsive.img-rounded(src="http://maps.googleapis.com/maps/api/staticmap?center="  + location.coords.lng + "," + location.coords.lat + "&zoom=17&size=400x350&sensor=true&markers=" + location.coords.lng + "," + location.coords.lat + "&scale=2&key=API_KEY")

【讨论】：

【解决方案2】：

试试template literal。

img.img-responsive.img-rounded(src=`http://maps.googleapis.com/maps/api/staticmap?center=${location.coords.lng},${location.coords.lat}&zoom=17&size=400x350&sensor=true&markers=${location.coords.lng},${location.coords.lat}&scale=2&key=API_KEY`)

【讨论】：