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' > 

从代码，我不能确定是否名称是一个唯一的标识符，因此您必须确定哪种方法最适合您的情况。