谷歌地图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/