谷歌地图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.在我的示例中，我卡住了地图下方的“侧栏”。