将变量传递给静态谷歌图像地图

Question

我有一个变量，我在其上存储地址。 我想将它传递给谷歌地图API静态：

这样

adr = comp.adress; 
console.log(adr);// 28, rue Armand Carrel 

<img src="https://maps.googleapis.com/maps/api/staticmap?center={adr}&amp;size=600x300" alt="exemple" /> 

我不明白的ADR值有什么不对的代码？

空间来处理

"addr": "\n    \n    28, rue Armand Carrel \n    ", 

谢谢

Answer 1

你在做什么在你刚读{adr}作为字符串的一部分。

假设以上是React/ES6/ES2015。

你需要把它串联到字符串：

<img src={"https://maps.googleapis.com/maps/api/staticmap?center=" + adr + "&amp;size=600x300"} alt="exemple" />` 

或者你可以使用template literals：

<img src={`https://maps.googleapis.com/maps/api/staticmap?center=${adr}&amp;size=600x300`} alt="exemple" />` 

Answer 2

的问题是不相关的reactjs。

您需要对地址进行编码（使用encodeURIComponent()），以便它成为有效的网址。就像这样：

//var address = '28, rue Armand Carrel'; 
 
var address = "\n    \n    28, rue Armand Carrel \n"; 
 
document.body.innerHTML = '<img src="https://maps.googleapis.com/maps/api/staticmap?center=' + encodeURIComponent(address) + '&amp;size=600x300" alt="exemple" />';

。如果你想重新格式化地址：

var address = "\n    \n    28, rue Armand Carrel \n"; 
 
console.log(address.replace(/\n/g, '').trim());