|
图1 Web应用的界面
图2 卫星图像模式下的Web应用界面
2. Web应用实现的主要功能
(1)在左下侧面板的“景点名称”文本框中输入需要的景点名称并按下“查询”按钮，应用会在地图上弹出气球及信息框，指示对应景点所在的位置，同时右下侧会播放对应景点的图片幻灯片，左下侧会显示景点的经纬度。
(2)如果查询的景点以前没有查询过，则会被加入右上侧的列表。用户点击右上侧列表中的某个景点，系统会将景点定位到地图中央，并在地图上弹出气球及信息框指示对应景点所在的位置。
(3)用户如果点击对应景点的图片，应用会弹出新的浏览器窗口显示对应图片的大图。
(4)用户在左下侧输入经纬度，并按下“Go”按钮，应用会将地图中央定位到指定的经纬度。
(5)用户可以点击放大缩小按钮缩放地图，可以下拉显示模式按钮，切换显示模式。如切换到卫星图像模式，参见图2。
(6)在信息框中可以点击对应的超链接到Google或百度上查询对应景点的详细介绍。
三、 应用
开发应用的各项业务功能之前，首先要进行界面的搭建及代码框架的开发，步骤如下。
（1）首先在磁盘上创建一个文件夹用来存放应用需要使用的各个文件，如“C:\GooglemapFlickerMushUp”。然后在此文件夹下创建页面文件“旅游MushUp.html”。要注意将页面文件的编码设置为“UTF-8”，否则浏览器可能不能正常显示中文。
（2）用文本编辑器（如：UltraEdit等）打开“旅游MushUp.html” 文件，在文件中输入如下HTML代码。
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type"
content="text/html; charset=utf-8"/>
<title>世界旅游景点导航</title>
</head>
<body onload="load()" onunload="GUnload()">
<table width="810" align="center" cellspacing="1"
cellpadding="0" style="background-image:URL(img/bg.jpg);">
<tr><td width="610">
<table width="100%" cellspacing="1" cellpadding="0">
<tr><td><div id="MapDivBao">
<div id="MapDiv" style="width: 600px; height: 450px"/>
</div></td></tr>
<tr><td><div id="ControlDiv">
<b>景点名称</b>
|
