Question

我使用的是WordPress插件（Store Locator Plus - 在地圖中顯示一堆商店，並在其下有一個列表），這很好，但我需要一點點改變，我發現處理地圖和信息的文件是一個.js文件。

插件顯示當您點擊指針時看到的氣球中的圖像，我想在地圖下方的列表中顯示相同的圖像。

這是顯示在氣球的東西代碼：它會彈出這個圖像

<img src='"+image+"' class='sl_info_bubble_main_image'> 

我想獲得該圖像，並顯示其店鋪的名單上

function createMarker(point, name, address, homeAddress, description, url, email, hours, phone, image,tags) { 
markerOpts = { icon:theIcon }; 
var marker = new GMarker(point, markerOpts); 

var more_html=""; 
if(url.indexOf("http://")==-1) { 
url="http://"+url; 
} 

if (url.indexOf("http://")!=-1 && url.indexOf(".")!=-1) { 
more_html+="| <a href='"+url+"' target='_blank' class='storelocatorlink'><nobr>" + slplus.website_label +"</nobr></a>" 
} else { 
url=""; 
} 

if (email.indexOf("@")!=-1 && email.indexOf(".")!=-1) { 
if (!slplus.use_email_form) { 
    more_html+="| <a href='mailto:"+email+"' target='_blank' class='storelocatorlink'><nobr>" + email +"</nobr></a>"; 
} else { 
    more_html+="| <a href='javascript:slp_show_email_form("+'"'+email+'"'+");' class='storelocatorlink'><nobr>" + email +"</nobr></a><br/>"; 
}      
} 

if (image.indexOf(".")!=-1) {more_html+="<br/><img src='"+image+"' class='sl_info_bubble_main_image'>"} else {image=""} 
if (description!="") {more_html+="<br/>"+description+"";} else {description=""} 
if (hours!="") {more_html+="<br/><span class='location_detail_label'>Hours:</span> "+hours;} else {hours=""} 
if (phone!="") {more_html+="<br/><span class='location_detail_label'>Phone:</span> "+phone;} else {phone=""} 

var street = address.split(',')[0]; 
    if (street.split(' ').join('')!=""){ 
     street+='<br/>'; 
    }else{ 
     street=""; 
    } 
var street2 = address.split(',')[1]; 
    if (street2.split(' ').join('')!=""){ 
     street2+='<br/>'; 
    }else{ 
     street2=""; 
    } 
var city  = address.split(',')[2]; 
    if (city.split(' ').join('')!=""){ 
     city+=', '; 
    }else{ 
     city=""; 
    } 
var state_zip = address.split(',')[3];  

// If we want to show tags in the bubble... 
// 
if (slplus.show_tags) { 
    if (jQuery.trim(tags) != '') { 
     more_html += '<br/>'+tags; 
    } 
}  

if (homeAddress.split(" ").join("")!="") { 
var html = '<div id="sl_info_bubble"><!--tr><td--><strong>' + name + '</strong><br>' + street + street2 + city + state_zip + '<br/> <a href="http://' + slplus.map_domain + '/maps?saddr=' + encodeURIComponent(homeAddress) + '&daddr=' + encodeURIComponent(address) + '" target="_blank" class="storelocatorlink">Indicazioni Stradali</a> ' + more_html + '<br/><!--/td></tr--></div>'; 
} else { 
var html = '<div id="sl_info_bubble"><!--tr><td--><strong>' + name + '</strong><br>' + street + street2 + city + state_zip + '<br/> <a href="http://' + slplus.map_domain + '/maps?q=' + encodeURIComponent(address) + '" target="_blank" class="storelocatorlink">Map</a> ' + more_html + '<!--/td></tr--></div>'; 
} 
GEvent.addListener(marker, 'click', function() { 
marker.openInfoWindowHtml(html); 
}); 
return marker; 
} 

var resultsDisplayed=0; 
var bgcol="white"; 

，這是使用此代碼創建的：

function createSidebarEntry(marker, name, address, distance, homeAddress, url, email, phone,tags) { 
document.getElementById('map_sidebar_td').style.display='block'; 
    var div = document.createElement('div'); 
    var street = address.split(',')[0]; 
    var street2 = address.split(',')[1]; 
    var city = address.split(',')[2]; 
    if (city.split(' ').join('')!=""){ 
     city+=', '; 
    }else{ 
     city=""; 
    } 
    var state_zip = address.split(',')[3]; 

    var link = ''; 
    if(url.indexOf("http://")==-1) {url="http://"+url;} 
    if (url.indexOf("http://")!=-1 && url.indexOf(".")!=-1) {link="<a href='"+url+"' target='_blank' class='storelocatorlink'><nobr>" + slplus.website_label +"</nobr></a><br/>"} else {url="";} 

    var elink = ""; 
    if (email.indexOf("@")!=-1 && email.indexOf(".")!=-1) { 
     if (!slplus.use_email_form) { 
      elink="<a href='mailto:"+email+"' target='_blank' class='storelocatorlink'><nobr>" + email +"</nobr></a><br/>"; 
     } else { 
      elink="<a href='javascript:slp_show_email_form("+'"'+email+'"'+");' class='storelocatorlink'><nobr>" + email +"</nobr></a><br/>"; 
     }    
    } 

    // If we want to show tags in the table... 
    // 
    var taginfo = ""; 
    if (slplus.show_tags) { 
     if (jQuery.trim(tags) != '') { 
      var tagclass = tags.replace(/\W/g,'_'); 
      taginfo = '<br/><div class="'+tagclass+'"><span class="tagtext">'+tags+'</span></div>'; 
     } 
    }   

    // Keep empty data lines out of the final output 
    // 
    if (jQuery.trim(street) != '')   { street = street + '<br/>'; } 
    if (jQuery.trim(street2) != '')  { street2 = street2 + '<br/>'; } 
    if (jQuery.trim(city+state_zip) != '') { state_zip = state_zip + '<br/>'; } 

    var html = '<div class="punti-vendita-box">' + 
       '<div class="punto-vendita-name"><h3>' + name + '</h3></div>' + 
       '<div class="punto-vendita-extra"><div class="punto-vendita-details">' + 
        street + 
        street2 + 
        city + state_zip + 
        phone + 
       '</div> <div class="punto-vendita-indicazioni">' + 
         link + 
         elink + 
         '<a href="http://' + slplus.map_domain + 
         '/maps?saddr=' + encodeURIComponent(homeAddress) + 
         '&daddr=' + encodeURIComponent(address) + 
         '" target="_blank" class="storelocatorlink">Indicazioni Stradali</a></div>' + 
        '</div>' + 

        '</div>'; 
    div.innerHTML = html; 
    div.className='results_entry'; 
    resultsDisplayed++; 
    GEvent.addDomListener(div, 'click', function() { 
    GEvent.trigger(marker, 'click'); 
    }); 
return div; 
} 

應該很容易，考慮到圖像已經找到在前面的代碼塊中。

任何幫助真的很感激。

Answer 1

如果在地圖之後創建商店列表，則很難在稍後添加圖像。你可以做到這一點的方法之一是通過在代碼中泡加入了獨特的ID的圖像，如

<img src='"+image+"' class='sl_info_bubble_main_image' id='" + name + "'> 

然後創建列表使用

<img src='" + $('#' + name).attr('src') +"' class='sl_info_bubble_main_image' > 

從代碼，我不能確定是否名稱是一個唯一的標識符，因此您必須確定哪種方法最適合您的情況。