javascript - 谷歌地图 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 的示例(基于您的来源) .如果这不是您想要做的，请告诉我。

注意在我的示例中，我将“边栏”固定在 map 下方。