基于地图的虚拟旅游平台设计

本 科 生 毕 业 论 文

题目:基于地图的虚拟旅游平台设计

姓 名： 学 号： 201024010214 专 业： 计算机科学与技术 年 级： 2010级 学 院： 信息科学技术 完成日期： 2014年4月 指导教师： 曹均阔

本科生毕业论文独创性声明

本人声明所呈交的毕业论文是本人在导师指导下进行的研究工作及取得的研究成果，除了文中特别加以标注和致谢的地方外，本论文中没有抄袭他人研究成果和伪造数据等行为。与我一同工作的同志对本研究所做的任何贡献均已在论文中作了明确的说明并表示谢意。

论文作者签名： 日期： 20 年 月 日

本科生毕业论文使用授权声明

海南师范大学有权保留并向国家有关部门或机构送交毕业论文的复印件和磁盘，允许毕业论文被查阅和借阅。本人授权海南师范大学可以将本毕业论文的全部或部分内容编入有关数据库进行检索，可以采用影印、缩印或其他复印手段保存、汇编毕业论文。

论文作者签名： 日期： 20 年 月 日

指导教师签名： 日期： 20 年 月 日

目 录

1 前言 ............................................... 1

1.1 选题依据及研究意义 ............................... 2 1.2 研究现状 ....................................... 2 1.3 研究思路 ....................................... 3 2 开发环境及主要技术 ................................... 3 2.1 xampp集成软件包 ................................. 3 2.1.1 PHP ....................................... 9 2.1.2 Apache服务器 ............................... 9 2.1.3 MySQL数据库 ............................... 10 2.2 HTML.......................................... 10 2.3 javascript .................................... 10 2.4 Dreamweaver.................................... 10 2.5 PanoramaStudio 2 Pro ............................ 10 2.6 八倍全景漫游者 ................................. 10 3 系统分析 .......................................... 11 3.1 需求分析 ...................................... 11 3.2 可行性分析 .................................... 11 4 系统设计 .......................................... 11 4.1 功能模块的划分 ................................. 11 4.2 系统整体结构图 ................................. 13

4.3 功能流程图 .................................... 13 4.4 虚拟旅游系统网页设计表 .......................... 15 5 数据库设计与连接.................................... 17 5.1 数据库E-R图 ................................... 17 5.2 设计与创建数据库表 .............................. 18 5.3 定义站点和指定测试服务器 ........................ 5.4 数据库连接 .................................... 6 系统实现 .......................................... 6.1 前台设计与实现 ................................. 6.2 后台界面设计与实现 .............................. 6.3 全景图的导入 ................................... 6.4 地图的导入与加载 ............................... 6.4.1 秘钥的申请 ................................ 6.4.2 某地点经纬度的查询方法 ...................... 6.4.3 标记的添加 ................................ 6.5 系统部分代码详解 ............................... 6.5.1 CSS ...................................... 6.5.2 javascript ................................ 6.5.3 html ..................................... 7 总结 .............................................. 参考文献 ............................................ 致谢................................................

22 24 25 25 32 35 36 36 40 41 42 42 43 46

48 49 50

基于地图的虚拟旅游平台设计

作者： 指导教师：曹均阔

（海南师范大学信息科学技术学院，海口，571158)

摘 要：现在虚拟技术在人们日常生活中各个方面都得以广泛应用。在这个互联网逐渐普及，旅游成为一种时尚和热潮的时代，构建一个平台实现旅游景点的虚拟化，让人们不出门，不花钱便可游览天下美景，也即将变成一种潮流。本虚拟旅游平台主要是以Google地图做导航，“游客”点击Google地图上海南省的某个地点，便可对这个地方的自然风光进行虚拟游览，使用户仿佛置身于真实的环境中。此虚拟旅游平台不仅可以使旅游爱好者从一个新视角体验自然风光，还可以对真实的旅游景点做大力宣传，吸引一些潜在的游客,促进旅游业的发展。 关键词：Google地图；虚拟旅游；全景图

Design of virtual tourism platform based on Google map

Author: Wang Dan Tutor: Cao Junkuo

(School of Information Science and Technology,HaiNan Normal University,

HaiKou,571158)

