php学习交流博客

好好写代码,好好痛她

前端开发实战教程—基于PHP、Google Maps Api的网站开发(一)

前端开发实战教程

— 基于PHPGoogle Maps Api的网站项目开发


第一节:前言及准备工作


前言


笔者是一名普通的前端开发爱好者,目前面临毕业,在国内某互联网公司从事前端开发的实习工作。

很乐意与朋友分享和交流技术经验,也很乐于帮助有同样兴趣爱好的技术新手。我想通过这样一种实际项目开发的方式,帮助新手尽快了解“前端开发”的技术内幕和目前技术公司流行的开发方式。

限于本人的水平以及公司的保密制度,本教程只是自己基础知识的整理和思考,读者可以作为入门教程和项目范例阅读,也作为本人抛出的一块砖,希望能从中得到更多新的想法和知识。欢迎大家提出建议或加入此项目的开发。

最近工作较忙,笔者尽量加快写作速度。

我们的项目取名为”Apus”,至于为什么叫它,请资讯相关知情人士: ),我们的项目定位为“驴友交流网站”。

本教程包含的内容:

 -简要介绍使用版本控制进行多人协同开发及代码管理;

 -简要介绍PHPMysql网站开发;

 -重点介绍前端开发技术,包括网页编码、地图应用、Ajax编程等内容。


项目准备


背景:

目前随着AjaxWebGIS等相关技术的成熟,一些网站提供的地图接口功能越来越强大,开发门槛越来越低,国内也涌现出了一大批优秀的地图应用站点。目前成熟的地图应用基本都局限在地图搜索(如:百度地图搜索搜狗地图)、生活信息(如:普加地图等),而另一项与地图密切相关的,并且受众广泛的领域——旅游,却没有相关的酷站点出现,基于这个发现,我们准备了这个项目课题。

项目初期目标:

 — 用户可以方便的标注、上传、分享旅行路线、地标点,可以上传旅途照片;

 — 用户的旅行路线、标点和照片以友好的方式在地图上操作和显示;

 — 用户的上传内容可以方便的分享和被发现。

 — 系统具备一定的扩展性,可以方便的开发新应用。

开发方式:

本项目使用GoogleCode版本控制工具,采取开放的开发方式,读者可以自由获取最新的程序代码,开发爱好者也可以加入项目的开发建设,(当然前提是要经项目管理员的同意: )

 

使用的工具:

 - ThinkPHPThinkPHP是一个快速、简单的面向对象的轻量级PHP开发框架,它可以为我们提供安全、高效的PHP开发基础。

 - Google Maps Api,是最早的开放地图API,具有较完善的功能,能提供中国地级以上城市的详细地图数据。

 - jQueryjQuery 是一个著名的JavaScript库,它有助于简化 JavaScript编程开发

 

准备知识:

   Google Maps Apihttp://code.google.com/intl/zh-CN/apis/maps/

   ThinkPHP文档和手册:http://www.thinkphp.cn/Manual

   jQuery手册及文档(英文)http://docs.jquery.com/Main_Page

   jQuery手册中文版:http://oncoding.net/manuals/jquery/

   前端开发相关知识:http://oncoding.net/


 

OK,如果你已经粗略浏览以上网站的内容,或者这些开发知识你早已全部了解,那我们正式开始开发内容。


一. 项目开始


1.开发环境配置


作者推荐使用Linux开发环境,这样可以更方便的学习本教程内容,当然,使用Windows也可以方便的学习本教程,只不过你需要点击更多次鼠标。

Linux命令参考:http://linux.chinaitlab.com/Special/linuxcom/Index.html

网站运行环境:Apache+Mysql+PHP ,作者推荐使用Lampp套件 。

协同开发环境:要想方便的取得最新项目代码,你需要使用Subversion 进行代码管理。

     Linux下安装Subversion

 

              ubuntu: sudo apt-get install subversion

        Fedora: yum install subversion

 

     Windows推荐使用 tortoisesvn


2.检出项目代码:

 

本项目使用Google Code的项目托管进行代码版本库管理,地址为http://apus.googlecode.com使用版本库管理代码可以方便的进行多人协同开发和代码管理,相关知识请自行了解。

 

