淘宝开放平台API 小试牛刀
转:：http://www.cnblogs.com/danne823/archive/2011/04/21/2024259.html
实现的功能：
在浏览器端，展示淘宝用户作为买家，所买到的商品（通过在地图上展示，商品的收获地址以及商品图片）。
如图：
实现过程：
在浏览器上显示地图 --> 通过TOP API查询用户的交易记录 --> 返回XML数据 -->
解析xml，获得收获地址、商品图片地址 --> 调用Google Map API 在地图上显示 --> 完毕。
主要技术：
Java ， TOP API，Google Map API， DWR
源码：
APITest.java
1
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~
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