Abstract:The virtual technology is widely used in all aspects of people's daily life nowadays.With the popularity of the Internet and the tourism has become a fashion and boom,it will become a trend that people can visit the beautiful scenery through virtual platform by just staying at home.The virtual tourism platform is mainly based on Google maps navigation, \"visitors\" can visit the virtual natural scenery by click a location of Hainan on the Google map,which can make them feel as if they are in a real environment. This virtual tourism platform can not only make travel enthusiasts to experience natural scenery from a new perspective but also publicity the real tourist attractions,which can attracting potential tourists and promoting the development of tourism as well. Keywords: virtual tourism; panorama;Google maps

1 前言

如今许多喜欢远足的人由于时间、经济等条件的放慢旅行脚步，此平台将旅

1

游景点虚拟化，让我们的旅游爱好者不出门，通过点击地图上的某个地点便可游览美景及查询景点附近旅馆等资源的分布情况。

1.1 选题依据及研究意义

从时代文化背景上讲，目前虚拟技术在人们的日常生活中各个方面都得以广泛应用，在这个互联网逐渐普及，旅游成为一种时尚和热潮的时代，运用互联网创建一个平台，在此平台上实现旅游景点的虚拟化，让宅男宅女们不出门，不花钱便可浏览天下美景，也即将变成一种潮流。

从知识、技术上讲，搜集相关文献资料，现有虚拟旅游系统模拟实现虚拟场景主要采用以下四种方法:1.基于模型导入；2.基于WebGIS；3.基于图像绘制；4.基于编程的。本系统实现的虚拟场景主要是运用“PanoramaStudio 2 Pro”和“八倍全景漫游者”等图像处理软件对搜集的景点图像进行处理生成360度全景图。

此虚拟旅游平台不仅可以使旅游爱好者从一个新视角体验自然风光，还可以对真实的旅游景点做大力宣传，吸引一些潜在的游客,促进旅游业的发展。

1.2 研究现状

现在虚拟旅游还是一个比较新的研究课题，最先是由外国学者20世纪90年代提出的，已经取得较系统的研究成果。德国某研究所研发出的袖珍的旅游系统可以再现被损毁的古遗迹，让游览者重新体验被遗忘的历史时光。意大利也发行了一个虚拟化的旅游系统,游客通过此系统能看到形象逼真的古埃及。

国内有关虚拟旅游的研究发展一直都很缓慢，研究面比较狭窄，其主要研究领域集中在虚拟旅游的实现与应用。近年来，我国虚拟旅游网站数量日见增多，此类网站发展迅速，但此类网站提供的虚拟旅游信息有一定的局限，仅仅停留在表面，信息不够详细丰富，不能从真正意义上满足旅游者的需求，仅仅是一些静态旅游图片或者旅游广告，不能详细精确的给旅游者提供旅游者出游所需的信息。不过也取得了一些相应的成果，例如北京故宫的虚拟旅游系统，由国家重点实验室开发的虚拟建筑环境实时漫游系统及全景客虚拟旅游网站等等。

2

1.3 研究思路

此平台在window7系统环境下开发，开发此平台时首先运用HTML（网页超文本标记语言）和Dreamweaver网站开发工具来制作本网站的大体框架；其次通过PHP编程语言（嵌入到HTML文档的脚本语言）和MySQL数据库制作用户登录模块及用户留言模块；然后运用“PanoramaStudio 2 Pro”和“八倍全景漫游者”等图像处理软件对搜集的景点图像进行处理生成360度全景图并导入网站；最后导入Google地图，添加标记，调用.js文件实现地图加载导航功能。详细步骤如下：

1.为Dreamweaver设置PHP开发环境，安装xampp集成软件包； 2.在Dreamweaver中定义站点； 3.为Dreamweaver指定测试服务器； 4.新建文档类型为PHP的网页；

5.创建数据库存储用户信息、管理员信息及留言信息； 6.连接数据库（并测试是否连接成功）； 7.运用DIV+CSS对网站各个网页进行布局； 8.导入Google地图，添加标记；

9.运用“PanoramaStudio 2 Pro”和“八倍全景漫游者”等图像处理软件对搜集 的景点图像进行处理生成360度全景图并导入网站中；

10.加载地图。

11.整合美化网页，测试各个网页之间是否有链接中断。 12.发布网站。

2 开发环境及主要技术

2.1 xampp集成软件包

XAMPP是一个集成软件包，要查看Dreamweaver中开发的PHP类型的网页，应该对PHP开发环境进行设置，应安装XAMPP，Apache，PHP和MySQL数据库。安装成功

3

后要启动服务器（Apache服务器和MySQL服务器），这样才能进行本地测试，对动态网页进行浏览，如下图2-1所示：

