前端开发实战教程
— 基于PHP、Google Maps Api的网站项目开发
第一节：前言及准备工作
前言
笔者是一名普通的前端开发爱好者，目前面临毕业，在国内某互联网公司从事前端开发的实习工作。
很乐意与朋友分享和交流技术经验，也很乐于帮助有同样兴趣爱好的技术新手。我想通过这样一种实际项目开发的方式，帮助新手尽快了解“前端开发”的技术内幕和目前技术公司流行的开发方式。
限于本人的水平以及公司的保密制度，本教程只是自己基础知识的整理和思考，读者可以作为入门教程和项目范例阅读，也作为本人抛出的一块砖，希望能从中得到更多新的想法和知识。欢迎大家提出建议或加入此项目的开发。
最近工作较忙，笔者尽量加快写作速度。
我们的项目取名为”Apus”，至于为什么叫它，请资讯相关知情人士: )，我们的项目定位为“驴友交流网站”。
本教程包含的内容：
－简要介绍使用版本控制进行多人协同开发及代码管理；
－简要介绍PHP、Mysql网站开发；
－重点介绍前端开发技术，包括网页编码、地图应用、Ajax编程等内容。
项目准备
背景：
目前随着Ajax、WebGIS等相关技术的成熟，一些网站提供的地图接口功能越来越强大，开发门槛越来越低，国内也涌现出了一大批优秀的地图应用站点。目前成熟的地图应用基本都局限在地图搜索(如：百度地图搜索、搜狗地图)、生活信息(如：普加地图等)，而另一项与地图密切相关的，并且受众广泛的领域——旅游，却没有相关的酷站点出现，基于这个发现，我们准备了这个项目课题。
项目初期目标：
— 用户可以方便的标注、上传、分享旅行路线、地标点，可以上传旅途照片；
— 用户的旅行路线、标点和照片以友好的方式在地图上操作和显示；
— 用户的上传内容可以方便的分享和被发现。
— 系统具备一定的扩展性，可以方便的开发新应用。
开发方式：
本项目使用GoogleCode版本控制工具，采取开放的开发方式，读者可以自由获取最新的程序代码，开发爱好者也可以加入项目的开发建设，(当然前提是要经项目管理员的同意: )
使用的工具：
－ ThinkPHP，ThinkPHP是一个快速、简单的面向对象的轻量级PHP开发框架，它可以为我们提供安全、高效的PHP开发基础。
－ Google Maps Api，是最早的开放地图API，具有较完善的功能，能提供中国地级以上城市的详细地图数据。
－ jQuery，jQuery 是一个著名的JavaScript库，它有助于简化 JavaScript编程开发
准备知识：
Google Maps Api：http://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“更新”操作将本地代码更新到最新版本：
版本库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&v=2&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编码营原创，转载请注明出处，谢谢