百度地图的实现标注以及标注提示框

1、精选文档 $(function () /最终加载的js代码 findDimensions(); map = new BMap.Map("container"); / 创建地图实例 / var point = new BMap.Point(116.404, 39.915); / 创建点坐标 map.centerAndZoom("北京"); map.enableScrollWheelZoom(); / 开启鼠标滚轮缩放 map.enableKeyboard(); / 开启键盘把握 map.enableContinuousZoom(); / 开启连续缩放效果

2、map.enableInertialDragging(); / 开启惯性拖拽效果 / setTimeout("GetNewDrivingStatus()", 1000); var dates = $("#begin,#end").datepicker(defaultDate: "+1w",changeMonth: true,numberOfMonths: 1, dateFormat:"yy-mm-dd",onSelect: function( selectedDate ) var option = this.id

3、= "begin" ? "minDate" : "maxDate",instance = $( this ).data( "datepicker" ),date = $.datepicker.parseDate(instance.settings.dateFormat |$.datepicker._defaults.dateFormat,selectedDate, instance.settings );dates.not( this ).datepicker( "option", option

4、, date );); $(".a2").click(function () var htmlStr = $(this).prev();/.html();/猎取黑名单车牌的信息 var newobj= htmlStr.prev().val(); newobj= newobj.replace(new RegExp('(|)"/Date(-?0-9+)/"', 'g'), "$1new Date($2)"); var obj = eval("("+newobj+")"

5、); /调用MapInfo把握器中的Search方法,obj是参数, $.get("Url.Content("/Detector/FaceDetection")",obj,function(list) var points = new Array();/定义一个坐标对象集合 /遍历 以 ;分割的json对象集合 并处理敏感字符以免出误区 $.each(list.split(""),function(index,item)if(item="") return; item = item.replace(new RegE

6、xp('(|)"/Date(-?0-9+)/"', 'g'), "$1new Date($2)"); var obj = eval(item); points.push(new BMap.Point(obj.DeviceLatitude,obj.DeviceLongitude);/坐标对象集合中添加坐标对象 ); map.setViewport(points);/依据坐标设置地图视野 var polyline = new BMap.Polyline(points,strokeColor:"blue",

7、strokeWeight:6, strokeOpacity:0.5); map.addOverlay(polyline); $.each(list.split(""),function(index,item) if(item="") return; AddOne(item); ); ); ); $("#search").click(function () var obj =shortLicense:$("#shortlicense").val(),License:$("#license").va

8、l(),beginDate:encodeURI($("#begin").val(),endDate:encodeURI($("#end").val() ; if(obj.shortLicense.toString()=""&&obj.License.toString()="") alert("请选择要查看的黑名单车牌！"); return false; if(!obj.beginDate|obj.beginDate.toString()="") alert(&

9、quot;请选择起始日期！"); return false; if(!obj.endDate|obj.endDate.toString()="") alert("请选择结束日期！"); return false; /$("#eventList").empty(); /调用MapInfo把握器中的Search方法,obj是参数, $.get("Url.Content("/MapInfo/Search")",obj,function(list) var points = new Array

10、();/定义一个坐标对象集合 /遍历 以 ;分割的json对象集合 并处理敏感字符以免出误区 $.each(list.split(""),function(index,item)if(item="") return; item = item.replace(new RegExp('(|)"/Date(-?0-9+)/"', 'g'), "$1new Date($2)"); var obj = eval(item); points.push(new BMap.Point(obj.Dev

11、iceLatitude,obj.DeviceLongitude);/坐标对象集合中添加坐标对象 ); map.setViewport(points);/依据坐标设置地图视野 var polyline = new BMap.Polyline(points,strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5); map.addOverlay(polyline); $.each(list.split(""),function(index,item) if(item="") return

12、; AddOne(item); ); ); ); ); function AddOne(item)/在地图创建标记 item = item.replace(new RegExp('(|)"/Date(-?0-9+)/"', 'g'), "$1new Date($2)"); var obj = eval(item); /增加列表记录 / $("#eventList").prepend("<li statusvalue='"+item+"' ><

13、;a class="a3" href="#">"+obj.GPSTime.toLocaleString()+" "+GetEventString(obj.Status)+"</a></li>"); /增加新标注 var marker = new BMap.Marker(new BMap.Point(obj.DeviceLatitude,obj.DeviceLongitude);/(new BMap.Point(obj.Lng,obj.Lat);/创建一个图像标注实例 map.

14、addOverlay(marker); marker.addEventListener("click",function() marker.openInfoWindow(GetInfoWindow(obj); ); ; function GetInfoWindow(obj)/ var sContent = "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>车牌号码:"+(obj.ShortLicense=""?obj.License.toString():obj.S

15、hortLicense.toString()+"</h4>" + /"<img style='float:right;margin:4px' src='Url.Content("/Tracking/GetFrame/")"+obj.ID +"' width='139' height='104' title='大事截帧图'/>" + "<p style='margin:0;line-height:1.2;font-size:13px;'>"+ "车牌类型："+obj.LicenseType+"<br />"+ "车牌颜色："+obj.LicenseColor+"<br />"+ "行驶方向："+obj.Direction+ "<br /