Question

我正在使用Wordpress插件（Store Locator Plus - 在地图中显示一堆商店并在下面有一个列表）这很好，但我需要一点改变，我发现处理地图的文件并且信息是.js文件。

插件会在您点击指针时看到的气球中显示图像，我想在地图下方的列表中显示相同的图像。

这是在气球中展示事物的代码：

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";

会显示此图像

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

我想获取该图片并将其显示在使用此代码创建的商店列表中：

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

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

在地图外显示图像（在地图弹出窗口中可见）

1 个答案: