日期:2014-05-16 浏览次数:20389 次
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.