淘宝开放平台 API 小试牛刀
本应用是基于淘宝开放平台（TOP）API以及Google Map JavaScript API开发的一个自用型淘宝买家应用。
实现的功能：
Web构架，展示淘宝用户作为买家，所买到的商品（在地图上展示：商品的收获地址以及商品图片）。
如图：
http://dl.iteye.com/upload/attachment/468284/97420dd3-b841-3354-9585-e13f62945a8a.png
实现过程：
在浏览器上显示地图 -->
调用TOP API，查询用户的交易记录 -->
返回XML数据 -->
解析XML，得到收货地址、商品图片地址 -->
根据地址获得对应的经纬度-->
调用Google Map API 在地图上弹出消息窗口和图片 --> 完毕。
主要技术：
Java ， TOP API，Google Map API， DWR
源码分析：
APITest.java
public class APITest {protected static String testUrl = "http://gw.api.tbsandbox.com/router/rest";// 沙箱环境调用地址protected static String Url = "http://gw.api.taobao.com/router/rest";//正式环境调用地址/** * 说明：沙箱环境是模拟淘宝网上交易的，开发人员可以在此先测试自己的应用，然后才能申请到正式环境测试 */// 申请的测试账号 appkey 及 secretprotected static String myappkey = " ";protected static String mysecret = " ";protected static String sandboxSecret = " "; // 沙箱环境测试下的 AppSecret/** * 说明：开发者申请开发应用的时候，系统给你的appkey与secret是和你的应用唯一对应的，同时， * 它会绑定你的淘宝账户（现实环境的账户以及申请的沙箱账户），当需要调用到用户隐私数据的时候， * 调用的即是所关联的账户的数据。 * 例如本例调用到的monkey823用户即是我在沙箱申请的账户，里面的交易数据是在mini淘宝模拟的。 *//** * 测试 TradesBoughtGet ** 调用了top SDK **/public static String testTradeGet() throws ApiException, ParseException {// 可以在client 构造函数里 设置返回的数据格式 xml or jsonTaobaoClient client = new DefaultTaobaoClient(testUrl, myappkey,sandboxSecret, Constants.FORMAT_XML);TradesBoughtGetRequest req = new TradesBoughtGetRequest();req.setFields("seller_nick,buyer_nick,title,type,create,orders.pic_path,orders.price,orders.num,receiver_city");Date dateTime = SimpleDateFormat.getDateTimeInstance().parse("2011-03-09 05:15:27");Date dateTime2 = SimpleDateFormat.getDateTimeInstance().parse("2011-04-09 23:15:27");req.setStartCreated(dateTime);req.setEndCreated(dateTime2);TradesBoughtGetResponse response = client.execute(req);System.out.println("------>>" + response.getBody());return response.getBody();}
执行这个测试时，返回的XML数据（为方便查看，以树结构形式展示）：
http://dl.iteye.com/upload/attachment/468282/8d0cd9ff-69b8-3f82-8abe-d6ef64db424b.png
test.jsp
<!--引入dwr的js脚本--><script src="dwr/interface/APITest.js"></script> <script src="dwr/engine.js" /></script><!--下面是谷歌地图API的调用 --><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=cn"></script> <script type="text/javascript"> function initialize() {//初始化地图界面 var myLatlng = new google.maps.LatLng(37.230,106.083); //中国地图的坐标中心 var myOptions = { zoom: 4, //缩放级别 center: myLatlng,//设定中心坐标 mapTypeId: google.maps.MapTypeId.ROADMAP//地图样式：卫星，地图 }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //获取后台数据, 并实时显示在地图上。APITest.testTradeGet(callback); //执行top API 生成xml数据, 并绑定 回调方法处理//回调函数 function callback(response){//response为执行 APITest.testTradeGet方法返回的值(xml格式的String)var xmlDoc = loadXMLStr(response); //获得图片路径数组 var picturePaths = xmlDoc.getElementsByTagName("pic_path"); //获得所在城市数组 var citys = xmlDoc.getElementsByTagName("receiver_city"); if(picturePaths!=null){ //如果返回的数据不为空 //根据图片地址 生成自定义图片文件 var image = new google.maps.MarkerImage( picturePaths.text, new google.maps.Size(80, 60),//缩放后的大小 new google.maps.Point(0, 0),//原始点 new google.maps.Point(40, 0),//锚点 new google.maps.Size(800, 600) //图片原始大小（缩放图片时必须要填写） ); //缩放了大小的图片 var address = citys.text; //var address = "长沙"; codeAddress(address); //解析地址， 并往地图上添加图片 } //解析地址的函数 function codeAddress(address) { var ll; var geocoder = new google.maps.Geocoder(); if (geocoder) { geocoder.geocode( { 'address': address},getLL); } var re = function getLL(results, status) { if (status == google.maps.GeocoderStatus.OK) { ll = results.geometry.location; //在所解析的地址处， 添加一个标记（用自定义图片） var marker = new google.maps.Marker({ map: map, position: ll,//results.geometry.location, icon: image //自定义的icon }); //信息窗口选项 var infoOption = { content: address, position: ll//results.geometry.location }; //添加 信息窗口 var info =new google.maps.InfoWindow(infoOption); info.open(map); //显示标注信息窗口 } else { alert("Geocode was not successful for the following reason: " + status); } }; }}//加载 xml 格式的字符串 function loadXMLStr(text){ //text为xml格式的String var xmlDoc; try //Internet Explorer { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async="false"; xmlDoc.loadXML(text); } catch(e) { try //Firefox, Mozilla, Opera, etc. { parser=new DOMParser(); xmlDoc=parser.parseFromString(text,"text/xml"); } catch(e) {alert(e.message);} } return xmlDoc;}} </script> </head> <body > <!-- 显示地图的div --><div id="map_canvas" style="width: 1000px; height: 800px; align:center;"></div> </body></html>
这里省略了web.xml以及dwr.xml两个文件。
当然，dwr的包、 TOP的SDK是不能忘记的。O(∩_∩)O~
好了，希望本文能引起你对于TOP的兴趣，更希望对于刚要着手开发淘宝应用的同志 能够有点帮助。
错误之处，还望不吝赐教。
示例参考：
<div class="Section0">Google Map API 调用示例：
参考博客 http://www.cnblogs.com/Music/archive/2010/08/06/GoogleMap-Demo13.html
或者官方文档 http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/reference.html
TOP API调用示例（应用SDK）：
http://open.taobao.com/dev/index.php/Java%E8%B0%83%E7%94%A8%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81%EF%BC%88%E4%BD%BF%E7%94%A8SDK%EF%BC%89
页:
[1]