本应用是基于淘宝开放平台（TOP）API以及Google Map JavaScript API的基础上实现的一个自用型淘宝买家应用。
2012-12-01 11:33
666 查看
淘宝开放平台API 小试牛刀
转:：/article/7049403.html实现的功能：
在浏览器端，展示淘宝用户作为买家，所买到的商品（通过在地图上展示，商品的收获地址以及商品图片）。如图：
实现过程：
在浏览器上显示地图 --> 通过TOP API查询用户的交易记录 --> 返回XML数据 -->解析xml，获得收获地址、商品图片地址 --> 调用Google Map API 在地图上显示 --> 完毕。
主要技术：
Java ， TOP API，Google Map API， DWR源码：
APITest.java1 package aa;
2
3 import java.text.ParseException;
4 import java.text.SimpleDateFormat;
5 import java.util.Date;
6
7 import com.taobao.api.ApiException;
8 import com.taobao.api.Constants;
9 import com.taobao.api.DefaultTaobaoClient;
10 import com.taobao.api.TaobaoClient;
11 import com.taobao.api.request.TradesBoughtGetRequest;
12 import com.taobao.api.response.TradesBoughtGetResponse;
13
14 public class APITest {
15 protected static String testUrl = "http://gw.api.tbsandbox.com/router/rest";// 沙箱环境调用地址
16 protected static String Url = "http://gw.api.taobao.com/router/rest";//正式环境调用地址
17 /**
18 * 说明：沙箱环境是模拟淘宝网上交易的，开发人员可以在此先测试自己的应用，然后才能申请到正式环境测试
19 */
20
21 // 申请的测试账号 appkey 及 secret
22 protected static String myappkey = " ";
23 protected static String mysecret = " ";
24 protected static String sandboxSecret = " "; // 沙箱环境测试下的 AppSecret
25 /**
26 * 说明：开发者申请开发应用的时候，系统给你的appkey与secret是和你的应用唯一对应的，同时，
27 * 它会绑定你的淘宝账户（现实环境的账户以及申请的沙箱账户），当需要调用到用户隐私数据的时候，
28 * 调用的即是所关联的账户的数据。
29 * 例如本例调用到的monkey823用户即是我在沙箱申请的账户，里面的交易数据是在mini淘宝模拟的。
30 */
31
32 /**
33 * 测试 TradesBoughtGet
34 *
35 * 调用了top SDK
36 *
37 */
38 public static String testTradeGet() throws ApiException, ParseException {
39
40 // 可以在client 构造函数里 设置返回的数据格式 xml or json
41 TaobaoClient client = new DefaultTaobaoClient(testUrl, myappkey,
42 sandboxSecret, Constants.FORMAT_XML);
43 TradesBoughtGetRequest req = new TradesBoughtGetRequest();
44 req.setFields("seller_nick,buyer_nick,title,type,create,orders.pic_path,orders.price,orders.num,receiver_city");
45 Date dateTime = SimpleDateFormat.getDateTimeInstance().parse(
46 "2011-03-09 05:15:27");
47 Date dateTime2 = SimpleDateFormat.getDateTimeInstance().parse(
48 "2011-04-09 23:15:27");
49
50 req.setStartCreated(dateTime);
51 req.setEndCreated(dateTime2);
52
53 TradesBoughtGetResponse response = client.execute(req);
54
55 System.out.println("------>> " + response.getBody());
56
57 return response.getBody();
58 }
59
60 public static void main(String[] args) {
61
62 try {
63 APITest.testTradeGet();
64 } catch (Exception e) {
65 e.printStackTrace();
66 }
67 }
68 }执行这个测试时，返回的XML数据（为方便查看，以图片形式展示）：
Web.xml
1 <?xml version="1.0" encoding="UTF-8"?> 2 <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5"> 3 <display-name>DwrTest</display-name> 4 <servlet> 5 <servlet-name>dwr-invoker</servlet-name> 6 <!--<display-name>DWR Servlet</display-name>--> 7 <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class> 8 <init-param> 9 <param-name>debug</param-name> 10 <param-value>true</param-value> 11 </init-param> 12 </servlet> 13 14 <servlet-mapping> 15 <servlet-name>dwr-invoker</servlet-name> 16 <url-pattern>/dwr/*</url-pattern> 17 </servlet-mapping> 18 <welcome-file-list> 19 <welcome-file>test.jsp</welcome-file> 20 </welcome-file-list> 21 </web-app>
Dwr.xml
1 <!DOCTYPE dwr PUBLIC 2 "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN" 3 "http://getahead.org/dwr/dwr30.dtd"> 4 5 <dwr> 6 <allow> 7 8 <create creator="new" javascript="APITest"> 9 <param name="class" value ="aa.APITest" /> 10 </create> 11 12 </allow> 13 </dwr>
test.jsp
1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2 pageEncoding="UTF-8"%>
3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
4 <html>
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
7 <title>DWR Test</title>
8 <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
9 </head>
10 <!--引入dwr的js脚本-->
11 <script src="dwr/interface/APITest.js"></script>
12 <script src="dwr/engine.js" /></script>
13
14 <!-- 下面是谷歌地图API的调用 -->
15 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=cn"></script>
16 <script type="text/javascript">
17 function initialize() {
18
19 //初始化地图界面
20 var myLatlng = new google.maps.LatLng(37.230,106.083); //中国地图的坐标中心
21 var myOptions = {
22 zoom: 4, //缩放级别
23 center: myLatlng, //设定中心坐标
24 mapTypeId: google.maps.MapTypeId.ROADMAP //地图样式：卫星，地图
25 };
26
27 var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
28
29 //获取后台数据, 并实时显示在地图上。
30 APITest.testTradeGet(callback); //执行top API 生成xml数据, 并绑定 回调方法处理
31
32 //回调函数
33 function callback(response){ //response为执行 APITest.testTradeGet方法返回的值(xml格式的String)
34 var xmlDoc = loadXMLStr(response);
35
36 //其他 步骤
37 //获得图片路径 数组
38 var picturePaths = xmlDoc.getElementsByTagName("pic_path");
39 //获得所在城市 数组
40 var citys = xmlDoc.getElementsByTagName("receiver_city");
41 //alert("pic:" +picturePaths[0].text +" city :"+ citys[0].text);
42 //alert("pic:" +picturePaths[0].text);
43 if(picturePaths[0]!=null){ //如果返回的数据不为空
44 //根据图片地址 生成自定义图片文件
45 var image = new google.maps.MarkerImage(
46 picturePaths[0].text,
47 new google.maps.Size(80, 60), //缩放后的大小
48 new google.maps.Point(0, 0), //原始点
49 new google.maps.Point(40, 0), //锚点
50 new google.maps.Size(800, 600) //图片原始大小（缩放图片时必须要填写）
51 ); //缩放了大小的图片
52 //var image = new google.maps.MarkerImage(picturePaths[0].text); //原始大小的图片
53
54 var address = citys[0].text;
55 //var address = "长沙";
56 codeAddress(address); //解析地址， 并往地图上添加图片
57
58 }
59
60 //解析地址的函数
61 function codeAddress(address) {
62 var ll;
63 var geocoder = new google.maps.Geocoder();
64
65 if (geocoder) {
66 geocoder.geocode( { 'address': address},getLL);
67 }
68 var re = function getLL(results, status) {
69 if (status == google.maps.GeocoderStatus.OK) {
70
71 ll = results[0].geometry.location;
72
73 //在所解析的地址处， 添加一个标记（用自定义图片）
74 var marker = new google.maps.Marker({
75 map: map,
76 position: ll,//results[0].geometry.location,
77 icon: image //自定义的icon
78 });
79
80 //信息窗口选项
81 var infoOption = {
82 content: address,
83 position: ll//results[0].geometry.location
84 };
85 //添加 信息窗口
86 var info = new google.maps.InfoWindow(infoOption);
87 info.open(map); //显示标注信息窗口
88 //alert("mark 5555555555 success!!!");
89
90 } else {
91 alert("Geocode was not successful for the following reason: " + status);
92 }
93 };
94 }
95
96 }
97
98 //加载 xml 格式的字符串的函数
99 function loadXMLStr(text){ //text为xml格式的String
100 var xmlDoc;
101 try //Internet Explorer
102 {
103 xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
104 xmlDoc.async="false";
105 xmlDoc.loadXML(text);
106 }
107 catch(e)
108 {
109 try //Firefox, Mozilla, Opera, etc.
110 {
111 parser=new DOMParser();
112 xmlDoc=parser.parseFromString(text,"text/xml");
113 }
114 catch(e) {alert(e.message);}
115 }
116 return xmlDoc;
117 }
118
119 }
120
121 </script>
122 </head>
123 <body onload="initialize()">
124
125 <!-- 显示地图的div -->
126 <div id="map_canvas" style="width: 1000px; height: 800px; align:center;"></div>
127 </body>
128 </html>当然，dwr的包、 TOP的SDK是不能忘记的。O(∩_∩)O~
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- C#基础系列：实现自己的ORM（反射以及Attribute在ORM中的应用）
- C#基础系列：实现自己的ORM（反射以及Attribute在ORM中的应用）
- jphone项目设计介绍（一个基于C++的应用程序框架以及软电话和日志服务器应用）
- 将 Shiro 作为应用的权限基础 三：基于注解实现的授权认证过程
- Objective-C中在一个字符串删除指定字符串的方法（OC中NSString的常用API的基础应用1）
- 【C++ STL应用与实现】26: 如何使用std::for_each以及基于范围的for循环 (since C++11)
- C#基础系列：实现自己的ORM（反射以及Attribute在ORM中的应用）
- [ZooKeeper.net] 1 模仿dubbo实现一个简要的http服务的注册 基于webapi
- jQuery.API源码深入剖析以及应用实现(2) － jQuery对象访问和数据缓存
- iOS安全攻防：Fishhook、数据保护API以及基于脚本实现动态库注入
- SSD入门以及实现一个基于SSD的KV存储
- jQuery.API源码深入剖析以及应用实现(4) － 选择器篇(下)
- C#基础系列：实现自己的ORM（反射以及Attribute在ORM中的应用）
- iOS安全攻防：Fishhook、数据保护API以及基于脚本实现动态库注入
- 基于Ogre的DeferredShading（延迟渲染）的实现以及应用
- 基于vue2.0以及better-scroll实现scroll滑动组件及所实现组件的应用例子
- OSGI企业应用开发（十五）基于Spring、Mybatis、Spring MVC实现一个登录应用
- C# Windows API应用之基于FlashWindowEx实现窗口闪烁的方法