最近從谷歌地圖轉(zhuǎn)移到百度地圖，關(guān)于其中操作代碼備記下，其中包括關(guān)于MarkerManager使用，代碼基于API 2.0：

var allMarkers = [];var map = null;var mgr = null;var infoWindow;/*baidumap初始化*xlat,ylng 經(jīng)緯度*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();                            //啟用滾輪放大縮小}/*創(chuàng)建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 = { guid: item.Guid, code: item.Code, lampcount: item.LampCount,        polecount: item.PoleCount, xlat: item.XLat, ylong: item.YLong, type: item.Type,        lampname: item.LampName, lamppower: item.LampPower, lampupdatetime: item.LampUpdateTime,        lampstatus: item.LampStatus, cabname: item.CabName, areaname: item.AreaName, roadname: item.RoadName    };    bindInfoWindows(marker, marker.metadata.type);    map.addOverlay(marker);    return marker;}/*創(chuàng)建集群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的內(nèi)容*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 >所屬區(qū)域：</td>" +                            "<td>" + marker.metadata.roadname + " </td>" +                            "<td >所轄管區(qū)：</td>" +                            "<td>" + marker.metadata.areaname + "</td>" +                        "</tr>" +                        "<tr>" +                            "<td >經(jīng)度：</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='Images/Illustration.png' id=bottomPic></td>" +        "</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%>所屬區(qū)域：                                        </td>" +                            "<td><span id=areaName>" + marker.metadata.roadname + "</span>                                        </td>" +                        "</tr>" +                        "<tr>" +                            "<td  width=25%>經(jīng)度：                                        </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%>燈盞總數(shù)：                                        </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 >當前狀態(tài)</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='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>";    }}/*根據(jù)mark標記 id查找mark標記*/function findedMarker(guid) {    var marker;    $.each(allMarkers, function(index, value) {        if (value.metadata.guid == guid) {            marker = value;            return marker;        }    })    return marker;}/*樹節(jié)點點擊跳轉(zhuǎn)到對應(yīng)的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);}

其中頁面代碼如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head>    <title></title>    <script type="text/javascript" src=http://api.map.baidu.com/api?v=2.0&ak=你的key></script>    <script type="text/Javascript" src="jquery-1.4.1.js"></script>    <script type="text/javascript" src="MarkerManager_min.js"></script>    <script type="text/javascript" src="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>