[英]How to display infowindow from clicking link using jquery gmap3
我正在使用jquery gmap3來顯示一個帶有標記的地圖,該標記用於從我建立的搜索中找到的每個結果。 每個標記都有一個信息窗口,當有人單擊地圖上的標記,信息窗口會顯示該信息時,該信息窗口會顯示有關標記所處位置的詳細信息。 在地圖下方,我顯示找到的結果的列表,對於找到的每個結果,我想要做的就是有一個鏈接,當有人單擊該鏈接時,頁面會向上滾動到地圖,然后居中到結果所屬的標記,並且信息窗口會自動彈出。 那可能嗎? 這是我的代碼:
var base_lat = 33.609063;
var base_lon = -112.105135;
var base_markers = [{"latLng":["33.609063","-112.105135"],"data":"<div class=\"estate_info\"><img src=\"\/img\/realestate\/test_estate.jpg\"><b><a href=\"\/charming-payette-lake-cabin-with-private-dock-beach-rl2\">1022 E. St. Mill Valley, CA 85282<\/a><\/b><ul><li><label>Beds:<\/label>6<\/li><li><label>Baths:<\/label>3.0<\/li><li><label>Levels:<\/label>2<\/li><\/ul><ul><li><label>Price:<\/label>$520,000<\/li><li><li><label>Sqft:<\/label>5,600<\/li><li><a href=\"\/charming-payette-lake-cabin-with-private-dock-beach-rl2\">View Details »<\/a><\/li><\/ul><\/div>","options":{"icon":"\/img\/markers\/number_1.png"}},{"latLng":["33.479913","-111.699535"],"data":"<div class=\"estate_info\"><img src=\"\/img\/realestate\/default_estate.jpg\"><b><a href=\"\/single-level-mountain-view-home-in-central-laveen-rl1\">South of Baseline Rd \/ 51st Ave Laveen, CA 85384<\/a><\/b><ul><li><label>Beds:<\/label>3<\/li><li><label>Baths:<\/label>2.5<\/li><li><label>Levels:<\/label>1<\/li><\/ul><ul><li><label>Price:<\/label>$124,563<\/li><li><li><label>Sqft:<\/label>2,500<\/li><li><a href=\"\/single-level-mountain-view-home-in-central-laveen-rl1\">View Details »<\/a><\/li><\/ul><\/div>","options":{"icon":"\/img\/markers\/number_2.png"}}];
$('#searchmap').gmap3({
map:{
options:{
center:[base_lat,base_lon],
zoom: 9,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
scrollwheel: true,
streetViewControl: true
}
},
marker:{
values: base_markers,
options:{
draggable: false
},
events:{
click: function(marker, event, context) {
var map = $(this).gmap3("get"),
infowindow = $(this).gmap3({get:{name:"infowindow"}});
if (infowindow) {
infowindow.open(map, marker);
infowindow.setContent(context.data);
}else {
$(this).gmap3({
infowindow:{
anchor:marker,
options:{content: context.data}
}
});
}
}
}
}
});
這是我在地圖下顯示的結果:
<ul>
<li class="listing first">
<div class="rphoto"><a href="#" style="background-image:url('/img/realestate/test_estate.jpg');"></a></div>
<div class="details">
<strong>1. <a href="#">Charming Payette Lake Cabin with private dock & beach</a></strong>
<span>Type: Condo | Built: 1995 | Status: Backup or Contingent</span>
<div class="info">This charming cabin is located on Payette Lake with private dock and beach. It offers 2 Bedroom and 1 Bath. Sleeps 8 with 2 Doubles, 1 bunk and 1 queen hideabed...<nav>Mill Valley, CA | Price: $520,000 | <a href="#">View Details »</a></nav></div>
<ol>
<li>6<br>Bed</li>
<li>3.0<br>Bath</li>
<li class="last">5,600<br>Sqft</li>
</ol>
</div>
</li>
<li class="listing last">
<div class="rphoto"><a href="#" style="background-image:url('/img/realestate/default_estate.jpg');"></a></div>
<div class="details">
<strong>2. <a href="#">Single-level mountain-view home in central Laveen</a></strong>
<span>Type: House | Built: 2003 | Status: Active</span>
<div class="info">With 3,200 square feet of living area and located just one lot back from the ocean, makes childhood dreams of fantastic sandcastles come true - and you can be one of the...<nav>Laveen, CA | Price: $124,563 | <a href="#">View Details »</a></nav></div>
<ol>
<li>3<br>Bed</li>
<li>2.5<br>Bath</li>
<li class="last">2,500<br>Sqft</li>
</ol>
</div>
</li>
</ul>
因此,在搜索結果中又如何獲得它們的位置,如果他們單擊某個結果的鏈接,則它將地圖居中於該標記所在的位置,因此示例第二個結果將居中於地圖上的第二個標記,然后信息窗口將自動顯示。 如何使用jquery gmap3代碼做到這一點? 這是Im所指的示例:
http://koti.mbnet.fi/ojalesa/boundsbox/makemarker_sidebar_plain.htm
好吧,我能夠弄清楚。 這是我添加的jQuery代碼:
$(".propertyclick").click(function() {
//We first scroll to top of page
$("html,body").animate({ scrollTop: 0 },"fast");
//We then get the current id of the marker being clicked
var id = $(this).attr('data-marker');
//We now get the marker in the map that they want to see
var marker = $("#estate_searchmap").gmap3({ get: { id: id } });
//We now simulate that marker being clicked via the map
google.maps.event.trigger(marker,'click');
return false;
});
在清單結果中,我添加了一個鏈接,供他們單擊以觸發此操作:
<a href="" class="propertyclick" data-marker="property1"></a>
data-marker保留了我分配給我的原始代碼base_markers的json值中每個標記的ID。 因此,現在您將在每個標記中看到一個新值,例如id:“ property1”,下一個將是id:“ property2”,依此類推。 這就是我在上面的click函數中引用以知道要調用哪個標記的方式。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.