[Baidu Map]使用小计
最近从谷歌地图转移到百度地图，关于其中操作代码备记下，其中包括关于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 = { 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; } /* 创建集群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='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%>所属区域： </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%> </td>" + "<td> </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='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); }
其中页面代码如下：
<!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>希望有所帮助！