MarkerManager and Sidebar

来源：互联网发布：考研政治题库软件编辑：程序博客网时间：2024/05/29 07:52

markermanager 的应用．

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Google Maps</title>
    <script src="http://maps.google.com/maps?file=api&v=2&
         key=ABQIAAAAclK0B2lXQwV5lPy1rLiTFBSN1aiKepvDswXjKa4j2DDWdYvOjh
         QMO1tywqS8ObgP5dtO70AyyArhzA" type="text/javascript"></script>
</head>
<body onunload="GUnload()">

    </table>
    <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 = [];
      var i = 0;

var lastlinkid;

      // A function to create the marker and set up the event window
      function createMarker(point,name,html) {
        var marker = new GMarker(point);
        var linkid = "link"+i;
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
          document.getElementById(linkid).style.background="#ffff00";
          lastlinkid=linkid;
        });
        // save the info we need to use later for the side_bar
        gmarkers[i] = marker;
        // add a line to the side_bar html
        side_bar_html += '<div id="'+linkid+'"><a href="javascript:Linkclicked(' + i + ')">'
           + name + '</a><br></div>';
        i++;
        return marker;
      }

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

      // create the map
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng( 43.907787,-79.359741), 8);
      var mm = new GMarkerManager(map);

      // add the points
      var point = new GLatLng(43.65654,-79.90138);
      var marker = createMarker(point,"This place","This is The First Info")

var point = new GLatLng(43.91892,-78.89231);
var marker = createMarker(point,"That place","This is The Second Info")

      var point = new GLatLng(43.82589,-78.89231);
      var marker = createMarker(point,"The other place","This is The Third Info")

      GEvent.addListener(map,"infowindowclose", function() {
        document.getElementById(lastlinkid).style.background="#ffffff";
      });

        mm.addMarkers(gmarkers,0,17);
        mm.refresh();

      // 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>
</body>

</html>