[BaiduMap]使用小计

最近从谷歌地图转移到百度地图，关于其中操作代码备记下，其中包括关于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 =newBMap.Map(gdiv);

var point =newBMap.Point(ylng, xlat);

map.centerAndZoom(point, zoom);

map.addControl(newBMap.NavigationControl());// 添加平移缩放控件map.addControl(newBMap.ScaleControl());// 添加比例尺控件map.addControl(newBMap.OverviewMapControl());//添加缩略地图控件map.enableScrollWheelZoom();//启用滚轮放大缩小}/*创建mark标记*/function setupMarker(item) {

var point =newBMap.Point(item.YLong, item.XLat);

var icon =newBMap.Icon(item.Ico,newBMap.Size(32, 32));

var marker =newBMap.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);returnmarker;

}/*创建集群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 =newBMapLib.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 =newBMap.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%>&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='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;returnmarker;

}

})returnmarker;

}/*树节点点击跳转到对应的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 =newBMap.InfoWindow();

infoWindow.setContent(setupMarkerContens(marker, infoType,true));

marker.openInfoWindow(infoWindow);

bindInfoWindows(marker, 0);

}

}

function SetCenter(lat, lng, zoom) {

var point =newBMap.Point(lng, lat);

map.centerAndZoom(point, zoom);

}

function UpdateMarker(guid, icon) {

var marker = findedMarker(guid);

var icon =newBMap.Icon(icon,newBMap.Size(32, 32));

marker.setIcon(icon);

}

.csharpcode, .csharpcodePRe

{

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; }

其中页面代码如下：

<!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>

.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; }希望有所帮助！