淘宝开放平台 API 小试牛刀

蛋呢823

 
本应用是基于淘宝开放平台（TOP）API以及Google Map JavaScript  API开发的一个自用型淘宝买家应用。
实现的功能：

Web构架，展示淘宝用户作为买家，所买到的商品（在地图上展示：商品的收获地址以及商品图片）。
如图：


 
实现过程：

在浏览器上显示地图 --> 
调用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数据（为方便查看，以树结构形式展示）：


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[0]!=null){ //如果返回的数据不为空           //根据图片地址   生成自定义图片文件       var image = new google.maps.MarkerImage(           picturePaths[0].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[0].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[0].geometry.location;         //在所解析的地址处， 添加一个标记（用自定义图片）             var marker = new google.maps.Marker({                   map: map,                    position: ll,//results[0].geometry.location,                   icon: image       //自定义的icon             });             //信息窗口选项               var infoOption = {             content: address,             position: ll//results[0].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