2012-05-16 3 views
0

Wordpress Plugin (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'> 

을 제공합니다 :

이것은 baloon입니다 물건을 표시하는 코드 이는이 코드를 사용하여 생성 :

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

가 쉬워야한다을, 이미지를 고려하는 것은 이미 발견 이전 코드 덩어리에서.

정말 도움이됩니다.

+0

답장을 보내 주셔서 감사합니다. 나에게 준 코드를 복사/붙여 넣으려고했으나지도가 깨졌습니다. 여기 [link] http://pastiebin.com/?page=p&id=4fb3ac7b502af 전체 .js를 찾을 수 있습니다. 자바 스크립트 사람은 꽤 쉬워야합니다. 나는 더 css 사람이다;) – molokom

답변

0

지도를 만든 후에 상점 목록을 만드는 경우 나중에 이미지를 추가하기가 어려울 수 있습니다. 당신이 그것을 할 수있는 한 가지 방법은 내가 여부를 결정 할 수없는 코드에서 목록을 사용

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

를 작성하는 코드와 같은

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

그런 다음 거품의 이미지에 고유 한 ID를 추가하는 것입니다 이름은 고유 식별자이므로 상황에 가장 적합한 것이 무엇인지 결정해야합니다.

+0

답장을 보내 주셔서 감사합니다. 나는 당신이 나에게 준 코드를 복사/붙여 넣으려고했으나 그것은지도를 무너 뜨 렸습니다. 여기 [링크] http://pastiebin.com/?page=p&id=4fb3ac7b502af 전체 .js를 찾을 수 있습니다. 자바 스크립트 사람은 꽤 쉬워야합니다. 나는 더 css 사람이다;) – molokom

+0

나는 당신의 코드를 수정하고 다시 게시했다. 그것은 나의 변화와 함께 작동해야한다. 방금 sidebarentry 함수에 이미지 필드를 추가하고 이미지를 전달했습니다. 두 번째 게시물은 거기에 필요하지 않은
태그가 있었기 때문입니다. –

+0

와우, 그게 다야. 이미지 라인을 추가하면이 출력이 모든 상점에 대해

이됩니다. 만약 내가 단지 ''
' +(image.indexOf(".")!=-1) ? " " : "" + '
'' 을 제거하면 모든 것이 다시 작동합니다. 이미지가 표시되지만 다른 모든 정보가 누락되었습니다. 지금까지의 노력에 감사 드리며, 그것은 내가 필요한 것에 매우 가깝습니다. – molokom