淘宝开放平台 API 小试牛刀

蛋呢823

浏览: 73260 次
性别:
来自: 长沙

最近访客更多访客>>

geeksun

hwzyyx

yican84

li276423525

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

TOP API

DWR Google MAP JavaScript REST TOP

本应用是基于淘宝开放平台（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