图2-1 XAMPP控制面板图

随后在浏览器地址栏中键入“http://localhost/”,进入如下页面（图2-2）：

4

图2-2 XAMPP界面图

5

在“安全”选项卡里为MySQL根用户创建密码（创建密码是保护MySQL数据库的好方法），如图2-3：

图2-3 创建MySQL根用户密码图

6

接着测试PHP安装，也是在浏览器中键入http://localhost/,进入如下界面（图2-4）：

图2-4 XAMPP界面图

7

单击左边选项phpinfo（），若界面如下（图2-5），则PHP已经安装成功。

图2-5 测试PHP安装成功图

最后测试MySQL和phpMyAdmin，单击以上页面的phpMyAdmin，进入界面如图2-6：

图2-6 登录phpMyAdmin界面图

8

输入之前创建的根用户名和密码，进入phpMyAdmin界面（图2-7），此页面可以创建管理数据库，数据库liuyan和virtual就是本平台的用于存储用户留言信息和用户信息、管理员信息的数据库。

图2-7 MySQL主界面图

开发的网站进行本地测试时如果本地计算机没有启动XAMPP Coontrol Panel，网站开发测试者应自己启动，接着启动面板里的Apache和MySQL，PHP页需要Apache服务器处理和MySQL数据库支持，Apache通过端口80或443监听请求，MySQL监听请求是通过3306端口。

2.1.1 PHP

PHP是一种脚本语言，P指语言，p指程序运行的解释器。在本网站中网页文档类型是PHP，PHP页需要通过web服务器（Apache）处理。PHP页保存时扩展名为.php。

2.1.2 Apache服务器

Apache是web服务器软件，提供网上信息浏览服务，要在浏览器中浏览PHP网页，需启动Apache服务器。

9

2.1.3 MySQL数据库

MySQL是一个数据库管理系统，本网站中，用MySQL创建数据库virtual和liuyan存储用户信息、管理员信息、留言信息。

2.2 HTML

HTML：描述性的超文本标记语言，在Dreamweaver中编写的HTML文件保存时扩展名是.htm或.html。HTML文档主要由以下3个部分组成，分别是：

标记：定义文档的版本信息；

标记：定义网页文档头部，一般包括主体信息和标题（既可放在标签里，也可放在标签里）；

标记：定义文档主体区域，这个标记里存放网页要显示的内容。

2.3 javascript

Javascript是一种能够使网页具有交互性的编程语言，本网站中给地图添加标记时，手动切换图片，建立循环式幻灯片时都调用了由javascript语言编写的.js文件。

2.4 Dreamweaver

本平台的开发工具是Dreamweaver CS5。它是一款所见即所得的网页开发工具，利用它可以轻松地制作出充满动感的网页。

2.5 PanoramaStudio 2 Pro

PanoramaStudio（全景图制作软件），它能合成在同一水平面上的全景图。本网站中就是使用此软件把收集的某个景点的一组（7-11）图片合成一张在同一水平线上的360度全景图。

2.6 八倍全景漫游者

“全景漫游者”可以创建出一种交互式的虚拟效果。本网站主要是把由PanoramaStudio 2 Pro制作的全景图导入“八倍全景漫游者”中，生成嵌入Flash，

10

此嵌入Flash可以由用户自己控制播放，暂停，拉近和拉远，向左或向右移动。

3 系统分析

3.1需求分析

（1）环境需求：操作系统是win7 32位，Apache服务器、MySQL数据库服务器。 （2）功能需求：“游客”注册成为本网站会员，进入以Google地图做导航，“游客”通过点击Google地图上海南省的某个地点便可对这个地方的自然风光等进行虚拟游览，使用户仿佛置身于真实的环境中；可以查询搜索目的地；也可以查询旅游景点周边的住宿情况。

（3）开发工具需求：Dreamweaver CS5、PanoramaStudio 2 Pro、八倍全景漫游者、MySQL数据库。

（4）开发语言需求：php脚本语言，HTML标记语言，javascript脚本语言。

3.2可行性分析

（1）技术可行性：主要采用HTML+PHP+MySQL+Dreamweaver+javascript五种技术开发动态网站，MySQL数据库管理系统能够处理大量数据，网页也能通过javascript实现交互性，“PanoramaStudio 2 Pro”和“八倍全景漫游者”能够对搜集的图片进行处理生成全景图。

