淘宝开放平台 API 小试牛刀

 

本应用是基于淘宝开放平台（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 及 secret
	protected 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 json
		TaobaoClient 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 onload="initialize()"> 

<!-- 显示地图的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的兴趣，更希望对于刚要着手开发淘宝应用的同志 能够有点帮助。

错误之处，还望不吝赐教。

 

示例参考：

 

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