Linux环境:

 

在你的PHP网站文件目录建立项目目录

      mkdir apus

检出代码:

      svn checkout http://apus.googlecode.com/svn/trunk/ apus

 



图片1


版本库commit操作

 

Windows环境:

 

Click,Click,Click or Google

 

 检出”操作是使用subversion从版本库中将代码获取到本地,如果版本库中的代码有更新,则使用up“更新”操作将本地代码更新到最新版本:

 

  更新版本库命令: svn up

 

 


版本库up操作

可以看到,我们的项目主目录下有三个目录:

 

    docs/ 文档目录,用来存放开发规范、功能说明等文档

    demos/ 测试程序目录

    trunk/ 项目主干目录,也就是将来要发布到网站的目录


 

3.配置调试目录

如果前面的你都作对了,那现在你可以使用这样的地址访问我们的项目主干目录:http://localhost/apus/trunk/

 


本地项目主页
 

为了开发方便,我们下一步会配置虚拟主机,这一点在后面用到之后再配置。

 

4.在自己的项目中使用Google Maps Api

Google Maps Api采用申请密钥的方式授权使用,每个密钥只能对应一个网站,当然,任何一个密钥都可以在Localhost上使用:),申请地址:http://code.google.com/intl/zh-CN/apis/maps/signup.html

我们为apus.net.cn申请了一个密钥:



申请密钥成功

apus.net.cn是一个很酷的域名,我们以后的网站项目会放到那里,在此感谢我的好友Ljpbin ,他是一位热心且渊博的技术爱好者,他友情赞助了这个域名,并和我一起维护Oncoding网站。



Google Map调用方式

申请成功的页面上给出了三种API调用方式:“JavaScript Maps API”、“Maps API for Flash”、“HTTP Service”,我们使用第一种 —  JavaScript Maps API

 

OK,下面马上来试试,你即将看到,在自己的网页上显示可以看到世界每个角落的地图是多么的简单。

我们在apus/demos 目录创建一个文件showmap.html

 

输入:

 

<!DOCTYPE html "-//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>

    <!--引入Google Maps JS文件,此处key=你申请到的key-->

    <script src="http://ditu.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAira30FR5tVprWCJ-8_WcqxSrc1zAT9YCtP2kOyoD7kBAJfliJBROJEdu9hUE13rp9a4OHneyOoW5gg" type="text/javascript"></script>

    <script type="text/javascript">

      //initMap()函数,将地图程序加入页面

      function initMap() {

        if (GBrowserIsCompatible()) {

          //ID"Gmap"的层内显示地图

          var map = new Gmap2(document.getElementById("Gmap"));

          //设置地图中心点和缩放级别

          map.setCenter(new GLatLng(36.167, 120.407), 10);

        }

      }

    </script>

  </head>

  <body onload="initMap()" onunload="GUnload()">

    <!--定义显示地图的层-->

    <div id="Gmap" style="width: 600px; height: 400px"></div>

  </body>

</html>

 

 

 

OK,地图显示出来了,是不是很简单?



图片1

到时间了,该去接媳妇吃饭了,来看看我们今天做了什么


   -建立了我们的Apus项目;

   -学会了使用subversion进行版本控制协同开发;

   - 学会了Google Maps Api的申请和使用方法。

 

这已经是很了不起的进步了!

下一节课我们会学习Google Maps的基础操作,包括地图定位、标点、画线等操作;

再下一节课我们开始规划整个项目,包括数据库设计、程序架构等等;

毕竟我们的题目是“前端开发”,以后的课程会将重点放在前端开发的内容上。

今天的内容已经上传到版本库,截稿时版本号为3,本节和下节课的内容都将在apus/demos目录下操作,不要忘记更新哦。

 

祝各位新的一周心情愉快!~

Oncoding编码营原创,转载请注明出处,谢谢

posted on 2011-03-19 17:10 王吉刚 阅读(1145) 评论(0)  编辑 收藏 引用 网摘 所属分类: php学习转载区


只有注册用户登录后才能发表评论。
网站导航: