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";
};
分享到:
相关推荐
本篇文章主要介绍了jQuery Ajax前后端使用JSON进行交互示例,实现前端通过jQuery Ajax传输json到后端,后端接收json,对json进行处理,后端返回一个json给前端,有兴趣的可以了解一下。
SpringMVC利用Ajax,JQuery交互Json
Servlet利用Ajax,JQuery交互Json
jquery与java交互通过json传递数据的经典实例,必备,不可多得
在.NET中使用AJAX技术来做服务器端和客户端交互,用JSON做为在异步应用程序中发送和接收信息的数据格式。
使用Struts2和jQuery EasyUI实现简单CRUD系统,从零开始,从基础的ajax与Struts2的使用json格式进行交互开始。
Highcharts AJAX JSON JQuery 实现动态数据交互显示图表 柱形图 后台代码大家根据自己的情况写并转JSON格式。在前台修改url,即可出柱形图
Struct2利用Ajax,JQuery交互Json
此代码为beego框架实现的jQuery ajax省市二级联动,前后端交互为json数据。 此代码为beego框架实现的jQuery ajax省市二级联动,前后端交互为json数据。 此代码为beego框架实现的jQuery ajax省市二级联动,前后端交互...
Ajax请求接口,Django框架下从该接口接收Ajax发送的json数据,同时将新的json数据返回给Ajax,Ajax收到后在js进行处理,然后和页面内容交互。整个数据前后端交互全部采用json格式。代码高度封装,只需要更改json内容...
1.aspnet mvc 2.0服务器端接收jQuery Ajax 字符串参数 (GET、POST方式),并返回字符串信息 2.服务器端 接收客户端json数据,并返回json数据
ajax 的 php 实现。 利用jQuery 库 JSON 的数据格式进行数据交互。
1.3.1提供的API中,最完整的方法是jQuery.ajax(options),同时她也是jQuery底层AJAX实现,简单容易的高层实现大家可以看下API中提供的jQuery.get(options)、jQuery.post(options),以及配合JSON做为传输数据格式的方法...
Highcharts AJAX后台JAVA JSON 曲线报表完美可运行例子 不包含官方JS 自己下载
项目概述:本项目是基于Python中流行的Django框架,结合jQuery AJAX技术实现的前后端交互应用。通过使用POST和GET请求,实现了数据的异步处理。项目主要采用Python语言编写,同时包含了JavaScript、HTML、Shell、CSS...
很多开发人员在使用jquery在前端和服务器端进行数据交互,所以很容易会认为在前端...1、通过jQuery的ajax进行跨域,这其实是采用的jsonp的方式来实现的。 jsonp是英文json with padding的缩写。它允许在服务器端生成
可以直接下下来使用,用jquery实现了图片复制,拖拽,并且ajax实现与后台struts2的交互,用json相互传值。简单明了
本套Java教程涵盖Ajax的实现原理,XMLHttpRequest实现Ajax,回调函数,Ajax数据交换格式(HTML、XML、JSON),Ajax发送GET和POST请求,异步编程模型和同步编程模型,解决Ajax的GET请求缓存问题,使用Ajax验证用户名...