2016-06-26 5 views
0

私には、HTMLテンプレートに値を割り当てるdrawPlaceDetailsという関数があります。 getPhotoURL()関数は、画像へのURLリンクを返します。 このurlをbackground-imageプロパティに割り当てる必要があります。 私が得るのは、画像のない空のdivです。私は、コンソールにそれらを印刷することによってURLを検証し、画像を開くように見えます。次のようにテンプレート内のdivに背景画像のURLを割り当てます。

テンプレートコードと機能は次のとおりです。ここで

<script type="text/html" id="places-template"> 
    <li> 
    <div class="placesCard"> 
    <div id= "places-name" class="places-name">${name}</div> 
    <div id= "places-img" style="height:40px;width:40px; border:1px black solid"></div> 
    <div id="places-address" class="places-address">${formatted_address}</div> 
    </div> 
</li> 

function drawPlaceDetails(results){ 
$("#places-list").append("<ul></ul>"); 
for(var i=0; i<results.length; i++){ 
var result = results[i]; 
console.log(result); 
var photo = getPhotoURL(result.photos);  
$("#places-template").tmpl(result).find("#places-img")[0].style.backgroundImage = "url('" + photo + "')"; 
$("#places-template").tmpl(result).appendTo("ul"); 
} 
} 

function getPhotoURL(photos){ 
    if(photos){ 
    return photos[0].getUrl({'maxWidth': 35, 'maxHeight': 35});  
} 

enter image description here enter image description here

+0

あなたは、これは正しいですか? .appendTo( "ul") – MoustafaS

+0

console.logの詳細を簡単にデバッグするために共有できますか? –

+0

はい。他の要素が "ul"に正しく追加されているためです。 – user2585118

答えて

0

はあなたの問題です。

私は上記のコメントからこれを取りました。
console.log(result);

{formatted_address: "1075 Tully Rd #32, San Jose, CA 95122, United States", 
geometry: Object, 
icon: "maps.gstatic.com/mapfiles/place_api/icons/…;, 
id: "1c5dc234baffda29dec83b094b3b806e8f88befe", 
name: "Little Caesars Pizza"…} 

formatted_address:"1075 Tully Rd #32, San Jose, CA 95122, United States" 
name:"Little Caesars Pizza" 
photos:Array[1] 
place_id:"ChIJkyfsN-oyjoARYaF41nKnA5w" 
price_level:1 
rating:3.7 
} 

これはconsole.log()であると仮定するとは、MAL-形成された物体です。
私は、このオブジェクト内に...について言うことはできません,とextratブラケット}


"Little Caesars Pizza"後に不足している多くの。
コードを隠すようです。

EDIT

私は今(コンソールスナップショット)あなたの編集に見ているこのrestaurant-71.pngを取得してください:

var photo = result.result.html_attributions[0].icon; 
console.log(photo);