（2）经济可行性：对真实的旅游景点做大力宣传，吸引一些潜在的游客，促进旅游业的发展。

（3）法律可行性：本平台开发不涉及违法行为。

4 系统设计

4.1 功能模块的划分

网站包含如下功能模块（大模块）：网站的前台服务模块和后台管理模块。

11

前台服务模块结构图如下（图4-1）：

图4-1 前台服务模块结构图

后台管理模块结构图如下（图4-2）：

图4-2 后台管理模块结构图

12

4.2 系统整体结构图

系统整体结构图（图4-3）

图4-3 系统整体结构图

4.3 功能流程图

13

前台服务功能流程图如下（图4-4）

图4-4 前台服务功能流程图

后台管理功能流程图如下（图4-5）：

14

图4-5 后台管理功能流程图

4.4 虚拟旅游系统网页设计表

虚拟旅游系统设计页面名称及对应功能如表4-1：

15

表4-1 网页设计表

页面名称 admin.php binlanggu.php boaodongyuwenqua

n.php

boaoyazhouluntanyongjiuhuizhi.ph

p book.php dadonghai.php daohangditu.php daxiaodongtian.p

hp

delbook.php guanliyuandenglu

.php

hainanshengbowug

uan.php haitangwan.php huoshankou.php jiarihaitan.php

功能

管理员登录成功后显示的

页面

存储槟榔谷信息的页面 存储博鳌东屿信息的页面 存储博鳌亚洲论坛永久会

址信息的页面 用户留言页面

存储大东海信息的页面 存储导航地图信息的页面 存储大小洞天信息的页面

删除留言的页面 管理员登录页面 存储海南省博物馆信息的

页面

存储海棠湾信息的页面 存储火山口信息的页面 存储假日海滩信息的页面

页面名称 qingshuiwan.php redaiyeshengdongzhi

wuyuan.php reply.php showpassword.php

功能

存储清水湾信息的页面 存储热带野生植物园信息

的页面

回复用户留言的页面 显示用户密码的页面

showquestion.php tianyahaijiao.php tongguling.php wanlvyuan.php wanquanheshuishangr

enjia.php welcome.php

显示密码提示问题的页面 存储天涯海角信息的页面 存储铜鼓岭信息的页面 存储万绿园信息的页面 存储万泉河水上人家信息

的页面

用户成功登录后才可以进

入的页面

存储五指山大峡谷信息的

页面

存储蜈支洲岛信息的页面 存储西岛信息的页面 存储兴隆热带植物园信息

的页面

存储亚龙湾海底世界信息

的页面

存储亚龙湾热带森林公园

信息的页面

存储呀诺达信息的页面

存储信息的页面 找回密码的页面 用户信息注册的页面 用户注册成功的页面 用户注册失败的页面 存储住宿信息的页面

wuzhishandaxiagu.ph

p

wuzhizhoudao.php

xidao.php xinglongredaizhiwuy

uan.php

jingcaimeiwen.ph存储文章的页面 yalongwanhaidishiji

p e.php

liuyanboindex.ph留言薄主页面 yalongwanredaisenli

p ngongyuan.php login.php 用户进行注册\\登录的页面 yanuoda.php loginfail.php 用户登录失败页面 yinxianghainandao.p

hp

logout.php 注销用户的页面 zhaohuimima.php luhuitou.php 存储鹿回头信息的页面 zhuce.php mudidi.php 存储景点信息的页面 zhucechenggong.php nanshansi.php 存储南山寺信息的页面 zhuceshibai.php nanwanhoudao.php 存储南湾猴岛信息的页面 zhusu.php wugongci.php 存储五公祠信息的页面

16

5 数据库设计与连接

5.1 数据库E-R图

数据库virtual的E-R图如下（图5-1）：

图5-1 virtual的E-R图

数据库liuyan的E-R图如下（图5-2）：

17

图5-2 liuyan的E-R图

5.2 设计与创建数据库表

本网站的两个数据库：virtual和liuyan，

数据库virtual里只有一个数据表member，ID（用户编号）是主关键字 member数据表各字段如表5-1：

18

表5-1 member表

数据库liuyan里有两个数据表admin和gbook，ID（主题编号）是主关键字： 管理员信息数据表admin各字段如表5-2：

表5-2 admin表

留言信息数据表gbook各字段如表5-3：

表5-3 gbook表

19

创建数据表member的SQL语句如图5-3：

图5-3 创建数据表member图

