將變量傳遞給靜態谷歌圖像地圖

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());