|
从上述代码中可以看出，本应用中还需要使用一些背景图片，这些图片都位于与页面文件同一文件夹下的 “img” 文件夹下，如图3所示。
图3 应用中用到的背景图
完成了上述工作后，界面的搭建就完成了，下面就可以进行各项业务功能的开发。
四、 准备工作
由于本应用中使用了GoogleMap以及Google Feed的Ajax API，因此在开发前首先要登陆到GoogleMap以及Google Feed的网站申请API Key。
完成了API Key的申请后，在上述代码框架的“head”部分“style”下添加如下代码，引入需要使用的API。
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA0DBHEJH01_0VNMudvDaa6xTnXSjFu29eJd6cbMAcBwfVDrkn8RTOtwnL4wJ4A6GZWdE82cQ6geLv4Q"
type="text/javascript"></script>
<script src="http://www.google.com/jsapi?key=ABQIAAAA0DBHEJH01_0VNMudvDaa6xTnXSjFu29eJd6cbMAcBwfVDrkn8RTOtwnL4wJ4A6GZWdE82cQ6geLv4Q"
type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js" type="text/javascript"></script>
上述代码中第一个“script”标记引入的是GoogleMap的API，第二个“script”标记引入的是Google Feed的API，最后一个引入的是播放图片幻灯片的API。
另外需要特别注意的是，上述代码中有下划线的部分是作者申请的API Key，读者有需要可以去网上申请自己的免费API Key。
五、 开发过程
1．全局变量的声明
在开发各个业务方法前，首先要声明一些记录系统信息的全局变量。具体做法为，在“head”部分的最后添加如下代码。
<script type="text/javascript">
var jdHistoryList=['故宫'];//景点浏览历史列表
var jdmcQJ; //记录当前景点名称的全局变量
var map; //声明地图对象引用
var zoom=14; //初始缩放比例
var geocoder; //声明查询景点经纬度对象的引用
var ss; //幻灯片放映器引用
var options; //幻灯片放映选项
//初始化时当前景点为“故宫”，因此图片资源URI
//指向Flicker中故宫的图片资源
var feed="http://api.flickr.com/services/feeds/"
+"photos_public.gne?tags=故宫&format=rss_200";
google.load("feeds", "1");//加载Google Feeds API
//此处未来添加各个业务方法
</script>
2．地图初始化方法的开发
完成了全局变量的声明后，就可以开发地图的初始化方法了。在前面代码中“此处未来添加各个业务方法”注释后添加如下对地图进行初始化的“load”方法代码。
function load(){//初始化地图的方法
if (GBrowserIsCompatible()){
map = //创建地图对象
new GMap2(document.getElementById("MapDiv"));
//设置地图中心点经纬度及缩放比例
map.setCenter(new GLatLng(39.910, 116.398), zoom);
//设置经纬度文本框初始值
document.getElementById('lng').value=39.910;
document.getElementById('lat').value=116.398;
//添加小地图控制条
map.addControl(new GSmallMapControl());
//添加缩略图控制
map.addControl(new GOverviewMapControl());
map.addControl(new GScaleControl());//添加比例尺
map.enableScrollWheelZoom();//允许用鼠标滚轮缩放
geocoder = new GClientGeocoder();
options = //初始化幻灯片放映选项
{ displayTime:2000, transistionTime:600,
scaleImages:false,
linkTarget : google.feeds.LINK_TARGET_BLANK };
//播放feed变量 URI指定的系列图片
ss= new GFslideShow(feed, "slideShow", options);
}
}
|