创建数据表admin的SQL语句如图5-4：

图5-4 创建数据表admin图

20

创建数据表gbook的SQL语句如图5-5：

图5-5 创建数据表gbook图

数据库liuyan里数据表admin和gbook的关系图如下（图5-6）：

图5-6 数据表admin和gbook的关系图

21

5.3 定义站点和指定测试服务器

在Dreamweaver定义站点virtual（站点→新建站点），站点根文件夹是virtual_travel，此文件夹在文档根（顶级文件夹）C:\\xampp\\htdocs中。设置如下图5-7：

图5-7 添加站点图

在Dreamweaver中定义一个名为“virtual_travel_test”测试服务器，步骤如下图5-8：

图5-8 添加服务器图

22

单击+号按钮，添加一台新服务器，本网站添加的服务器名称是virtual_travel_test，在“基本”和“高级”选项的进行如下设置（图5-9和图5-10），保存，

图5-9 服务器基本设置图

图5-10 服务器中服务器模型设置图

23

选中对话框中的“测试”复选框。要进行远程测试时，“远程”复选框应勾选。设置如（图5-11）

图5-11 服务器中设置本地测试图

5.4 数据库连接

在Dreamweaver中连接数据库的前提是phpMyAdmin中已经有建好数据库，选择Dreamweaver的“窗口”—“数据库”为本网站添加数据库，并进行相关设置，如下图（图5-12）：

图5-12 连接数据库图

24

设置完成后，单击“测试”按钮，若跳出如下对话框（图5-13），则表明已经成功链接数据库。

图5-13 测试数据库连接成功图

本网站中连接的数据库有virtual和liuyan，连接名称分别是conn1和conn2。

6 系统实现

6.1 前台设计与实现

本虚拟旅游网站用户登录界面设计如下（图6-1)：

图6-1 用户登录界面设计图

本虚拟旅游网站用户登录界面实现如下（图6-2）：

25

图6-2 用户登录界面实现图

本虚拟旅游网站首页界面设计如下（图6-3）：

图6-3 首页界面设计图

本虚拟旅游网站首页界面实现如下（图6-4）：

26

图6-4 首页界面图

本虚拟旅游网站导航地图界面设计与实现如下（图6-5）：

图6-5 导航地图界面设计与实现图

本虚拟旅游网站目的地界面设计与实现如下（图6-6）：

27

图6-6 目的地界面设计与实现图

本虚拟旅游网站住宿界面设计与实现如下（图6-7）：

图6-7 住宿界面设计与实现图

本虚拟旅游网站留言薄主界面设计如下（图6-8）：

28

图6-8 留言薄主界面设计图

本虚拟旅游网站留言薄主界面实现如下（图6-9和图6-10）：

图6-9 留言薄主界面图

29

图6-10 留言薄主界面图

本虚拟旅游网站用户留言界面设计如下（图6-11）：

图6-11 用户留言界面设计图

30

本虚拟旅游网站用户留言界面实现如下（图6-12）：

图6-12 用户留言界面实现图

存储某景点信息的页面（图6-13）：

图6-13 存储某景点信息的页面图

31

6.2 后台界面设计与实现

（1-1）留言薄管理员登录界面设计如下（图6-14）：

图6-14 管理员登录界面设计图

（1-2）留言薄管理员登录界面实现如下（图6-15）：

图6-15 管理员登录界面实现图

32

（2-1）删除留言界面设计如下（图6-16）：

图6-16 删除留言界面设计图

（3-1）回复留言界面设计如下（图6-17）：

图6-17 回复留言界面设计图

33

（3-2）回复留言界面实现如下(图6-18)：

图6-18 回复留言界面实现图

（4-1）管理员管理留言信息界面的设计如下(图6-19)：

图6-19 管理留言信息设计图

34

（4-2）管理员管理留言信息界面的实现如下(图6-20)：

图6-20 管理留言信息实现图

6.3 全景图的导入

全景图如图6-21：

图6-21 全景图

35

6.4 地图的导入与加载

（1）导入Google地图的javascript脚本如图6-22：

图6-22 导入Google地图的代码图

（2）导入的地图在网页文档中的宽度和高度设置及给导入的地图定义唯一的标识“地图窗口”的代码如图6-23，调用javascript文件时，map2.js文件里面的函数会查找到网页元素“地图窗口”，对此文档元素进行操作，例如给地图添加标记。style规定元素的行内样式，这里的