位置数据表 geotable DEMO下载
我们再创建一个 leverTerminal表
添加 手机价格，手机型号，手机唯一码，用户id
新建一个html页面，引入最新的jquery包，1.8.2以上
百度返回的结果是jsonp格式的，所以接下来，我们来写第一个demo，获得你的LBS云的情况
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>百度地图 第一课</title> <script type="text/javascript" src="js/jquery.min.js"></script> <script> var baseUrl="http://api.map.baidu.com/geodata/v3/"; var ak="ryr5CP4GX72dV2GKPfX2rIxe"; $(function (){ GetList(); }); function GetList(){ $.ajax({ type: "get", url: baseUrl+"geotable/list?ak="+ak, dataType: "jsonp", success: function (data) { /* eval("data=" + data);*/ var text="执行状态:"+data.status+"<br/>"; text+="结果："+data.message+"<br/>"; var tables=data.geotables; text+="您在LBS云建立了"+data.size+"张表<br/>"; $("#showContainer").html(text); var tablesHTML="<tr><td>id</td><td>表名</td><td>数据类型</td><td>修改时间</td><td>创建时间</td><td>是否发布到检索</td></tr>"; for(var i=0;i<tables.length;i++){ var leixing=tables[i].geotype; if(leixing==1){ leixing="点"; }else if(leixing==2){ leixing="线"; }else{ leixing="面"; } tablesHTML+="<tr><td>"+tables[i].id+"</td><td>"+tables[i].name+"</td><td>"+leixing+"</td><td>"+tables[i].create_time+"</td><td>"+tables[i].modify_time+"</td><td>"+(tables[i].is_published==1?"是":"否")+"</td></tr>"; } $("#tablesDetail").html(tablesHTML); } }); } //返回结果 /*{ "status": 0, "geotables": [ { "id": 59897, "name": "leverTerminal", "geotype": 1, "create_time": "2014-04-11 16:37:38", "modify_time": "2014-04-11 16:37:38", "is_published": 1 }, { "id": 59876, "name": "leveruser", "geotype": 1, "create_time": "2014-04-11 13:56:34", "modify_time": "2014-04-11 13:56:34", "is_published": 1 } ], "size": 2, "message": "成功" }*/ </script> </head> <body> <h1>第一课：geotable</h1> <div id="showContainer"> </div> <br/> <table width="100%" border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse;" id="tablesDetail"> </table> </body> </html>
结果图：
2.接下来，我们在本地页面创建表（post）
function CreateTable(){
var getURL=baseUrl+"geotable/create";
$.ajax({
type: "post",
data:{"geotype":1,"ak":ak,"is_published":parseInt($("#is_published").val()),"name":$("#name").val()},
url: getURL,
dataType: "json",
success: function (data) {
var text="执行状态:"+data.status+";";
text+="结果："+data.message+";";
text+="刚刚您在LBS云上新建的表ID是"+data.id;
$("#createContainer").html(text);
}
});
}
<h1>第一课：geotable</h1> <div id="showContainer"> </div> <br/> <div id="createContainer"> </div> 表名称：<input id="name" name="name" type="text" maxlength="45" />是否发布到索引<select id="is_published" name="is_published"><option value="0" selected="selected">否</option><option value="1">是</option></select> <input type="button" value="创建表" style="width:50px;height:20px" onclick="CreateTable()"/> <br/> <table width="100%" border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse;" id="tablesDetail"> </table>
效果图：
创建完了，自己刷新一下，我的好像不能创建完，然后调用获取列表的方法，有点错误，但是可以创建成功.
3.我们来获得单个表的信息（get）
function GetTable(){ var getURL=baseUrl+"geotable/detail?ak="+ak+"&id="+$("#tableId").val(); $.ajax({ type: "get", url: getURL, dataType: "jsonp", success: function (data) { data=data.geotable; var tableHTML="<tr><td>id</td><td>表名</td><td>数据类型</td><td>修改时间</td><td>创建时间</td><td>是否发布到检索</td></tr>"; var leixing=data.geotype; if(leixing==1){ leixing="点"; }else if(leixing==2){ leixing="线"; }else{ leixing="面"; } tableHTML+="<tr><td>"+data.id+"</td><td>"+data.name+"</td><td>"+leixing+"</td><td>"+data.create_time+"</td><td>"+data.modify_time+"</td><td>"+(data.is_published==1?"是":"否")+"</td></tr>"; $("#tableDetail").html(tableHTML); } }); }
页面代码如下：
<body> <h1>第一课：geotable</h1> <div id="showContainer"> </div> <br/> <div id="createContainer"> </div> 表名称：<input id="name" name="name" type="text" maxlength="45" />是否发布到索引<select id="is_published" name="is_published"><option value="0" selected="selected">否</option><option value="1">是</option></select> <input type="button" value="创建表" style="width:50px;height:20px" onclick="CreateTable()"/> <br/> <table width="100%" border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse;" id="tablesDetail"> </table> 表ID：<input id="tableId" name="tableId" type="text" maxlength="10" /><input type="button" value="获取单个表" style="width:100px;height:40px" onclick="GetTable()"/> <table width="100%" border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse;" id="tableDetail"> </table> </body>
效果图：
4.我们来删除表（post）
参数：id和ak
function DelTable(){ var getURL=baseUrl+"geotable/delete"; $.ajax({ type: "post", data:{"id":$("#deleteTableId").val(),"ak":ak}, url: getURL, async: true, dataType: "json", success: function (data) { if(data.status==0){ alert("删除成功!"); GetList(); }else{ alert("状态码："+data.status+";信息："+data.message); } }, error: function(e) { alert(e); } }); }
页面代码：
要删除的表ID：<input id="deleteTableId" name="deleteTableId" type="text" maxlength="10" /><input type="button" value="删除表" style="width:100px;height:40px" onclick="DelTable()"/>(备注：//注：当geotable里面没有有效数据时，才能删掉
我这里的post有点问题，好像是跨域的问题，但是数据能够删掉，跟上面创建一样
5.Update (post)
http://api.map.baidu.com/geodata/v3/geotable/update // POST请求
参数： id，is_published，name，ak
返回的结果跟删除处理的结果一样，0代表成功
关于表的操作，就到这里，你可以认为所有表的记录都是存在geotable里面的，我们在geotable里面可以看到你的ak下的所有表的信息。
好了，先写到这里，祝你成功！我要看看那个post怎么回事，有知道的可以告诉我一下吗