谷歌地圖javascript：如果數組[i]是未定義的，忽略在infowindow.setContent

Question

中引用它的行。所以這是一個將被重構的函數的怪物，但現在我只是試圖讓它工作。

問題是，打開標記infowindow失敗時，它包含未定義的谷歌地方變量。我希望能夠忽略infowindow.setContent中引用未定義變量的行，以便無論Google地方信息可用，infowindow都會打開。我可以單獨檢查每個人，但希望有人能找到更有說服力的解決方案。

我的代碼：

//passed a google place object 
function formatInfoWindow(place) { 

     var name = place.name, 
       open = place.opening_hours.open_now, 
       address = place.vicinity, 
       phoneI = place.international_phone_number, 
       phone = place.formatted_phone_number 
       rating = place.rating, 
       reviewAuth = place.reviews[0].author_name, 
       reviewText = place.reviews[0].text, 
       reviewRate = place.reviews[0].rating, 
       website = place.website, 
       img = place.photos[0], 
       photo = img.getUrl(), 
       info = this.info; 


//creates an array of all the place variables 
     var infoWindowArray = [name, open, address,phoneI, phone, rating, reviewAuth, reviewText, reviewRate, website, img, photo, info]; 


//loop through array to find undefined variables 
     for (var i = 0; i < infoWindowArray.length; i++) { 
      if (typeof infoWindowArray[i] === 'undefined') { 
//somehow ignore those variables in setContent block 
      } 
     } 
     this.infowindow.setContent(
'<div class="infowindow"><strong><h1>' + name + '</h1></strong>' + 
    '<address>' + address + '</address>'+ 
    '<p>Open Now: ' + open + '&nbsp;&nbsp;&nbsp; Rating: ' + rating + '&nbsp;&nbsp;&nbsp; ' + '<a href="' + website + '">Website</a></p>'+ 
    '<p><a href="tel:' + phoneI + '">'+phone+'</a></p>'+ 
    '<h3><b>Notes:</b></h3>'+ 
    '<p>' + info + '</p>'+ 
    '<h4>' + reviewAuth + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Rating: '+reviewRate+'</h4>'+ 
    '<p>' + reviewText + '</p>'+ 
    '<img src='+ photo + ' ></img>'+ 
'</div>' 
     ); 
     this.infowindow.open(map, this); 
    } 

Answer 1

你可以使它成爲一個模板字符串和使用正則表達式與值替換如下圖所示

function formatInfoWindow(place) { 

    var img = place.photos[0]; 

    var infos = { 
    name: place.name, 
    open: place.opening_hours.open_now, 
    address: place.vicinity, 
    phoneI: place.international_phone_number, 
    phone: place.formatted_phone_number, 
    rating: place.rating, 
    reviewAuth: place.reviews[0].author_name, 
    reviewText: place.reviews[0].text, 
    reviewRate: place.reviews[0].rating, 
    website: place.website, 

    photo: img.getUrl(), 
    info: this.info 
    }; 


    var contentTemplate = '<div class="infowindow"><strong><h1>##name##</h1></strong>' + 
    '<address>##address##</address>' + 
    '<p>Open Now: ##open##&nbsp;&nbsp;&nbsp; Rating: ##rating##&nbsp;&nbsp;&nbsp; ' + '<a href="##website##">Website</a></p>' + 
    '<p><a href="tel:##phoneI##">##phone##</a></p>' + 
    '<h3><b>Notes:</b></h3>' + 
    '<p>##info##</p>' + 
    '<h4>##reviewAuth##&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Rating: ##reviewRate##</h4>' + 
    '<p>##reviewText##</p>' + 
    '<img src="##photo##"></img>' + 
    '</div>'; 

    var content = contentTemplate.replace(/##(.*?)##/g, function(match, prop) { 
    return infos[prop] || ""; 
    }); 


    this.infowindow.setContent(content); 
    this.infowindow.open(map, this); 
} 

演示在這裏：https://jsfiddle.net/4Lxhyqje/

，或者你可以使用如Handlebars的模板引擎：http://handlebarsjs.com/