日期:2014-05-16 浏览次数:20322 次
1.JQuery中的简单的使用ajax。
$.ajax({ //一个Ajax过程 type: "post", //以post方式与后台沟通 url : "get_location_by_id", //与此页面沟通 data: 'device_id=' + this.nextSibling.id, beforeSend: function(){ var win = $.messager.progress({ title:'Please waiting', msg:'Loading data...' }); }, complete: function(){ //AJAX请求完成时隐藏loading提示 $(document).ready(function(){$.messager.progress('close');}); }, success : function(msg) { //更新数据 if (msg != "") { var total = eval(msg); if(total.length == 0){ change_map_default(); $.messager.show({ title:'友情提示:', msg:'不好意思,你的这个设备还没有地理位置的记录。', timeout:5000, showType:'slide' }); } for ( var index = 0; index < total.length; index++) { if (index == 0) { change_map(total[index].longitude, total[index].latitude); } else { addPolyline(total[index - 1].longitude, total[index - 1].latitude, total[index].longitude, total[index].latitude); } var myCompOverlay = new ComplexCustomOverlay( new BMap.Point(total[index].longitude, total[index].latitude), total[index].time, "地点为:(" + total[index].longitude + "," + total[index].latitude + ")"); mp.addOverlay(myCompOverlay); add_marker(total[index].longitude, total[index].latitude); } } } });
2.各种浏览器对childNodes的解析不同,要特别注意。
3.百度地图api使用,在自己网页中添加百度地图。
function change_map(longitude, latitude) { var mp = new BMap.Map("container"); var point = new BMap.Point(longitude, latitude); mp.centerAndZoom(point, 15); mp.enableScrollWheelZoom(); mp.enableKeyboard(); mp.enableContinuousZoom(); mp.enableInertialDragging(); mp.addControl(new BMap.NavigationControl()); mp.addControl(new BMap.ScaleControl()); mp.addControl(new BMap.OverviewMapControl()); window.mp = mp; }
?4.百度地图添加折线。
//向地图中添加线函数 function addPolyline(from_longitude, from_latitude , to_longitude, to_latitude) { var line = new BMap.Polyline( [ new BMap.Point(from_longitude, from_latitude), new BMap.Point(to_longitude, to_latitude) ], { strokeStyle : "dashed", strokeWeight : 2, strokeColor : "blue", strokeOpacity : 0.6 }); mp.addOverlay(line); }
?5.添加标注信息。
ComplexCustomOverlay.prototype = new BMap.Overlay(); ComplexCustomOverlay.prototype.initialize = function(map) { this._map = map; var div = this._div = document.createElement("div"); div.style.position = "absolute"; div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat); div.style.backgroundColor = "#EE5D5B"; div.style.border = "1px solid #BC3B3A"; div.style.color = "white"; div.style.height = "18px"; div.style.padding = "2px"; div.style.lineHeight = "18px"; div.style.whiteSpace = "nowrap"; div.style.MozUserSelect = "none"; div.style.fontSize = "12px" var span = this._span = document.createElement("span"); div.appendChild(span); span.appendChild(document.createTextNode(this._text)); var that = this; var arrow = this._arrow = document.createElement("div"); arrow.style.background = "url(http://map.baidu.com/fwmap/upload/r/map/fwmap/static/house/images/label.png) no-repeat"; arrow.style.position = "absolute"; arrow.style.width = "11px"; arrow.style.height = "10px"; arrow.style.top = "22px"; arrow.style.left = "10px"; arrow.style.overflow = "hidden"; div.appendChild(arrow); div.onmouseover = function() { this.style.backgroundColor = "#6BADCA"; this.style.borderColor = "#0000ff"; this.getElementsByTagName("span")[0].innerHTML = that._overText; arrow.style.backgroundPosition = "0px -20px"; }; div.onmouseout = function() { this.style.backgroundColor = "#EE5D5B"; this.style.borderColor = "#BC3B3A"; this.getElementsByTagName("span")[0].innerHTML = that._text; arrow.style.