最近从谷歌地图转移到百度地图，关于其中操作代码备记下，其中包括关于MarkerManager使用，代码基于API 2.0：

var allMarkers = [];var map = null;var mgr = null;var infoWindow;/*baidumap初始化*xlat,ylng 经纬度*zoom 缩放级别*gdiv 承载div*/function setupMap(xlat, ylng, zoom, gdiv) {    map = new BMap.Map(gdiv);    var point = new BMap.Point(ylng, xlat);    map.centerAndZoom(point, zoom);    map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件    map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件    map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件    map.enableScrollWheelZoom();                            //启用滚轮放大缩小}/*创建mark标记*/function setupMarker(item) {    var point = new BMap.Point(item.YLong, item.XLat);    var icon = new BMap.Icon(item.Ico, new BMap.Size(32, 32));    var marker = new BMap.Marker(point);    marker.setIcon(icon);    marker.disableDragging();    marker.setTitle(item.Title);    marker.metadata = http://www.mamicode.com/{ guid: item.Guid, code: item.Code, lampcount: item.LampCount,"kwrd">return marker;}/*创建集群Mark*itms json对象*minzoom 最小缩放级别 MarkerManager使用*maxzoom 最大缩放级别 MarkerManager使用*/function getMarkers(itms, minzoom, maxzoom) {    var batch = [];    var jsitms = eval(itms);    $.each(jsitms, function(index, value) {        var tmpMark = setupMarker(value);        batch.push(tmpMark);        allMarkers.push(tmpMark);    });    if (!mgr)        mgr = new BMapLib.MarkerManager(map, {            borderPadding: 200,            maxZoom: 18,            trackMarkers: true        });    mgr.addMarkers(batch, minzoom, maxzoom);    map.addEventListener("zoomend", function() {        mgr.show();    });    map.addEventListener("dragend", function() {        mgr.show();    });}/**说明：为Marker标记当点击的时候，弹出提示框*marker：需要提示的Marker*infoType: 类型*/function bindInfoWindows(marker, infoType) {    if (!infoWindow)        infoWindow = new BMap.InfoWindow();    marker.addEventListener("click", function() {        infoWindow.setContent(setupMarkerContens(marker, infoType, false));        this.openInfoWindow(infoWindow);    });}/*为mark标记生成infowindows的内容*infoType：marker标记类型*isClick : 是否点击*/function setupMarkerContens(marker, infoType, isClick) {    if (marker.metadata.type == "cab" && isClick == false) {        return " <table><tr><td align=center style=‘font-family:微软雅黑;font-size: medium‘>灯箱【<span>" + marker.getTitle() + "</span>】运行信息</td> </tr>" +       " <tr>" +            "<td valign=top>" +                "<table width=100%>" +                    "<tbody>" +                        "<tr>" +                            "<td >灯箱编号：</td>" +                            "<td>" + marker.metadata.code + "</td>" +                            "<td >灯箱名称：</td>" +                            "<td>" + marker.getTitle() + " </td>" +                        "</tr>" +                        "<tr>" +                            "<td >所属区域：</td>" +                            "<td>" + marker.metadata.roadname + " </td>" +                            "<td >所辖管区：</td>" +                            "<td>" + marker.metadata.areaname + "</td>" +                        "</tr>" +                        "<tr>" +                            "<td >经度：</td>" +                            "<td>" + marker.metadata.xlat + "</td>" +                            "<td>纬度：</td>" +                            "<td>" + marker.metadata.ylong + "</td>" +                        "</tr>" +                        "<tr>" +                            "<td >控制灯杆：</td>" +                            "<td>" + marker.metadata.polecount + "</td>" +                            "<td >控制灯盏：</td>" +                            "<td> " + marker.metadata.lampcount + "</td>" +                        "</tr>" +                        "<tr>" +                            "<td >故障(不亮灯)：</td>" +                            "<td>" + window.external.GetLampLight(marker.metadata.guid) + "</td>" +                            "<td ></td>" +                            "<td></td>" +                        "</tr>" +                    "</tbody>" +                "</table>" +            "</td>" +        "</tr>" +        "<tr>" +            "<td>" +                "<img src=http://www.mamicode.com/‘Images/Illustration.png‘ id=bottomPic>" +        "</tr>" +    "</table>";    }    if (marker.metadata.type == "pole" && isClick == false) {        return "<table>" +        "<tr>" +            "<td align=center style=‘font-family:微软雅黑;font-size: medium‘>灯杆【<span id=poleName>" + marker.metadata.code + "</span>                                】运行信息                            </td>" +        "</tr>" +        "<tr>" +            "<td valign=top>" +        "<table >" +                   " <tbody>" +                        "<tr>" +                            "<td width=25%>灯杆编号：                                        </td>" +                            "<td><span id=poleCode>" + marker.metadata.code + "  </span></td>" +                            "<td  width=25%>灯杆型号：                                        </td>" +                            "<td><span id=poleType>道路一杆一灯型</span>                                        </td>" +                        "</tr>" +                        "<tr>" +                            "<td  width=25%>所属灯箱：                                        </td>" +                            "<td><span id=cabName>" + marker.metadata.cabname + "</span>                                        </td>" +                            "<td width=25%>所属区域：                                        </td>" +                            "<td><span id=areaName>" + marker.metadata.roadname + "</span>                                        </td>" +                        "</tr>" +                        "<tr>" +                            "<td  width=25%>经度：                                        </td>" +                            "<td><span id=xlat>" + marker.metadata.xlat + "</span>                                        </td>" +                            "<td  width=25%>纬度：                                        </td>" +                            "<td><span id=ylong>" + marker.metadata.ylong + "</span>                                        </td>" +                        "</tr>" +                        "<tr>" +                            "<td  width=25%>灯盏总数：                                        </td>" +                           " <td><span id=lampCount>" + marker.metadata.lampcount + "</span>                                        </td>" +                            "<td width=25%>&nbsp;</td>" +                            "<td>&nbsp;</td>" +                        "</tr>" +                    "</tbody>" +                "</table>" +            "</td>" +        "</tr>" +        "<tr>" +            "<td  align=center style=‘font-family:微软雅黑;font-size: medium‘>属下灯运行信息                            </td>" +        "</tr>" +        "<tr>" +            "<td align=center valign=top>" +                "<table id=lampInfoTbl height=50>" +                    "<tbody>" +        "<tr>" +                            "<td  align=center>类别 </td>" +                            "<td   align=center >名称                                        </td>" +                            "<td  align=center >额定功率 </td>" +                            "<td  align=center >当前状态</td>" +                            "<td  align=center >更新时间                                        </td>" +                        "</tr>" +                        "<tr>" +                            "<td  align=center>道路灯</td>" +                            "<td  align=center>" + marker.metadata.lampname + "</td>" +                            "<td  align=center>" + marker.metadata.lamppower + "</td>" +                            "<td  align=center>" + marker.metadata.lampstatus + "</td>" +                            "<td  align=center>" + marker.metadata.lampupdatetime + "</td>" +                        "</tr>" +                    "</tbody>" +                "</table>" +            "</td>" +        "</tr>" +        "<tr>" +            "<td  align=center>" +                "<img src=http://www.mamicode.com/‘Images/Illustration.png‘ id=bottomPic>" +            "</td>" +        "</tr>" +    "</table>";    }    if (infoType == "clcab" && isClick == true) {        return "<div  style=text-align:center>" + marker.getTitle() + "</div>";    }    if (infoType == "clpole" && isClick == true) {        return "<div  style=text-align:center><b>杆编号:" + marker.metadata.code + "</b><br>"        + "道路灯:" + marker.metadata.lampstatus + "</div>";    }}/*根据mark标记 id查找mark标记*/function findedMarker(guid) {    var marker;    $.each(allMarkers, function(index, value) {        if (value.metadata.guid == guid) {            marker = value;            return marker;        }    })    return marker;}/*树节点点击跳转到对应的mark标记*guid：marker标记id*infoType: marker类型*zoom :缩放级别*/function GoToNodeClick(guid, infoType, zoom) {    var marker = findedMarker(guid);    if (typeof (marker) != "undefined") {        var mapZoom = map.getZoom();        var zoomLevel = zoom > mapZoom ? zoom : mapZoom;        map.centerAndZoom(marker.getPosition(), zoomLevel);        if (!infoWindow)            infoWindow = new BMap.InfoWindow();        infoWindow.setContent(setupMarkerContens(marker, infoType, true));        marker.openInfoWindow(infoWindow);        bindInfoWindows(marker, 0);    }}function SetCenter(lat, lng, zoom) {    var point = new BMap.Point(lng, lat);    map.centerAndZoom(point, zoom);}function UpdateMarker(guid, icon) {    var marker = findedMarker(guid);    var icon = new BMap.Icon(icon, new BMap.Size(32, 32));    marker.setIcon(icon);}

<style type="text/css">.csharpcode, .csharpcode pre{ font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/}.csharpcode pre { margin: 0em; }.csharpcode .rem { color: #008000; }.csharpcode .kwrd { color: #0000ff; }.csharpcode .str { color: #006080; }.csharpcode .op { color: #0000c0; }.csharpcode .preproc { color: #cc6633; }.csharpcode .asp { background-color: #ffff00; }.csharpcode .html { color: #800000; }.csharpcode .attr { color: #ff0000; }.csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em;}.csharpcode .lnum { color: #606060; }</style>

其中页面代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head>    <title></title>    <script type="text/javascript" src=http://www.mamicode.com/http://api.map.baidu.com/api?v=2.0&ak=你的key></script>    <script type="text/javascript" src=http://www.mamicode.com/"jquery-1.4.1.js"></script>    <script type="text/javascript" src=http://www.mamicode.com/"MarkerManager_min.js"></script>    <script type="text/javascript" src=http://www.mamicode.com/"BMapOperate.js"></script>    <style type="text/css">        body, html, #map        {            width: 100%;            height: 100%;            overflow: hidden;            margin: 0;        }    </style></head><body>    <div id="map">    </div></body></html>