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;
}
가 쉬워야한다을, 이미지를 고려하는 것은 이미 발견 이전 코드 덩어리에서.
정말 도움이됩니다.
답장을 보내 주셔서 감사합니다. 나에게 준 코드를 복사/붙여 넣으려고했으나지도가 깨졌습니다. 여기 [link] http://pastiebin.com/?page=p&id=4fb3ac7b502af 전체 .js를 찾을 수 있습니다. 자바 스크립트 사람은 꽤 쉬워야합니다. 나는 더 css 사람이다;) – molokom