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.backgroundPosition = "0px 0px";};mp.getPanes().labelPane.appendChild(div);return div;
};
ComplexCustomOverlay.prototype.draw = function() {var map = this._map;var pixel = map.pointToOverlayPixel(this._point);this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";this._div.style.top = pixel.y - 30 + "px";
};