本应用是基于淘宝开放平台(TOP)API以及Google Map JavaScript API开发的一个自用型淘宝买家应用。
实现的功能:
Web构架,展示淘宝用户作为买家,所买到的商品(在地图上展示:商品的收获地址以及商品图片)。
如图:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIyZuBnLhhTY1QTOyYjZzETZtUDO1kTL0UzMz0SM0gjYtMDZkBjM0cTOvwFN4IDO2QzLcRnbl1GajFGd0F2LcRWYvxGc19CXt92YuUWelRXauwGZvw1LcpDc0RHaiojIsJye.png)
实现过程:
在浏览器上显示地图 -->
调用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 οnlοad="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