谷歌地圖API工具條

Question

我添加標記和側邊欄這個辦法：

<script type="text/javascript"> 
    //<![CDATA[ 

    if (GBrowserIsCompatible()) { 

     // this variable will collect the html which will eventually be placed in the side_bar 
     var side_bar_html = ""; 

     // arrays to hold copies of the markers and html used by the side_bar 
     // because the function closure trick doesnt work there 
     var gmarkers = []; 

     // A function to create the marker and set up the event window 
     function createMarker(point,name,html) { 
     var marker = new GMarker(point); 
     GEvent.addListener(marker, "click", function() { 
      marker.openInfoWindowHtml(html); 
     }); 
     // save the info we need to use later for the side_bar 
     gmarkers.push(marker); 
     // add a line to the side_bar html 
     side_bar_html += '<li><a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><\/li>'; 
     return marker; 
     } 

     // This function picks up the click and opens the corresponding info window 
     function myclick(i) { 
     GEvent.trigger(gmarkers[i], "click"); 
     GEvent.trigger(gmarkers2[i], "click"); 
     } 

     // create the map 
     var map = new GMap2(document.getElementById("map")); 
     map.addControl(new GLargeMapControl()); 
     map.addControl(new GMapTypeControl()); 
     map.setCenter(new GLatLng(52.898962,-8.21228), 7); 

     // add the points  
     var point = new GLatLng(53.357826,-6.28418); 
     var marker = createMarker(point,"Ashgrove Interparts Ltd.","<strong>Ashgrove Interparts Ltd.</strong><br>Kill Avenue.<br>Dunlaoire.<br>Co Dublin.<br>Tel; 01-2805063.<br>Contact; Mr Dermot Kelly.<br>Dublin Area") 
     map.addOverlay(marker); 

     var point = new GLatLng(53.285845,-6.158266); 
     var marker = createMarker(point,"Abbey Service Station.","<strong>Abbey Service Station.</strong><br>Abbey Road.<br>Monkstown.<br>Co. Dublin.<br>Tel; 01-2809626.<br>Contact; George/Kay.") 
     map.addOverlay(marker); 

     var point = new GLatLng(53.340508,-6.228905); 
     var marker = createMarker(point,"A & D Motorfactors.","<strong>A & D Motorfactors.</strong><br>Cromwellsfort Rd,<br>Dublin 12.<br>Tel; 01-460-1808.<br>Contact; Aiden/Ed.") 
     map.addOverlay(marker); 

     var point2 = new GLatLng(53.440508,-6.238905); 
     var marker2 = createMarker(point2,"test","<strong>A & D Motorfactors.</strong><br>Cromwellsfort Rd,<br>Dublin 12.<br>Tel; 01-460-1808.<br>Contact; Aiden/Ed.") 
     map.addOverlay(marker); 

     // put the assembled side_bar_html contents into the side_bar div 
     document.getElementById("side_bar").innerHTML = side_bar_html; 
    } 
    else { 
     alert("Sorry, the Google Maps API is not compatible with this browser"); 
    } 
    //]]> 
    </script> 

現在有問題。如何擴展它，並使不同的元素添加不同的標記？

Answer 1

我假設您要做的是區分您的標記集，但使用您的常見myclick處理程序代碼來顯示標記的相應信息窗口。

有幾種方法可以做到這一點。看起來您希望每個城市都有獨立的標記陣列，因爲您已在您的myclick處理程序中引用了一個gmarkers2陣列。這不會起作用，因爲您使用相同的處理函數創建標記，並且索引不會對這兩個數組起作用。

所以，你要麼需要一個createMarker功能，增加了新的標記相應的標記陣列，並指定使用該陣列，也可以使用相同的標誌器陣列，只是改變createMarker更新單獨side_bar_html點擊處理程序變量來存儲引用url。

我已經砍掉了一個使用second approach的示例（基於您的源代碼）。請讓我知道，如果這不是你想要做的。

N.B.在我的示例中，我卡住了地圖下方的「側欄」。